如何将JavaScript变量传递给服务器端方法

Question

I am facing issue like I am unable to pass the javascript variable to server side I am aware that it is not achieveable in this scenario so I tried like setting the value to the asp hidden field using jQuery and getting the value of the label in server side but unfortunately I am getting empty value for the hidden field. Help me on how to fix this

CODE

$(document).ready(function(){
  var DataID = "4325";
    testDataVal(DataID);
});

function testDataVal(DataID){

<%=RenderMethod(DataID) %>  // How to pass javascript variable to server side

}

---

Hidden Field Approach:

$(document).ready(function(){
     var DataID = "4325";
    testDataVal(DataID);
});

function testDataVal(DataID){
   $("#<%=hdnDataVal.ClientID %>").val(DataID);

  alert($("#<%=hdnDataVal.ClientID %>").val(DataID));    // Here using javascript I can able to set the value and when I alert the value it is displayed

  <%=RenderMethod(hdnDataVal.Value) %>  // here the hiddenfield value is empty

}

    <asp:HiddenField runat="server" ID="hdnDataVal"  />

Answer 1

First of all... you should not mix server code and client code the way you're doing it.

It's a poor way to design your code. Try always to separate client and server code. They execute on different moments, places and under different circumstances... having them together will eventually draw you to difficult to debug errors.

I bet that the problem you're experiencing here is due to this way of coding.

You say on your code snippet that

<%=RenderMethod(hdnDataVal.Value) %>  // here the hiddenfield value is empty

When your page is loading and server code is executed the code inside $(document).ready() is not fired yet, as it fires when your whole page finish loading. So, your RenderMethod is firing before you put any value inside the variable.

Answer 2

try using $.ajax();

var url = 'my-url.aspx';
$.ajax({
    url: url,
    type: 'POST',
    data: {'variable_name': my_variable },
    success: function(html)
    { 
      alert('ok');
    },

});

and receiver on the server-side:

string my_variable = Request.Form['variable_name'];

Answer 3

You can use a Page Method to make a server side call from client side. It's propably the easiest way to accomplish what you want.

First of all you need to include the Script Manager in your aspx page with Page Methods enabled:

<asp:ScriptManager ID="scrmgr" EnablePageMethods="true" runat="server" /> 

Now you can invoke the server side method and pass it the client side data you want, with sth like this:

<script type="text/javascript">
    $(document).ready(function(){
        var DataID = "4325";
        testDataVal(DataID);
    });

    function testDataVal(DataID) {
        PageMethods.RenderMethod(DataID, OnSuccess, OnError);
    }

    function OnSuccess(result) {
        alert(result);
    }

    function OnError() {
        alert('Some error has ocurred!');
    }
    </script>

OnSuccess function is invoked in case the server-side method has been succesfully called. Otherwise OnError function is invoked.

This is how the Page Method should be declared inside the .aspx.cs file:

[System.Web.Services.WebMethod]
public static string RenderMethod(string dataID)
{
    return "Got here!";
}

If you place a breakpoint inside RenderMethod , then you can verify that client side data (ie value "4325") is correctly passed to it.