January 19, 2015 07:19 by
Peter
This article will explain you how Create DropDownList Validation with JQuery JavaScript in ASP.NET 5 where DropDown is either bind with SqlDataSource or listItems. Place one drop down and button on the page in design view and add JQuery javascript file in solution and add it's reference in head section of page. Then, Write following JQuery script in head section of page.
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#Button1').on('click', function(e) {
var selectedText = $('#DropDownList1
option:selected').text().toLowerCase();
if (selectedText == 'select')
{
alert('Please select any language.');
e.preventDefault();
}
else
alert('You selected ' + selectedText);
})
})
</script>
</head>
HTML Code for Drop Down And Button
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>VB</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" />
Now if DropDownList is obtaining populated from database by SqlDataSource then we'd like to line AppendDataBoundItems property of dropdown to true and add one list item with text choose at 0th index in Page_Load event.
<asp:DropDownList ID="DropDownList2" runat="server"
AppendDataBoundItems="True"
DataSourceID="SqlDataSource1"
DataTextField="ProductName"
DataValueField="ProductID">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDbConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName] FROM [Products]">
</asp:SqlDataSource>
<asp:Button ID="Button2" runat="server" Text="Button" />
Next step, write the following code in code behind.
protected void Page_Load(object sender, EventArgs e)
{
DropDownList2.Items.Add(new ListItem("select", "0"));
}
Then write following JQuery code in head section of html source of page.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#Button2').on('click', function(e) {
var selectedValue = $('#DropDownList2').val();
if (selectedValue == 0)
{
alert('Please select any product.');
e.preventDefault();
}
else
alert('you selected product with ID ' + selectedValue);
})
})
</script>
If you wanna use the JavaScript code Instead of Jquery then write the following code:
<script type="text/javascript">
function Validation() {
var selectedValue = document.getElementById('<%=DropDownList2.ClientID%>').value;
if (selectedValue == "0")
{
alert("Please Select Product");
}
else {
alert("You selected " + selectedValue);
}
}
</script>
Finally, Call the function bellow in OnClientClick Event of button:
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="Validation>
About HostForLIFE.eu
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
