Post
Ask Question

Get Values from HTML Input Controls in ASP.NET from Code Behind

Whenever we are developing any websites in asp.net then sometimes we need to use html control and its really very challenging that how to get the values of that control from source code or back end .And once we got the value in that html control then we can perform any operations like Insert, Delete, Update into database.

The most important things is that sometime we need to retrieve the values of those html controls as it is not declared as runat="server" on the page. And if we not include runat=”server” then we can’t fetch “Id” of that controls from source code.

So here I had demonstrated a simple demo that how to get html control textbox value from source code without include runat=server.Most of time we fetch problems on getting the selected date from textbox using datepicker Jquery.

Here is the simple way to get values of the html input controls which doesn't have runat="server" attribute defined.

1. First we have to take HTML control on which we can select date.

  1. <table class="myTable" align="center">  
  2.     <tr>  
  3.         <td>  
  4. Select Date  
  5. </td>  
  6.         <td>  
  7.             <input type="text" id="datepicker" name="_datepicker" />  
  8.             <asp:Button ID="btnSave" runat="server" Text="Show Date" Style="width: 86px; height: 36px;" OnClick="btnSave_Click" />  
  9.         </td>  
  10.     </tr>  
  11.     <tr>  
  12.         <td></td>  
  13.         <td>  
  14.             <asp:Label ID="lblDate" runat="server" Text=""></asp:Label>  
  15.         </td>  
  16.     </tr>  
  17. </table> 

2. After that we have to include jquery datepicker library in head sections of page.

  1. <script src="DatePicker/jquery-1.10.2.js" type="text/javascript"></script>  
  2.     <link href="DatePicker/jquery-ui.css" rel="stylesheet" type="text/css" />  
  3.     <script src="DatePicker/jquery-ui.js" type="text/javascript"></script>  
  4.     <script type="text/javascript">  
  5.         $(function () {  
  6.             $("#datepicker").datepicker();  
  7.         });  
  8. </script> 

OR

Note: We can directly include it like below:

  1. <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>  
  2. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"type="text/javascript"></script>  
  3. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

3. Finally we can get value of selected date on button click event or wherever we want from Textbox on label from code behind in ASP.NET.

  1. protected void btnSave_Click(object sender, EventArgs e)  
  2. {  
  3.    string strValue = Page.Request.Form["_datepicker"].ToString();  
  4.    lblDate.Text = strValue;  
  5. } 

Note: To get the values on server side code of HTML control, we need to follow below points:

  • The tag should have an attribute called NAME. Because it is used as key in form.
  • The form method should be of type POST.