HTML5 attribute "required" inside UpdatePanel, not working (asp.net 4) - asp.net

In my .aspx file, I have an UpdatePanel with some textboxes and a button. If I add the "required" attribute to the textboxes, the postback stops working. I can see in Firebug that it's not posting at all. If I remove the "require" attribute, it's working as it should. Am I doing something wrong here, or is it a way to fix it?
The code for the UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%# GetComments (DataBinder.Eval(Container, "DataItem.id")) %>
<div class="contact_form">
<ul>
<li>
<h2>Skriv en kommentar til oss!</h2>
</li>
<li>
<asp:TextBox ID="txtName" runat="server" CssClass="txtBox" placeholder="Ditt navn" required />
<span class="form_hint">Ditt navn skal stå her</span>
</li>
<li>
<asp:TextBox ID="txtCaptcha" runat="server" CssClass="txtBox" required placeholder="Skriv resultatet av 10 pluss 6 her" />
<span class="form_hint">Du klarer vel å regne ut 10+6? :-)</span>
</li>
<li>
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" required placeholder="Din kommentar" />
</li>
<li>
<asp:Button ID="cmdSaveComment" CssClass="button" runat="server" CommandName="SaveComment" CommandArgument='<%# Eval("id")%>' Text="Puliser kommentar" />
</li>
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>

I guess you don't get error. So, if required field specified, an input field must be filled out before submitting the form.
try giving some value in the textboxes.
EDIT
Though, I should have mentioned my previous answer as a comment. However, this seems to be a bug mentioned here.

Related

Updating a field in an Master Page's UpdatePanel from CodeBehind

I've got a master page with a cart count at the top of my page inside an updatepanel, along with another updatepanel which wraps a search field tied a dropbox denoting search type. (The UpdatePanelSearch is tied to an AutoCompleteExtender and the Find dropdown at left sets the type of contextkey to be used when autocompleting)
I'm attempting to let code-behind code in a subordinate page (usually the user clicking or manipulating an inventory item of some sort) update the cart count.
Things I've tried:
If UpdatePanelCart and UpdatePanelSearch are both set with updatemode=automatic, UpdatePanelSearch stops reacting to updates of the Find dropdown.
The same happens if I use a single updatepanel to wrap both areas.
If I set UpdatePanelCart's UpdateMode to conditional, then UpdatePanelSearch works properly--but I don't have an obvious way (to me at least) of forcing the refresh of the cart count (i.e., I can set it to a new value in code a code-behind, but it won't actually be redrawn until the page is fully redrawn).
What's the correct strategy here? I'll admit I don't fully understand why #1 and #2 don't work (I suspect the AutocompleteExtender is the reason but I'm really just guessing)
Code for the Search panel follows:
<asp:UpdatePanel ID="UpdatePanelSearch" runat="server">
<ContentTemplate>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
CompletionInterval="150"
CompletionListCssClass="autocomplete_completionListElement"
ServiceMethod="GetCompletionList"
ServicePath="/atomic/Autocomplete.asmx"
TargetControlID="txtThingToFind"
UseContextKey="True"
CompletionSetCount="75">
</ajaxToolkit:AutoCompleteExtender>
<asp:Panel ID="Panel1" DefaultButton="cmdQuickFind" runat="server">
<div id="mainSearchArea">
<div id="searchLine">
<div id="signinArea">
<asp:Label ID="Label1" runat="server" CssClass="formfield-required"></asp:Label>
</div>
<asp:Panel ID="Panel2" DefaultButton="cmdQuickFind" runat="server">
<div id="searchArea">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Find <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<asp:LinkButton ID="LinkButton1" runat="server">Comic Title</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton2" runat="server">Publisher</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton3" runat="server">Artist</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton4" runat="server">Writer</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton5" runat="server">Storyline</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton6" runat="server">1st Appearance</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton7" runat="server">2nd Appearance</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton8" runat="server">Origin</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton9" runat="server">Death</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton10" runat="server">Special Appearance</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton11" runat="server">Advanced Find...</asp:LinkButton></li>
</ul>
</div>
<!-- /btn-group -->
<asp:TextBox ID="TextBox1" runat="server"
CssClass="form-control" AutoCompleteType="None" autocomplete="off"
placeholder="Find comic title or issue...">
</asp:TextBox>
<asp:Button runat="server" ID="Button1" Text="Go" CssClass="btn btn-primary" />
</div>
<asp:Panel runat="server" ID="Panel3" CssClass="findScope" Visible="false">
<label>Search: </label>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="findScope" AutoPostBack="True" />
<asp:RadioButton ID="RadioButton2" runat="server" Text="All sellers" Checked="True" GroupName="findScope" AutoPostBack="True" />
</asp:Panel>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</asp:Panel>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
It seems at least one of my problems was my fuzzy understanding of the trigger mechanism for UpdatePanels.
The reason for behavior #1 (the Cart not updating) was that I hadn't placed the UpdatePanelCart closely enough around the cart label. Automatically updating UpdatePanels only update as a result to changes in their immediate child controls unless explicit postbacktriggers are defined. Since the UpdatePanel was wrapping the whole menu line, the automatic update didn't happen.
Behavior #2 (nothing on the page of any consequence updating if I attempted to wrap the whole page in an updatepanel) was related-- none of the controls I wanted to see update were immediate child controls, so this was going to fail.
The solution for me was to draw the updatepanels more narrowly, and do some extra CSS work to work around the formatting issues these inevitably caused to the menu.

call login page and register page in popup window in asp.net

i have to design an website use asp.net
in this web site we have to use login and register
i use this code in master page
<asp:LoginView ID="Log_view" runat="server">
<AnonymousTemplate >
<span class="log_txt">Hi Guset! </span>
Rigster
Login
</AnonymousTemplate>
<LoggedInTemplate>
<asp:LoginName ID="Log_name" runat="server" CssClass="log_txt" FormatString="Hi, {0}!"/>
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutText="Logout" CssClass="log_lnk" LogoutPageUrl="~/Default.aspx" LogoutAction="Redirect" OnLoggingOut="LoginStatus1_LoggingOut" /> </LoggedInTemplate>
</asp:LoginView>
and its work without any problem, but the login page and register page will display normal, i want to display in popup window.
in other page i use this script to call page in popup window use AjaxControlToolkit and its work fine
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<span>
<a href="#" id="Rig_log" runat="server" > Rigister | Login </a>
</span>
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Rig_log" CancelControlID="btn_close" BackgroundCssClass="popup_Background">
</cc1:ModalPopupExtender>
<cc1:DragPanelExtender ID="Image1_DragPanelExtender" runat="server"
Enabled="True" TargetControlID="Panl1" DragHandleID="Panl1">
</cc1:DragPanelExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<div id="popup_header"> <span>Register | Login </span><a href="#" ID="btn_close" runat="server" > X </a></div>
<div id="popup_content"> <iframe id="irm1" src="Register_login.aspx" runat="server"></iframe></div>
</asp:Panel>
my issue is , how i can call login page and register page in popup, i try but it's not working
thanks
Hanashi,
You can try out java script below like this.
window.open(your page name);
Dinesh Nagrale

Required field validator is not working

I have used a required field validator, on click of add Button error message will be displayed but whatever code written on onclick event will be executed even if the field is empty.
<div class="form-group posrel">
<asp:Label ID="Label1" runat="server" AssociatedControlID="txtDept"><i class="fa fa-pencil"></i></asp:Label>
<asp:TextBox runat="server" ID="txtDept" placeholder="Department Name" ValidationGroup="ss1"></asp:TextBox>
<div class="text-right validators">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Department Name" ControlToValidate="txtDept" ValidationGroup="ss1">
</asp:RequiredFieldValidator>
</div>
</div>
Below is the code snippet of add button -
<div class="form-group pull-right">
<asp:LinkButton runat="server" ID="lnkbtnaddept" CssClass="btn btn-primary" ValidationGroup="ss1" OnClick="lnkbtnaddept_Click">
<asp:Label runat="server" Text="Add" ID="lbladddept"></asp:Label>
<i style="margin-left: 10px;" class="fa fa-send"></i>
</asp:LinkButton>
</div>
May be this will help you out:
On link-button click event validate your page.
Page.Validate("validation group");
if(Page.isValid){
// your code logic
}
for more on page validate follow the link
https://msdn.microsoft.com/en-us/library/0ke7bxeh%28v=vs.110%29.aspx
Turn on JS support for the Validator control by adding attribute:
EnableClientScript="True"
It should prevent a post-back until text box is filled.
take your Id of RequiredFieldValidator and update on back end
or .cs page.
Ans RequiredCityName.Update();

How is my page creating two different types of checkbox?

Got a really weird thing happening on my page. I have some checkbox controls and some of them are rendering like this..
<span confirmmodified="true" class="aspNetDisabled"><input type="checkbox" disabled="disabled" name="ctl00$FormContents$TrackerDetails$OutOfScopeUSQS" id="ctl00_FormContents_TrackerDetails_OutOfScopeUSQS"><label for="ctl00_FormContents_TrackerDetails_OutOfScopeUSQS">Out of scope USQS</label></span>
But some of them are rendering like this...
<input type="checkbox" name="ctl00$FormContents$TrackerDetails$OutOfScopeSQA" id="ctl00_FormContents_TrackerDetails_OutOfScopeSQA"><label for="ctl00_FormContents_TrackerDetails_OutOfScopeSQA">Out of scope USQS</label>
See, no span? Cant work out what is going on I have looked at the page and control and doesnt seem like anything different is happening...
UPDATE: [this is the markup]
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="AuditStateTracker.ascx.cs"
Inherits="Dashboard.controls.AuditStateTracker" %>
<div class="grid_12 alpha">
<h2><asp:Literal runat="server" Text="<%$ Resources:LocalisedText, TrackerMigration%>" /></h2>
</div>
<div class="grid_1">
<asp:CheckBox ID="OutOfScopeUSQS" runat="server" Text="<%$ Resources:LocalisedText, OutOfScopeUSQS %>" />
</div>
<div class="grid_1" runat="server" ID="divOutOfScopeSQA">
<asp:CheckBox ID="OutOfScopeSQA" runat="server" Text="<%$ Resources:LocalisedText, OutOfScopeUSQS %>" />
</div>
<div class="grid_1">
<asp:CheckBox ID="OutOfScopeRS" runat="server" Text="<%$ Resources:LocalisedText, OutOfScopeRS %>" />
</div>
<div class="grid_1" runat="server" ID="divRingFencedSQA">
<asp:CheckBox ID="RingFencedSQA" runat="server" Text="<%$ Resources:LocalisedText, RingFencedSQA %>" />
</div>
<div class="grid_1">
<asp:CheckBox ID="RingFencedRS" runat="server" Text="<%$ Resources:LocalisedText, RingFencedRS %>" />
</div>
<div class="grid_1" runat="server" ID="divBusinessCase">
<asp:CheckBox ID="BusinessCase" runat="server" Text="<%$ Resources:LocalisedText, BusinessCase %>" />
</div>
<div class="grid_1" runat="server" ID="divDelisted" visible="false">
<asp:CheckBox ID="Delisted" runat="server" Text="<%$ Resources:LocalisedText, Delisted %>" />
</div>
The first checkbox is disabled, the second one isn't; that's how asp.net renders disabled checkboxes.
It's throwing that span on there so asp.net can decorate it with the css class aspNetDisabled. This would allow you to (optionally) style disabled controls differently.
Incidentally, this disabled class is actually configurable.
In earlier versions of ASP.NET Microsoft used to render the disabled = "disabled"attribute for your controls. However, since the HTML 4.01 specification, the disabled attribute is not valid anymore for each type of web control. It is still valid for input, but not anymore for span.
So what they've done is add a style class (in CSS) which is set to controls when they are disabled. This is also the case with any controls in a diabled control. By default, this style class is called `aspNetDisabled'.
You can actually use a different name for this class, but not for individual controls. The name of this style class can only be set as a static property on the root class WebControl, for instance at application start in your global.asax.cs.
protected void Application_Start(object sender, EventArgs e)
{
WebControl.DisabledCssClass = "disabled";
}
More annoying is that for checkboxes, ASP.NET renders a span around you checkbox with the defined style class on it.
<span disabled="disabled">
<input id="ctl00_UsecaseContent_ctl01_ctl01_bCVbox" type="checkbox" name="ctl00$UsecaseContent$ctl01$ctl01$bCVbox" checked="checked">
</span>
When you are using e.g. Bootstrap as your UI framework, and on top of that a checkbox specific framework, such as https://github.com/flatlogic/awesome-bootstrap-checkbox, this additional span can actually break the structure of your HTML checkbox control hierarchy.

How to affect differences in row content when binding a dataset to a ListView in ASP.NET 3.5

I have added a ListView to a web form and this code works when the data columns in the bound dataset have values:
<asp:ListView ID="picturesListView" runat="server"
GroupPlaceholderID="groupsGoHere"
ItemPlaceholderID="itemsGoHere"
GroupItemCount="1" >
<LayoutTemplate>
<p id="pictureList">Picture List:</p>
<ol id="imagegallery">
<asp:PlaceHolder ID="groupsGoHere" runat="server" />
</ol>
</LayoutTemplate>
<GroupTemplate>
<asp:PlaceHolder runat="server" ID="itemsGoHere" />
</GroupTemplate>
<ItemTemplate>
<li>
<a href="<%# Eval("ImageURL")%>" title="<%#Eval("ImageDesc") %>">
<%#Eval("ImageDesc")%>
</a>
</li>
</ItemTemplate>
</asp:ListView>
Then in the codebehind file, I have just these 2 lines to populate the Listview:
picturesListView.DataSource = dsImages
picturesListView.DataBind()
All rows in the dataset have a value for the ImageURL column but the ImageDesc column can be null or an empty string. How could I check to see if ImageDesc for a given row is empty and construct a "pseudo-descriptor" such as "untitled picture no. N" where N is the relative row number in the dataset. I suppose I could change the stored procedure that returns this dataset...but this seems as if it should be possible.
This could be done more gracefully, but should answer your question:
<div runat="server" visible='<%# !string.IsNullOrEmpty(Eval("ImageDesc","{0}") )%>' >
<a href="<%# Eval("ImageURL")%>" title="<%#Eval("ImageDesc") %>">
<%#Eval("ImageDesc")%>
</a>
</div>
<div runat="server" visible='<%# string.IsNullOrEmpty(Eval("ImageDesc","{0}") )%>' >
My psuedo-descriptor
</div>

Resources