This article will show you how you can display jquery error
message display using popup dialog box in asp.net using jQuery Ui IN ASP.NET.
Some of my previous articles are as follows: jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net, jQuery
Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC,
Theme
Creation for jQuery Mobile, jQuery DatePicker Calendar With Fold Effect on TextBox Click
In Asp.Net, jQuery
Datepicker Calendar With Fold Effect Using jQuery In Asp.Net, User
Registration Form With ToolTip Message and Validation Using jQuery, C#.Net in
Asp..Net, jQuery
Message Open As Modal Dialog Box In Asp.Net Without Refresh With Ok Button,
jQuery
DatePicker Calendar With Slide Down and Slide Up Effect In Asp.Net, jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net.
So for this article first we will create a new asp.net application and add the below jQuery library reference.
So for this article first we will create a new asp.net application and add the below jQuery library reference.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now we will add the below jquery code in page header.
<script type="text/javascript">
$(function
() {
$("#divdialog").dialog({
autoOpen: false,
show: {
effect: "shake",
duration: 1000
}
});
});
function
ShowMessage() {
if
($('#txtName').val() == "") {
$("#divdialog").dialog("open");
return
false;
} else
{
return
true;
}
}
</script>
|
In above code I have jquery dialog to display the message box. In this I have set autoOpen: false so message box does not visible at page load. After that I have assign shake property so when message box becomes visible at that time message box will shake. In this function I have check weather the box is blank or not. If yes then dialog box will be visible otherwise page post back will take place.
Now we will combine all the code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="WebApplication2.WebForm12"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery
Error Message Display Using Popup Dialog Box In Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function
() {
$("#divdialog").dialog({
autoOpen: false,
show: {
effect: "shake",
duration: 1000
}
});
});
function
ShowMessage() {
if
($('#txtName').val() == "") {
$("#divdialog").dialog("open");
return
false;
} else
{
return
true;
}
}
</script>
<style type="text/css">
.MessageStyle
{
font-size:
12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
Name :<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClientClick="javascript:return ShowMessage();"
OnClick="Button1_Click" />
<div id="divdialog" title="Basic dialog" class="MessageStyle">
<p>
Please enter contact persone
name.</p>
</div><br />
You name is : <asp:Label ID="lblMessage" runat="server" Text="-" Style="color: #FF0000"></asp:Label>
</form>
</body>
</html>
|
Now we will add the bellow code to display the added textbox value. Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view