How to pass data from (front-end) .aspx to (back-end) .aspx.cs using hidden filed

Ashok Kumar 141 Reputation points
2023-01-09T11:19:52.853+00:00

I want to pass data from back-end to front-end and front-end to back-end so far I have tried like below

back-end to front-end :-

back-end (.aspx.cs):- 

   public string amt;  
     
   protected void Page_Load(object sender, EventArgs e)  
   {  
   amt = "100";  
   }

front-end (.aspx):- 

   <body>  
    <form id="form1" runat="server">  
   <script type="text/javascript">  
   var amt = "<%=amt%>";  
   alert(amt); // data coming  
   </script>  
    </form>  
   </body>

The above example is working fine but while passing the value from front-end to back-end I'm getting the null("") value (for this concept I have read this article)

front-end to back-end :-

front-end (.aspx) :- 

   <body>  
    <form id="form1" runat="server">  
   <script type="text/javascript">  
                   var amt = "<%=amt%>";  
     
                   alert("amt :- " + amt);  
     
                   function getval() {  
                       var keyid = "1234";  
                       document.getElementById('key_id').value = keyid;  
     
                       alert(document.getElementById('key_id').value);  
                       alert('hit');  
                       window.location.href = "http://localhost:49855/ValuePassig.aspx";  
                   }  
                      //alert(amt);  
               </script>  
     
               <input id="key_id" runat="server" type="hidden" name="key_id_1" />  
               <input type="button" id="btn" value="click" runat="server" onclick="getval()" />  
     
    </form>  
   </body>

back-end(.aspx.cs) :- 

   public string amt;  
   protected void Page_Load(object sender, EventArgs e)  
   {  
     
   amt = "100";  
     
   //I'm getting the null("") value   
   //string kId = this.Request["key_id_1"];  
   //string kId = Request.Form["key_id_1"];   
   string kId = key_id.Value; //Initially the value come null(acceptable) and next I'm clicking on the "click" button at that time null value should not come(but coming)  
     
   Response.Write(kId);  
     
   }

I did my best so far to achieve this concept and I don't why I'm getting a null value because, I have followed the article also(above mentioned link) to achieve this
concept

Suggest me where I did the mistake to pass the value from front-end to back-end and how to achieve this

Please give me your best suggestions.

Note :- I have changed the code for better understanding that is button added and when I click on the button the hidden value should come back-end.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,246 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
863 questions
Accepted answer
  1. Albert Kallal 4,646 Reputation points
    2023-01-10T17:40:16.873+00:00

    Ok, so we want to have some value - set in code behind cs, to set/pass/have some value for use in the client side js code.

    And of course in the js code, we want use of that value, and ALSO to be able to change that value, and then upon actions, or code behind, we want that value passed back to the code behind.

    First up, don't use a server side expression to "set" that value for use in the js code. The reason of course then you don't have a easy way to pass back and have use of that change value in the code behind.

    You can freely change the var in js code, but you really don't have a easy/nice way to get that value back to the code behind (so that <%= %> expression is a one way street to the client side.

    There are a LOT of ways to do this, but probably best is to drop in a hidden field control (as per your question title)..

    You can also use a hidden text box, but might as well use the hidden field.

    So, lets on page load (and ONLY first page load - like all setup on the page should be inside of the !IsPostBack code block - all web pages quite much need this !IsPostBack code block).

    And bonus? the Hidden field control has automatic view state. (that means the value will persist on page post-backs).

    So, lets drop in a server side button to "show" the value.

    And THEN lets drop in a button (client side) to show the value, and ALSO to modify the value.

    So, say this markup:

    &lt;asp:HiddenField ID=&#34;MyHotelName&#34; runat=&#34;server&#34; ClientIDMode=&#34;Static&#34; /&gt;
   &lt;h3&gt;Server side code&lt;/h3&gt;
   &lt;asp:Button ID=&#34;cmdShowServer&#34; runat=&#34;server&#34; OnClick=&#34;cmdShowServer_Click&#34;
      Text=&#34;Show Hotel Name&#34; CssClass=&#34;btn&#34; /&gt;
 &lt;br /&gt;
 &lt;asp:Label ID=&#34;lblShow&#34; runat=&#34;server&#34; Text=&#34;Label&#34;&gt;&lt;/asp:Label&gt;


 &lt;h3&gt;Client side code&lt;/h3&gt;
 &lt;asp:Button ID=&#34;cmdShowClient&#34; runat=&#34;server&#34; Text=&#34;Show Hotel Name&#34;
     OnClientClick=&#34;ShowHotel();return false&#34; /&gt;
 &lt;br /&gt;
 &lt;asp:Button ID=&#34;cmdChangeClient&#34; runat=&#34;server&#34; Text=&#34;Change Hotel Name&#34;
     OnClientClick=&#34;ChangeHotel();return false&#34; /&gt;

 &lt;script&gt;

    function ShowHotel() {
        alert(&#34;Hotel name = &#34; + $(&#34;#MyHotelName&#34;).val())
    }

    function ChangeHotel() {
        sHotelNew = prompt(&#34;Enter new hotel value&#34;)

        $(&#34;#MyHotelName&#34;).val(sHotelNew)

    }

&lt;/script&gt;

    And our code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            MyHotelName.Value = &#34;Zoo&#34;;
        }
    }

protected void cmdShowServer_Click(object sender, EventArgs e)
{
    lblShow.Text = &#34;Value of hotel = &#34; + MyHotelName.Value;
}

    so, now we have this:

    277917-jsclient.gif

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Lan Huang-MSFT 25,386 Reputation points Microsoft Vendor
    2023-01-10T06:30:52.22+00:00

    Hi @Ashok Kumar , If you just want to get the hidden field from the backend, you can pass the value directly without going through js.

     &lt;input id=&#34;key_id&#34; runat=&#34;server&#34; type=&#34;hidden&#34; name=&#34;key_id_1&#34; value=&#34;1234&#34; /&gt;

    277679-image.png Best regards, Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.