在按钮上，单击发送Ajax调用并从aspx.cs（后面的代码）获取值到aspx页面，并将其显示在同一页面的输入字段中

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.

Answer 1

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"/>