I have a master page and based on that master page I created a page with a TextBox and two Validation controls for RequiredValidator and RegularExpressionValidator and one ValidationSummary.
when pressing the enter key in TextBox, I expected that both validator show their errorMessage on validationSummary but thats not what happening it only works when I press the button on page.
According to this page I wrapped my code with <asp:panel> and a DefaultButton attribute but it didn't solve the problem.
http://www.codeproject.com/KB/aspnet/aspnet_Enter_key_problem.aspx
I want to know what the problem here is and whether there is any workaround?
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
**<asp:Panel runat="server" DefaultButton="EmailSend">**
<table style="width: 100%">
<tr>
<asp:ValidationSummary ID="EmailValidation" runat="server" CssClass="failureNotification"
ValidationGroup="EmailValidation" />
</tr>
<tr>
<td style="width: 76px">
Email:
</td>
<td class="style1">
<asp:TextBox ID="EmailForget" runat="server" Width="244px"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="EmailRequiered" runat="server" ControlToValidate="EmailForget"
CssClass="failureNotification" ErrorMessage="RequiredFieldValidator" ValidationGroup="EmailValidation">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="EmailRegular" runat="server" ControlToValidate="EmailForget"
CssClass="failureNotification" ErrorMessage="email required"
ValidationGroup="EmailValidation">*</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td style="width: 76px">
</td>
<td class="style1">
<asp:Button ID="EmailSend" runat="server" Text="send" Width="56px" ClientIDMode="Static" />
</td>
<td>
</td>
</tr>
</table>
**<asp:Panel>**
</asp:Content>
Try adding this code
<script type="text/javascript">
if (document.addEventListener) {//if Firefox
document.addEventListener("keypress", fireFoxHandler, true);
} else {
document.attachEvent("onkeyup", ieHandler);
}
function fireFoxHandler(evt) {
if (evt.keyCode == 13) {
document.getElementById("EmailSend").click();
}
}
function ieHandler(evt) {
if (evt.keyCode == 13) {
document.getElementById("EmailSend").click();
}
}
</script>
Found this solution here.
(I didn't check this in MasterPage scenario, please check...)
If you are using IE then according to the answers on these two pages:
ASP.NET enter key and form submit with no javascript
Enter button does not submit form (IE ONLY) ASP.NET
you only need to add the following to your form
<!-- Fix for IE bug submit on pressing "Enter") -->
<div style="display:none">
<input type="text" name="hiddenText"/>
</div>
I solved this problem like this:
protected void Page_Load(object sender, EventArgs e)
{
textboxusername.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13) __doPostBack('" + LinkButton1.UniqueID + "','')");
textboxpassword.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13) __doPostBack('" + LinkButton1.UniqueID + "','')");
}
and this is the link..
<asp:LinkButton ID="LinkButton1" runat="server" class="btn" OnClick="LinkButton1_Click">
Related
I have a textbox and a GridView. I have made a column in gridview as a linkbutton. I want that when I click a linkbutton I get that link button text value in my textbox.
My gridview is shown below-
I want When I click test5 my textbox1.text = test5 and so on..
How can I do this ?
Please add commandname in gridview link column as below
<asp:LinkButton runat="server" id="lnklink" CommandName="displayLink" />
And add the "RowCommand" event on gridview like below
<asp:GridView ID="gvDemo" runat="server
onrowcommand="gvDemo_RowCommand" />
protected void gvDemo_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "displayLink")
{
textbox1.text=((LinkButton)e.CommandSource).Text;
}
}
You can do this both in asp as well as using client side technologies like JQUERY javascript etc, I will suggest you to use jquery since keeping such things in client side will help you improve the performance
Now when u create a grid /repeater etc ultimately .net renders it into simple html controls, and jquery or client side technologies just work over this html , here is a small example with simple html
> HTML
My data : <input type="Text" id="TxtBox"/> //in .net id u have to take care by using .clientid property
<table>
<tr>
<td width="50">
<input type="checkbox"/>
</td>
<td width="50">
SOmething
</td>
<td width="50">
<a href="#" class="someName" >LINK1</a>
</td>
</tr>
<tr>
<td width="50">
<input type="checkbox"/>
</td>
<td width="50">
SOmething2
</td>
<td width="50">
<a href="#" class="someName" >LINK2</a> //class name is important since thats what we are going deal with
</td>
</tr>
<tr>
<td width="50">
<input type="checkbox"/>
</td>
<td width="50">
SOmething3
</td>
<td width="50">
LINK3
</td>
</tr>
</table>
JQUERY
$(".someName").on("click","",function(){
$("#TxtBox").val($(this).text());
});
FIDDLE
http://jsfiddle.net/AmarnathRShenoy/Hw4UG/
create RowCommand event for grid and then do the following code
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.ToLower() == "test")
{
textbox1.Text = e.CommandArgument.ToString();
}
}
and for aspx page do the following in your linkbutton
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="linkbtn" runat="server" Text="test5" CommandArgument="test5" CommandName="test" />
</ItemTemplate>
</asp:TemplateField>
or if you are binding your database table column to your linkbutton then do the following
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="linkbtn" runat="server" Text='<% yourcolumname %>' CommandArgument='<% yourcolumname %>' CommandName="test" />
</ItemTemplate>
</asp:TemplateField>
Here's the top end of my list view
<asp:ListView ID="ui_lvJobList" runat="server" OnPagePropertiesChanging="ui_lvJobList_PagePropertiesChanging"
OnItemDataBound="ui_lvJobList_ItemDataBound" OnItemCommand="ui_lvJobList_ItemCommand"
OnDataBound="ui_lvJobList_DataBound" OnPagePropertiesChanged="ui_lvJobList_PagePropertiesChanged">
<LayoutTemplate>
<div>
<table class="jobs-table jobs-table-body">
<tbody>
<tr runat="server" id="itemPlaceholder" />
</tbody>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="ui_jobId<%# DataBinder.Eval(Container.DataItem,"JobID") %>" class="<%# DataBinder.Eval(Container.DataItem, "StatusID").ToString() == "1" ? "jobs-row" : "jobs-row-started"%>"
onmouseover="this.style.backgroundColor='#b8e4f7';" onmouseout="this.style.backgroundColor='#efefef';">
<td class="jobs-table-JobId">
<span class="no-decoration cursor-pointer">
<%# DataBinder.Eval(Container.DataItem,"JobID") %>
</span>
</td>
<td class="hidden-ui-control click-me-to-edit">
<asp:LinkButton runat="server" CommandName="EditJob" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"JobID") %>'
ID="ui_btnListViewEditJob" CssClass="no-decoration cursor-pointer">
<%# DataBinder.Eval(Container.DataItem,"JobID") %>
</asp:LinkButton>
</td>
...and here's my jQuery to handle double-click on any cell
$("tr[class^='jobs-row'] td").dblclick(function (e) {
e.preventDefault();
$(this).parent().find("td.click-me-to-edit a").click();
});
... I'm using jquery-1.8.3
The problem: the OnItemCommand is not firing when I double-click the row; there are more cells than I've included but I left them out for brevity.
I've tried with & without the preventDefault.
The dblclick function is being hit, I've run it with the chrome dev tools.
Thanks in advance for having a look. Let me know if I've not included enough of anything.
N
Cracked It!
I changed the LinkButton for a Button (& made the appropriate change to the jQuery selector) & it works OK, now.
I have a page that I am working on that I'm linking multiple user controls to. The user control contains 3 buttons, an attach, clear and view button. When a user clicks on any control on the page, the resulting information is "dumped" into the last visible control on the page.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" MasterPageFile="DefaultPage.master" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%# Register tagName="FileHandler" src="FileHandling.ascx" tagPrefix="ucFile" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
<asp:UpdatePanel ID="upPanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<ucFile:FileHandler ID="fFile1" runat="server" />
</td>
<td>
<ucFile:FileHandler ID="fFile2" runat="server" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
All file handling and processing is handled within the control, with an event when the upload to the file server is complete via a file name that was generated. When either button is clicked, the file name is always stored internal to the control in the last control's text box.
Control code:
<table style="width: 50%;">
<tr style="white-space: nowrap;">
<td style="width: 1%;">
<asp:Label runat="server" ID="lblFile" />
</td>
<td style="width: 20%;">
<asp:TextBox ID="txtFile" CssClass="backColor" runat="server" OnTextChanged="FileInformationChanged" />
</td>
<td style="width: 1%">
<%--<asp:Button runat="server" ID="btnUpload" CssClass="btn" Text="Attach" OnClick="UploadFile"/>--%>
<input type="button" id="btnUpload" class="btn" tabindex="30" value="Attach" onclick="SetupUpload();" />
</td>
<td style="width: 1%">
<%--<asp:Button runat="server" ID="btnClear" Text="Clear" CssClass="btn" OnClick="ClearTextValue"/>--%>
<input type="button" id="btnClearFile" class="btn" value="Clear" onclick="document.getElementById('<%=txtFile.ClientID%>').value = '';document.getElementById('<%=hfFile.ClientID%>').value = '';" />
</td>
<td style="width: 1%">
View
</td>
<td style="width: 1%">
<asp:HiddenField ID="hfFile" runat="server" />
</td>
</tr>
</table>
<script type="text/javascript">
var ItemPath = "";
function SetupUpload(File) {
ItemPath = File;
VersionAttach('<%=UploadPath%>', 'true');
}
function UploadComplete(File) {
document.getElementById('<%=txtFile.ClientID%>').value = File.substring(File.lastIndexOf("/") + 1);
document.getElementById('<%=hfFile.ClientID%>').value = File;
alert('<%=txtFile.Text %>');
alert('<%=ClientID %>')
}
function ViewLink(File, Alert) {
if (File != "") {
if (File.indexOf("../data/") != -1) {
window.open(File, '_blank');
}
else {
window.open('../data/<%=UploadPath%>/' + File, '_blank');
}
}
else if (Alert == "") {
alert('No file has been uploaded for this field.');
}
}
</script>
There are a couple of ways
a) use control.FindControl("hfFile")
b)
private HiddenField hfFile;
protected void hfFile_OnInit(object sender, EventArgs e){
hfFile = (HiddenField)sender;
}
The way I got this to work in my case was to put a title on the input button (client control), then passing the value of the clientid of the control that I wanted (textbox in this case) to the function in the onclick event (client event). I then "force" the consumer of the control to use this information when the button is clicked. The reason for the question here was to find out if there is a better way of accomplishing this within the control instead of making the consumer of the control handle the data. This does work for my purpose, it just doesn't seem as clean as I would have liked.
I am using validation summary control to display error messages of asp.net validation controls.
There are some validations in page for which validation controls are not being used. I am using custom javascript and jquery code for these. Kindly guide how I can display messages of these errors in validation summary control along with asp.net validation controls.
The key is to use the Custom Validation control. This control supports client side scripting (so you can still use your javascript code to do it) but still ties into the validation framework asp.net provides.
From the microsoft article, something like this:
<SCRIPT LANGUAGE="JavaScript">
function validateLength(oSrc, args){
args.IsValid = (args.Value.length >= 8);
}
</SCRIPT>
<asp:Textbox id="text1" runat="server" text="">
</asp:Textbox>
<asp:CustomValidator id="CustomValidator1" runat=server
ControlToValidate = "text1"
ErrorMessage = "You must enter at least 8 characters!"
ClientValidationFunction="validateLength" >
</asp:CustomValidator>
As Patrick said you can add the custom validator controls in place of your custom javascript/jQuery code. And then accordingly you can add the summary validation control. Also you can change the error message in your javascript code. Please check the below code for your reference.
<script type="text/javascript">
function validatetxtLength(source, args)
{
var txtVal=document.getElementById('<%=txtusername.ClientID %>').value;
if(txtVal=="")
{
document.getElementById('<%=custxtValidator.ClientID %>').setAttribute("errormessage","Please Enter the User Name");
args.IsValid=false;
}
else if(txtVal.length>9)
{
document.getElementById('<%=custxtValidator.ClientID %>').setAttribute("errormessage","Username must have less than 10 characters");
args.IsValid=false;
}
else
{
args.IsValid=true;
}
return;
}
</script>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="712px">
<tr>
<td colspan="3" align="center">
Validator Testing
</td>
</tr>
<tr>
<td>
Please Enter your User Name:
</td>
<td>
<asp:TextBox ID="txtusername" runat="server" Width="150px"></asp:TextBox>
</td>
<td>
<asp:CustomValidator ID="custxtValidator" runat="server" ErrorMessage="User Name must have less than 10 characters"
Text="*" ForeColor="Red" ClientValidationFunction="validatetxtLength"></asp:CustomValidator>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<asp:Button ID="btnsubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
<asp:ValidationSummary ID="ValidationSummary1" HeaderText="Please check below validations:"
runat="server" DisplayMode="BulletList" EnableClientScript="true" />
</div>
This might be useful for you.
I define some controls inside repeater itemtemplate, the problem is with the Id that are generated automatically.
This is my page:
<asp:Repeater ID="rptThreads" runat="server"
onitemcreated="rptThreads_ItemCreated">
<HeaderTemplate>
<table cellpadding="0px" cellspacing="0">
</HeaderTemplate>
<ItemTemplate>
<tr style="height:50px">
<td>
<asp:PlaceHolder ID="plcItemTitle" runat="server">
<asp:Panel id="titleContainer" runat="server" style="position:absolute;">
<asp:HyperLink ID="lnkTitle" runat="server" style="float:left;padding-right:10px;" Text='<%# Container.DataItem%>'/>
<asp:Panel id="pnlEditButtons" runat="server" Visible="false" style="vertical-align:middle;z-index:100;display:none;float:left;" >
<asp:ImageButton ID="imgbtn1" runat="server" ImageUrl="~/Images/misc/edit.png" />
<asp:ImageButton ID="imgbtn2" runat="server" ImageUrl="~/Images/misc/Rename.png" />
</asp:Panel>
</asp:Panel>
</asp:PlaceHolder>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Now I will try to describe the problem:
code-behind:
protected void Page_Load(object sender, EventArgs e)
{
int [] array = {1,2,3,4,5};
rptThreads.DataSource = array;
rptThreads.DataBind();
}
protected void rptThreads_ItemCreated(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Panel editButtonsPanel = e.Item.FindControl("pnlEditButtons") as Panel;
editButtonsPanel.Visible = true;
Panel containerPanel = e.Item.FindControl("titleContainer") as Panel;
//Point of Interest!!!!
containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');");
}
}
If I run the page as is, the generated html will be the following (I show only the first 2 items):
<table cellpadding="0px" cellspacing="0">
<tr style="height:50px">
<td>
<div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;">
<a id="lnkTitle" style="float:left;padding-right:10px;">1</a>
<div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
<tr style="height:50px">
<td>
<div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;">
<a id="lnkTitle" style="float:left;padding-right:10px;">2</a>
<div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
As you can see all divs get the SAME ID, THIS I DONT WANT!!!
But If I omit this line form the ItemCreated event:
containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');");
The generated HTML will be the following:
<table cellpadding="0px" cellspacing="0">
<tr style="height:50px">
<td>
<div id="rptThreads_ctl01_titleContainer" style="position:absolute;">
<a id="rptThreads_ctl01_lnkTitle" style="float:left;padding-right:10px;">1</a>
<div id="rptThreads_ctl01_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="rptThreads$ctl01$imgbtn1" id="rptThreads_ctl01_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="rptThreads$ctl01$imgbtn2" id="rptThreads_ctl01_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
<tr style="height:50px">
<td>
<div id="rptThreads_ctl02_titleContainer" style="position:absolute;">
<a id="rptThreads_ctl02_lnkTitle" style="float:left;padding-right:10px;">2</a>
<div id="rptThreads_ctl02_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="rptThreads$ctl02$imgbtn1" id="rptThreads_ctl02_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="rptThreads$ctl02$imgbtn2" id="rptThreads_ctl02_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
All divs get unique IDs, and this I do want
My questions are:
1)why it happens? why this line of code messup the ids?
2)how can have the unique ID's and assign javascript in codebehind?
I can add this on aspx (it will wotk and I will get unique ids):
onmouseover='<%# "javascript:ShowEditButtons(\""+ Container.FindControl("pnlEditButtons").ClientID+ "\");" %>'
But I must do it in codebehind because I need to set the javascript only if server validate some things.
Well as to why this is happening I'm not real sure. I suspect it may know that you used the ClientID so it didn't change it according to the naming container when the HTML was rendered.
As to what you can do to fix the problem, don't pass the ID to the javascript function. When an event fires in javascript the event object will be passed to the function for Firefox, IE has an explicit windows.event object. The event object will have a reference to the object that fired the event which you can then use to access the ID, but my guess is you were going to use the ID to get a reference to the element anyway.
An odd problem, can't say why this is happening, BUT... try moving this code to ItemDataBound instead of ItemCreated, I think you'll have more luck. I've written code exactly like this, but using OnItemDataBound and not had a problem.
Theoretically, any control inside a NamingContainer should get a unique ID, so there is definitely something fishy going on here.