I have created a design using asp .net. On clicking the submit button a validator message will come but style is changed. I have seen that "required" keyword is used for showing validator message in php and it won't change any style. Is it possible to use such a validator in asp .net?
I have tried:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControltoValidate"Control Name"></asp:RequiredFieldValidator>
But I need to show the error message as pop up.
You need to
Set ShowMessageBox="true" in your ValidationSummary control;
Set Display="none" in your RequiredFieldValidator control;
Example:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControltoValidate"Control Name" Display="none" />
<asp:ValidationSummary ID="MyValidationSummary" runat="server"
ShowMessageBox="true"
ShowSummary="false" />
Based on your question, I believe you are looking for a validation example in ASP.net.
Please see the simple example I have for you below:
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
</script>
Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Display="None" ControlToValidate="txtName"
runat="server" ErrorMessage="Name is required."></asp:RequiredFieldValidator>
<br />
Email:
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="None" ControlToValidate="txtEmail"
runat="server" ErrorMessage="Email is required."></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
<div id="validation_dialog" style="display: none">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</form>
</body>
Related
hope you all are fine
i am new on asp.net i am facing a problem when i input the data in textbox and the result related to that textbox can not showing in gridview popup.
here is my code below
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("#Button1").live("click", function () {
$("#popup").dialog({
title: "Displaying GridView Data",
width: 600,
buttons: {
// if you want close button use below code
// Close: function () {
// $(this).dialog('close');
// }
}
});
return false;
});
</script>
<div id="popup" style ="display:none">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="OpprId" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="CardCode" HeaderText="CardCode"
SortExpression="CardCode" />
<asp:BoundField DataField="OpprId" HeaderText="OpprId" ReadOnly="True"
SortExpression="OpprId" />
<asp:BoundField DataField="SlpCode" HeaderText="SlpCode"
SortExpression="SlpCode" />
<asp:BoundField DataField="PredDate" HeaderText="PredDate"
SortExpression="PredDate" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDataBaseConnectionString %>"
SelectCommand="SELECT [CardCode], [OpprId], [SlpCode], [PredDate] FROM [OOPR] WHERE ([CardCode] = #CardCode)">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="CardCode" PropertyName="Text"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
</form>
</body>
Kindly help, your help will be highly appreciated
Thanks
Your code is kind of incomplete. I don't see the textbox1 control. Also You have gridview in a div which has "style=display:none";
Please share your complete code or enough code so someone can understand and help you out.
UPDATE
Add
$( "#popup" ).dialog({ autoOpen: false });
before the code
$("#Button1").live("click", function ()
Also remove the style on #popup div.
More details are here https://api.jqueryui.com/dialog/#entry-examples
Hope it should work.
I have mentioned my code below, the problem is I am unable to clear textbox. Kindly see my javascript code for textbox clearing and piont out the error?
<script type="text/javascript">
function CancelClick() {
document.getElementById("<%=txtname.ClientID %>").innerHTML =txtname.Text='';
}
</script>
<asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel2" runat="server">
</asp:UpdatePanel>
<asp:Button ID="btnConfirm" runat="server" Text="Confirm" onclick="btnConfirm_Click" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID ="btnConfirm"
ConfirmText ="Are you sure you want to click this?" OnClientCancel ="CancelClick"
ConfirmOnFormSubmit="false" runat="server">
</asp:ConfirmButtonExtender>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
With jQuery (as you asked for)
<script type="text/javascript">
function CancelClick() {
$("#<%=txtname.ClientID %>").val("");
}
</script>
You need to set the value not the innerHtml:
document.getElementById("<%=txtname.ClientID %>").value = '';
<script type="text/javascript">
function CancelClick() {
var textBoxId = '<%= #txtname.ClientID %>';
$(textBoxId).val('');
}
</script>
I am using jQuery confirmation box within my listView and the confirmation box displayed with the user clicks delete.
The problem that I am faced with, is that when the user clicks OK it, the lvAlbums_ItemDeleting event is not fired.
Below is the .aspx code:
<link href="jQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jQuery/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="https://www.google.com/jsapi?key=" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$().ready(function () {
$('#dialogContent').dialog({
autoOpen: false,
modal: true,
title: "MySql Membership Config Tool",
width: 300,
height: 250
});
});
function rowAction(uniqueID) {
$('#dialogContent').dialog('option', 'buttons',
{
"OK": function () { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
});
$('#dialogContent').dialog('open');
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="thumbs">
<asp:ListView ID="lvAlbums" runat="server" GroupItemCount="15" DataKeyNames="album_id">
<LayoutTemplate>
<table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; width: 100%;">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<div>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ThumbNail.ashx?ImURL=/uploads/"+Eval("photo_file_name") %>'
Width="130" Height="150" BorderStyle="None" />
<asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("album_name") %>' CssClass="photoTitle"></asp:Label>
<br />
<asp:Button ID="btnDeleteAlbum" runat="server" Text="Delete Album" Width="144px" OnClick="lvAlbums_ItemDeleting" OnClientClick="javascript:return rowAction(this.name);"
CommandName="Delete" />
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div class="pager">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvAlbums" PageSize="12">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="true" ShowPreviousPageButton="true"
ShowLastPageButton="false" ShowNextPageButton="false" ButtonCssClass="first"
RenderNonBreakingSpacesBetweenControls="false" />
<asp:NumericPagerField CurrentPageLabelCssClass="current" NextPreviousButtonCssClass="next"
NumericButtonCssClass="numeric" ButtonCount="10" NextPageText=">" PreviousPageText="<"
RenderNonBreakingSpacesBetweenControls="false" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ShowPreviousPageButton="false"
ShowLastPageButton="true" ShowNextPageButton="true" ButtonCssClass="last" RenderNonBreakingSpacesBetweenControls="false" />
</Fields>
</asp:DataPager>
</div>
</div>
<div id="dialogContent">
<h3>confirm</h3>
<p>Click ok to accept</p>
</div>
</form>
</body>
Firebug throws the following error:
__doPostBack is not defined
[Break On This Error] "OK": function () { __doPostBa...ID, ''); $(this).dialog("close"); },
If anyone could provide a solution with the above, it would be greatly appreciated.
I have spent days looking at different jQuery confirmation box examples but this is the best I can do. Ideally I would want to be use http://jqueryui.com/demos/dialog/#modal-confirmation within gridviews, dataViews and ListViews but can't find examples which exactly provide steps to follow.
Thanks
Or you could use this:
protected void Page_PreRender(object sender, EventArgs e)
{
//If the page doesn't have a control that causes a postback, __doPostBack() won't be output
//as a function definition. One way to override this is to include this line in your Page_PreRender():
Page.ClientScript.GetPostBackEventReference(this, string.Empty);
//This function returns a string calling __doPostBack(); but also forces the page to output
//the __doPostBack() function definition.
}
i have the following function in default.aspx.....i have webusercontrol which have 10 checkboxes and 1 button .... i want when i click on button1 of user control then it can access the function of default.aspx ...page ...if i dragged the usercontrol to default.aspx
Normally if i use 10 checkboxes and 1 button in default.aspx then it works fine ... if i use 10checkboxes and 1button in usercontrol then drag that usercontrol in default.aspx then it will not work ..
what was the problem ...how to fix this ?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%# Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</form>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#'<%=Button1.ClientID %>'").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 1)
{
alert('You cannot check more than 1 check box.');
return false;
}
});
</script >
</body>
</html>
Try this one -->
------------------------------------ASPX Code------------------------------------------------------------------------------
ASPX:
<%# Register Src="~/UserControl/WebUserControl.ascx" TagName="ucCheckBox" TagPrefix="UC" %>
<UC:ucCheckBox ID="ucCheckBox" runat="server" />
JAVASCRIPT:
$(document).ready(function(){
$("input:submit[id$='btnSubmit']").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 5)
{
alert('You cannot check more than 5 check box.');
return false;
}
});
});
------------------------------------ASPX Code------------------------------------------------------------------------------
-------------------------------User control code--------------------------------------
UserControl:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="UserControl_WebUserControl" %>
<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" /><br />
<asp:CheckBox ID="CheckBox6" runat="server" /><br />
<asp:CheckBox ID="CheckBox7" runat="server" /><br />
<asp:CheckBox ID="CheckBox8" runat="server" /><br />
<asp:CheckBox ID="CheckBox9" runat="server" /><br />
<asp:CheckBox ID="CheckBox10" runat="server" /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Continue" />
-------------------------------User control code--------------------------------------
Try
$("#'<%=Button1.ClientID %>'").click(function(){
});
A usercontrol implements INamingContainer Interface. So in order to get the elements using id you need to get the runtime generated id by using .ClientID.
When you added the usercontrol to default.aspx, the ID of Button1 changed to userControl1_Button1
So you need to change $("#Button1").click(function() so that it will always have the correct name for the button:
$("# + <%=Button1.ClientID %> +").click(function()
I have code below. I want to hide the update panel by using Javascript (without going to server) when the user clicks Hide button. Although javascript funciton seems to be working fine in debugging, it does not hide!
<script type="text/javascript" language="javascript">
function Show() {
document.getElementById("UpdatePanel1").Visible = true;
}
function Hide() {
document.getElementById("UpdatePanel1").Visible = false;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show" OnClientClick="Show(); return false;" />
<asp:Button ID="BtnHide" runat="server" Text="Hide" OnClientClick="Hide(); return false;" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Gönder"
onclick="btnSubmit_Click" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
you need to use the UpdatePanel1's client id so
document.getElementById('<%=UpdatePanel1.ClientID%>');