Zawar Zawar - 4 months ago 27
ASP.NET (C#) Question

How to pass a string from javascript to server? and then get a return value from server in asp.net webforms

I have this modal. inside a form tag

<div id="Incoming_Call" class="modal fade" role="document">
<asp:Label runat="server" id="Caller_id" Text="Incoming Call"</asp:Label>
</div>


I want to change the label text when the modal will show

<script>
string id = "temporary value"//javascript has this value on clientside.
// i don't have this value on page load but after some event triggers.

$('#Incoming_call').on('shown', function(){
id="zetawars@hotmail.com";
var text = '<%= generatestring(id)%>';
$('#<%=Caller_id.ClientID%>').html = id;
});
</script>


I need to send that
id
variable to server side to a function
generateString()
after the string has changed from
id="temporary Value"
to
id="zetwars@hotmail.com"
or something

This is on server side.

public string generateString(string id)
{
id = // does some processing;
return id;
}


So, I want to send a variable of javascript to the server side then server has to do some processing and return the value. the javascript variable is not ready at page load time. So I can't pass it inside
<%%>
these tags and get a newer value. It will only pass "temporary value" as a string not the new value.

Answer

Calling a server side method from javascript is really simple.You can do this with jQuery $.ajax function and a [WebMethod]

Code behind:

protected void Page_Load(object sender, EventArgs e)
{
}

[System.Web.Services.WebMethod]
public static string generateString(string id)
{
    System.Diagnostics.Debugger.Break();
    return String.Format("Response from server for - {0}.Call time - {1}",id,DateTime.Now.ToString("HH:mm:ss"));
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var id = "temporary value";

            $("#btnMakeAjaxCall").click(function () {
                MakeAjaxCall();
            });

            function MakeAjaxCall() {
                $.ajax({
                    type: "POST",
                    url: "AjaxCallExample.aspx/generateString",
                    contentType: "application/json;charset=utf-8",
                    data: '{id:"' + id + '"}',
                    dataType: "json",
                    success: function (data) {
                        var caller = '<%: Caller_id.ClientID %>';
                        $("#" + caller).text(data.d)
                    },
                    error: function (errordata) {
                        console.log(errordata);
                    }
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnMakeAjaxCall" value="Make AJAX call" />
        <asp:Label ID="Caller_id" runat="server" Text="Incoming Call"></asp:Label>
    </form>
</body>