On button click send Ajax call and get value from aspx.cs(code behind) to aspx page and display it in input field in the same page

Question

I am new to AJAX and have stuck in a problem, I want to send AJAX CALL on button click, while button clicking the value of input field is sent to aspx.cs (code behind) page and response should be get and I try to show that response to that same input field but it's not working.

ASPX CODE:

<input type="text" class="wpcf7-text" id="d_id" name="d_id" runat="server"> // this id is sent to the Read_Driver_Account funtion and on response it is sending the driver cell number which i want to display in the driver cell number imput field
<input class="wpcf7-text" id="driver_cell" name="driver_cell" runat="server">
<asp:Button ID="btnn1" OnClick="Read_Driver_Account" runat="server"  Text="Get"/>
<script>
$("btnn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/Udate_Driver_Account/",   //Udate_Driver_Account.aspx file is placed in VisualStudio/Websites/Fp/Udate_Driver_Account.aspx, where Fp is name of my website.
            data: {
                id: $(this).val(), 
                driver_cell: $("#drivercel").val()
            },
            success: function (result) {
                alert('ok');
            },
            error: function (result) {
                alert('error');
            }
        });
    });

</script>

ASPX.CS CODE:

public string drivercel;

protected void Read_Driver_Account(object sender, EventArgs e)
{
var alldata = d_id.Value;
string driveradres = tokens[7];
string drivercel = tokens[8];  // i want to set this value to the input field id="driver_cell"
}

Note: tokens[8] is a value coming from a live database it's not a static value; Also i want to set more than one values to more than one input fields.

You could work with `Web API`, `WebMethods` or `Postback`. Take a look [here](http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx) for `WebMethods` (which aren't state of the art anymore). — NtFreX, Dec 18 '16 at 11:37
Maybe [this post](http://stackoverflow.com/questions/16932623/what-is-the-advantage-of-using-web-api-over-web-method-in-asp-net) is also an interesting source — NtFreX, Dec 18 '16 at 12:02

Aruna · Answer 1 · 2016-12-18T11:57:24.963

The JQuery selector you used should be $("#btnn1") instead of $("btnn1"). Then the ajax url should be /pageName/webMethod like /Udate_Driver_Account.aspx/Read_Driver_Account.

And use JSON.stringify to send the data as data: JSON.stringify({ id: $(this).val(), driver_cell: $("#drivercel").val() }).

Add contentType: "application/json; charset=utf-8" to send the data as json and dataType: "json" to get the response data as json.

<input class="wpcf7-text" id="driver_cell" name="driver_cell" runat="server">
<asp:Button ID="btnn1" OnClick="Read_Driver_Account" runat="server"  Text="Get"/>
<script>
$("#btnn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/Udate_Driver_Account.aspx/Read_Driver_Account",   //Udate_Driver_Account.aspx file is placed in VisualStudio/Websites/Fp/Udate_Driver_Account.aspx, where Fp is name of my website.
            data: JSON.stringify({
                id: $(this).val(), 
                driver_cell: $("#drivercel").val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                alert(result);
                // $("#drivercel").val(result.d);
            },
            error: function (result) {
                alert('error');
            }
        });
    });

</script>

Then mark your method with WebMethod attribute and make it as public static with parameter name same as the data json above.

public string drivercel;

[System.Web.Services.WebMethod]
public static string Read_Driver_Account(string id, string driver_cell)
{
  string drivercel = tokens[8];  // i want to set this value to the input field id="driver_cell"
  return drivercel;
}

Note: As you used the asp:Button id directly in JQuery selector, you should add ClientIDMode="Static" property to the button as below to use the same id in client side (OR add the same in Page directive). Otherwise, the button will have different dynamic id in client side and the JQuery click event won't get fired.

<asp:Button ID="btnn1" ClientIDMode="Static" OnClick="Read_Driver_Account" runat="server"  Text="Get"/>

There's one more thing i want to add which i havent added before, which is i am also sending a variable value while calling a function from button click. I have updated the question code. please review. — Nouman Ahmad Khan, Dec 19 '16 at 18:26

On button click send Ajax call and get value from aspx.cs(code behind) to aspx page and display it in input field in the same page

1 Answers1