Get html control value in code behind without runat = server

access html control value in codebehind without runat server
In asp.net application we need to access value of html control in code behind without runat="server". For that purpose we can use name property of control. And Request.Form we can get value to code behind.So if we have html text input and you want to pass value of html input to code behind set it name property like <input name="username" />  and access it using Rquest.Form["usename"] you will get value to code behind of control without runat="server".

Code to get html control value to code behind without runat server

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <script type="text/javascript">
      function SubmitForm() {
         var theform;
          if (window.navigator.appName.toUpperCase().indexOf("NETSCAPE") > -1) {
              theform = document.forms["form1"];
          }
          else {
              theform = document.forms.form1;
          }
          theform.__EVENTTARGET = "btn";   
          theform.__EVENTARGUMENT = "";
          theform.submit();
      }    
</script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="username" name="username" />
        <input type="button" id="btn" onclick="SubmitForm()"  value="GO"/>
    </div>
    </form>
</body>
</html>


Code behind to access html control value


using System;

namespace aspnetcontrol
{
    public partial class Getvaluewithoutrunatservercontrol : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string value = Request.Form["username"];
            Response.Write(value);
        }
    }
}

Get gridview checkbox value jQuery

get gridview selected checkboxes in jquery
In asp.net gridview we show checkboxes to select rows. Some times we need to get checked checkboxes in jQuery to perform some client side operations. in jQuery we need to first get object of gridview and then need to find checked checkboxes inside gridview.

Example to get gridview checked checkboxes in jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/i18n/jquery-ui-i18n.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" type="text/css"/>
    <title>Get checkboxes in gridview using jQuery</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function () {
               var $checkedCheckBoxes = $('#<%=GridView1.ClientID %>').find("input:checkbox:checked");
            });
        });
      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="1px"
            CellPadding="3" BorderStyle="None" Font-Names="Arial">
            <FooterStyle></FooterStyle>
            <PagerStyle HorizontalAlign="Left"></PagerStyle>
            <HeaderStyle Font-Bold="True"></HeaderStyle>
            <Columns>
                <asp:TemplateField HeaderText="Select">
                   <ItemTemplate>
                        <asp:CheckBox ID="CheckBoxPurchase" runat="server" Enabled="true" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Item No." DataField="ItemNo">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Item Name" DataField="ItemName">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <input type="button" id="submit" value="Submit"/>
    </div>
    </form>
</body>
</html>

Jquery- Get hiddenfield value in user control

get value of dynamic hiddenfield
In this post we will see how to get value of dynamically loaded hiddenfield value in jQuery. This happens when we use user control in page. In such cases id of hiddenfield get changed and so hiddenfield is not accessible from javascript or jQuery. We can't access hiddenfield using class selector also because hidden field don't have class property. In this case we can use "ClientIDMode" property and set it to ClientIDMode="Static". When we set ClientIDMode="Static" it will not set dynamic id to hidden field. And now we can access it in regular way.

Code to get hiddenfield value in user control [jQuery]

You can set ClientIDMode property of hidden field in user control like:

<asp:HiddenField runat="server" ID="hiddenValue" ClientIDMode="Static" value="Some Value" />

And in jQuery you can access it as like:
   <script type="text/javascript">
        $(document).ready(function () {
            $("#submitbtn").click(function () {
                var hiddenValue = $("#hiddenValue").val();
                alert(hiddenValue);
            });
        });
    </script>

Summary: After setting ClientIDMode="Static" it will not assing dynamic id to hiddenfield and we can access hiddenfield as usual.

Get textarea value in jQuery

textarea value using jQuery

In web applications while using textarea control, we need to get the value of textarea at client side. In this post we will see example of how to get value of textarea in jQuery.

Example to get textarea value in jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="development-bundle/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>Get textarea value in jQuery</title>
<script type="text/javascript">
$(document).ready(function () {
$("#submitbtn").click(function () {
var textAreaValue = $("#txtMessage").text();
alert(textAreaValue);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea cols="50" rows="5" id="txtMessage"></textarea>
<input type="button" id="submitbtn" value="Submit" />
</div>
</form>
</body>
</html>

Assign dropdown value to other dropdown in jquery

set dropdown value to other dropdown in jquery
While woking with clientside stuff in asp.net we need to assign value of one dropdown to other dropdown. In this post we will see how to assign dropdown value to other dropdown.

Example to assign value from dropdown to other dropdown.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get dropdown value</title>
<script type="text/javascript">
$(document).ready(function () {
$("#topics").change(function () {
var text = $("#topics option:selected").text();
var value = $("#topics option:selected").val();
$("#topics1").val(value);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="topics" runat="server">
<asp:ListItem Text="C#" Value="1"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
</asp:DropDownList>

<br/><br/>
<asp:DropDownList ID="topics1" runat="server">
<asp:ListItem Text="C#" Value="1"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Output

Image click event in jquery

Image click event in jQuery

In this post we are going to see how to get click event of image. This can be done by using either id jquery selector or css selector. We will see both the examples to get image click in jquery.

Image click event using id selector [jQuery]

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get Image click event</title>
<script type="text/javascript">
$(document).ready(function () {
$("#tulips").click(function () {
alert("Image click in jquery");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="Image/Tulips.jpg"  runat="server" id="tulips" alt="image click in jquery"/>
</div>
</form>
</body>
</html>

Image click event using css selector [jQuery]

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get Image click event</title>
<script type="text/javascript">
$(document).ready(function () {
$(".imagecss").click(function () {
alert("Image click in jquery");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="Image/Tulips.jpg"  runat="server" id="tulips" alt="image click in jquery" class="imagecss"/>
</div>
</form>
</body>
</html>

Convert Date to culture specific format

datetime culture
In C# we need to show date format as per culture.To convert datetime in culture specific format we need to use CultureInfo class in .ToString constructor with culture code like for US culture pass "en-US". We will see here few examples to format date as per culture.

Code to format date in US culture [C#]

using System;
 public class StringToDateTime
 {
   public static void Main()
   {
     var myDateTimeValue = "2012-01-16 15:02:26";
     DateTime myDateTime = DateTime.Parse(myDateTimeValue);
     var dateingddmmyy = myDateTime.ToString(new CultureInfo("en-US"));
     Console.Write(dateingddmmyy);
   }
 }

Code to convert date in sanskrit Indian culture [C#]

using System;
 public class StringToDateTime
 {
   public static void Main()
   {
     var myDateTimeValue = "2012-01-16 15:02:26";
     DateTime myDateTime = DateTime.Parse(myDateTimeValue);
     var dateingddmmyy = myDateTime.ToString(new CultureInfo("sa-IN"));
     Console.Write(dateingddmmyy);
   }
 }


Code to convert date in Swedish culture [C#]

using System;
 public class StringToDateTime
 {
   public static void Main()
   {
     var myDateTimeValue = "2012-01-16 15:02:26";
     DateTime myDateTime = DateTime.Parse(myDateTimeValue);
     var dateingddmmyy = myDateTime.ToString(new CultureInfo("sv-SE"));
     Console.Write(dateingddmmyy);
   }
 }

Convert date to ""dd/mm/yyyy" format C#

format datetime in dd/mm/yyyy

In c# we need to convert datetime in different formats.In this post we will see how to get datetime in "dd/mm/yyyy" format.To parse datetime in "dd/mm/yyyy" format we need to use string formatter "dd/mm/yyyy" in .ToString() constructor.

Code to get datetime in dd/mm/yyyy format [C#]

using System;
 public class StringToDateTime
 {
   public static void Main()
   {
     var myDateTimeValue = "2012-01-16 15:02:26";
     DateTime myDateTime = DateTime.Parse(myDateTimeValue);
     var dateingddmmyy = myDateTime.ToString("dd/mm/yyyy");
     Console.Write(dateingddmmyy);
   }
 }
 

Get dropdown selected item onchange in jQuery

get dropdown list selected item onchange in jquery
When using dropdown list in asp.net application, we need to get value of selected item on onchange event of dropdown. In this post we will see example of how to get value of selected item using onchange event of dropdown.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get dropdown value</title>
<script type="text/javascript">
$(document).ready(function () {
$("#topics").change (function () {
var text = $("#topics option:selected").text();
var value = $("#topics option:selected").val();
alert("Selected text=" + text + " Selected value= " + value);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="topics" runat="server">
<asp:ListItem Text="C#" Value="1"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Output

Get dropdownlist selected value in jQuery

get dropdownlist selected value in jquery
In web application we need to get dropdown value at client side. We will see the example of how to get dropdown value in jQuery.

Code to get dropdown value in jQuery


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> type="text/javascript"> </script>
  <title>Get dropdown value</title>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#go").click(function () {
        var text = $("#numbers option:selected").text();
        var value = $("#numbers option:selected").val();
        alert("Selected text=" + text + " Selected value= " + value);
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:DropDownList ID="numbers" runat="server">
      <asp:ListItem Text="1" Value="1"></asp:ListItem>
      <asp:ListItem Text="2" Value="2"></asp:ListItem>
      <asp:ListItem Text="3" Value="3"></asp:ListItem>
    </asp:DropDownList>
  </div>
  <input type="button" id="go" value="Go" />
  </form>
</body>
</html>