Binding Label from WebMethod using jQuery AJAX in ASP.Net

Last Reply 4 months ago By dharmendr

Posted 4 months ago

this code works for me , the only problem is it does not bind the return value id and name to labels in alert box return values shows but it does not bind the return value in label

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=txtSearch]').on('blur', function () {
            $.ajax({
                type: "POST",
                url: "Default2.aspx/GetPersonDetails",
                data: '{name: "' + $("#<%=txtSearch.ClientID%>")[0].value + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
 
                    var user = JSON.parse(response.d);
                    $("[id*=lblId]").val = "dd";
 
 
                    $('#lblName').val = user.name;
                }
            });
        });
    });
</script>

 

   [WebMethod]
   public static string GetPersonDetails(string name)
   {
       string jsonData = "";
       string constr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
       using (SqlConnection con = new SqlConnection(constr))
       {
           using (SqlCommand cmd = new SqlCommand("SELECT id, name FROM person WHERE id = @Name", con))
           {
               cmd.Parameters.AddWithValue("@Name", name);
               con.Open();
               SqlDataReader sdr = cmd.ExecuteReader();
               if (sdr.Read())
               {
                   var input = new
                   {
                       Id = sdr["id"],
                       Name = sdr["name"]
                   };
                   jsonData = (new JavaScriptSerializer()).Serialize(input);
               }
               con.Close();
           }
       }
 
       return jsonData;
   }

 

You are viewing reply posted by: dharmendr 4 months ago.
Posted 4 months ago Modified on 4 months ago

Hi nauna,

1. You are binding the response in the failure function. You need to bind it in success function.

2. When assigning the value to label you can't use val method to assigh the value. You have to use html method.

3. You need to use the JSON attribute as returned by the json string. This is case sensitive. So you need to use the same what is returned by the response i.e. in this case you have to use Id and Name instead of id and name.

Check the modified code.

<script type="text/javascript">
    $(function () {
        $('[id*=txtSearch]').on('blur', function () {
            $.ajax({
                type: "POST",
                url: "Default2.aspx/GetPersonDetails",
                data: '{name: "' + $("#<%=txtSearch.ClientID%>")[0].value + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var user = JSON.parse(response.d);
                    $("[id*=lblId]").html(user.Id);
                    $('[id*=lblName]').html(user.Name);
                },
                failure: function (response) {
                    alert(response.responseText)
                },
                error: function (response) {
                    alert(response.responseText)
                }
            });
        });
    });
</script>