Geek Methods ®: Send and Retrieve Json data

When we develop web applications and we are adding Ajax functionality, it's a best practice using js libraries that implement code for cross-browsing and encapsulate the callings in a clear code way, such as jQuery, instead of using raw Ajax

In this post we have a web site making an async call to the server, the process continues querying a database and returning the response to the client side in json format, so the whole circuit of the process will be the next

The code in the server-side looks like this

     
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static JsonResult getElement(string atomicSymbol)
{
    using (SqlConnection connection = new SqlConnection
    (ConfigurationManager.ConnectionStrings["chemical_bd"].ConnectionString))
    {
        try
        {
            connection.Open();

            SqlCommand proc = new SqlCommand("K_SELECT_ELEMENT", connection);
            proc.CommandType = System.Data.CommandType.StoredProcedure;

            SqlParameter p_ASymbol = new SqlParameter("@asymbol", 
              System.Data.SqlDbType.VarChar, 3);
            p_ASymbol.Value = atomicSymbol;
            p_ASymbol.Direction = System.Data.ParameterDirection.Input;

            SqlParameter p_Name = new SqlParameter("@name",  
              System.Data.SqlDbType.VarChar, 20);
            p_Name.Direction = System.Data.ParameterDirection.Output;

            SqlParameter p_LatinName = new SqlParameter("@latin_name", 
              System.Data.SqlDbType.VarChar, 20);
            p_LatinName.Direction = System.Data.ParameterDirection.Output;

            proc.Parameters.AddRange(new SqlParameter[] { p_ASymbol, p_Name, p_LatinName });

            proc.ExecuteNonQuery();

            Chemical element = new Chemical()
            {
                name = p_Name.Value.ToString(),
                latin_name = p_LatinName.Value.ToString()
            };

            return new JsonResult() { Data = element };
        }
        catch (Exception ex)
        {
            return null;
        }
    }
}

Notice that the method which processes the request is defined as static. The class JsonResponse is defined in System.Web.Mvc namespace

The calling code in the client-side has the next structure

     
function getElement(atomicSymbol) {

    var jsonData = new Object();
    jsonData.atomicSymbol = atomicSymbol;

    var jsonString = JSON.stringify(jsonData);

    $.ajax({
        url: "callprocedure.aspx/getElement",
        type: "POST",
        data: jsonString,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {

            var element = response.d.Data;
            $('#lblResult').text(element.name + " : " + element.latin_name);
        },
        error: function (result) {
            alert('ERROR: ' + result.status + ' ' + result.statusText);
        }
    });   
}

The result with a correct execution is the next

Posts

Thursday, February 28, 2013

Send and Retrieve Json data