Unable to get value from asp.net(Webmethod) and set this value to textbox using jquery

Question

I am working with asp.net webmethed i want get a return value and set it to text box

<asp:TextBox ID="TxtSearch" runat="server" placeholder="Search Order" Width="150px"></asp:TextBox>

<input type="submit" name="btn_search" id="btn_search" value="Search">

when i am clicking in submit button it goes to webmethod but i am not unable to get data from it and set it to text box

<asp:TextBox ID="TxtOrder" runat="server" Width="150px"></asp:TextBox>

My Method is given below

[WebMethod]
        public static List<Search> Search_Order(string TxtSearch)
        {
            db_class Connstring = new db_class();

            try
            {

                DataTable dt = new DataTable();
                List<Search> SearchItem = new List<Search>();

                dt = Connstring.SqlDataTable(@"SELECT     OrderNo, Date, CustomerName, ProductID, Price, Total, Quantity, Product_Name FROM  Order_Details WHERE OrderNo='" + TxtSearch + "'");

                foreach (DataRow dtrow in dt.Rows)
                {
                    Search SearchDeatils = new Search();
                    SearchDeatils.Product_Name = dtrow["Date"].ToString();
                    SearchDeatils.ProductID = dtrow["CustomerName"].ToString();
                    SearchDeatils.Product_Name = dtrow["OrderNo"].ToString();
                    SearchItem.Add(SearchDeatils);
                }

                return SearchItem; 
            }
            catch (Exception)
            {
                throw;
            }
        }
        public class Search       //For Order search
        {
            public string Date { get; set; }
            public string CustomerName { get; set; }
            public string OrderNo { get; set; }
            public string ProductID { get; set; }
            public string Price { get; set; }
            public string Total { get; set; }
            public string Quantity { get; set; }
            public string Product_Name { get; set; }
        }

And script is

 $(window).load(function () {

               $("#btn_search").live('click', function () {
                   $.ajax(
                      {
                          type: "POST",
                          url: "MasterDetails.aspx/Search_Order",
                          data: "{TxtSearch: '" + $('#TxtSearch').val() + "'}",
                          contentType: "application/json; charset=utf-8",
                          dataType: "json",
                          success: function (Result) {
                          alert('Get Data from DB');                             
                          $.each(Result.d, function ()
                          {
                           document.getElementById('#TxtOrder').value = value.OrderNo;                                 
                          });
                          }
                      });
               });

       });

This is because, asp.net controls IDs will change when they are rendered in the DOM. So, use one of the options in the above answer. — Venkata Krishna, May 23 '16 at 15:56

score 0 · Answer 1 · answered May 23 '16 at 16:21

Few things to note:

You need to use clientidmode=static in case of HTML server controls and ClientIDMode=Static in case of ASP.NET controls if you are trying to use the IDs on the client side. This is because client ID and server ID are not necessarily the same in ASP.NET
```
<asp:TextBox ID="TxtOrder" runat="server" Width="150px" ClientIDMode="Static" ></asp:TextBox>
```
When you are doing the following:
```
$.each(Result.d, function (){
    document.getElementById('#TxtOrder').value = value.OrderNo;                                 
});
```
You are getting the same input element (the textbox with id=TxtOrder again and again and assigning it different values.
Also, the value.OrderNo is I think undefined inside the function. Instead do something like:
```
$.each(Result.d, function (key, value){
    document.getElementById('#TxtOrder').value = value.OrderNo;                                 
});
```
As a side note, if you are already using jQuery, the jQuery way to do this would be $("#TxtOrder").val(value.OrderNo);

Implement the above changes and see. Let me know in case of issues. — Chintan, May 23 '16 at 16:50
Check if the values are being returned by the webmethod. You may debug in firebug and see the xhr response — Chintan, May 23 '16 at 17:45

Unable to get value from asp.net(Webmethod) and set this value to textbox using jquery

1 Answers1