Develop Reference

ASP ListView SelectedIndexChanged/Changing Fires in Internet Explorer for All Records ONLY

I have got an ASP ListView, bound programmatically to its DataSource at runtime.
Firefox and Chrome browsers have the issue where ONLY the first record of the ListView is causing the SelectedIndexChanged/Changing events to fire. All other selected records (2nd, 3rd, 4th record etc) are causing a Postback only, without the SelectedIndecChanged/Changing events being fired.
The strange thing, is that Internet Explorer fires the SelectedIndexChanged/Changing events on every record (not just the first record).
Does anyone know what I may be doing wrong?
<asp:ListView ID="lvUsersShoppingCart" runat="server" DataKeyField="ProductID" DataKeyNames="ProductID" OnSelectedIndexChanged="lvUsersShoppingCart_SelectedIndexChanged">
<ItemTemplate>
<div class="top-buffer">
<div class="row">
<div class="col-sm-3">
<asp:Image ID="imgProductThumbnail" class="img-responsive" runat="server" ImageUrl='<%# Eval("ThumbnailImageLocation")%>' />
</div>
<div class="col-sm-9">
<form class="form-horizontal">
<div class="form-group">
<strong>
<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName")%>' /></strong>
</div>
<div class="form-group">
<asp:Label ID="lblProductShortDescription" runat="server" Text='<%# Eval("ProductShortDescription")%>' />
</div>
<div class="form-group">
$<asp:Label ID="lblProductPrice" runat="server" Text='<%# Eval("ProductPrice")%>' />
(AUD)
</div>
<div class="form-group hidden">
<div class="col-sm-3">
<label for="lblProductQuantity" class="control-label">Quantity</label>
</div>
<asp:Label ID="lblProductQuantity" class="input-sm" runat="server" Text='<%# " x " + Eval("ProductQuantity").ToString%>'></asp:Label>
<asp:Button ID="btnEditQuantity" runat="server" Text="Change Qty" CssClass="btn btn-link" CommandName="Edit" />
</div>
<div class="form-group">
<asp:Button ID="btnDelete" runat="server" Text="Remove" CssClass="btn btn-danger" CommandName="Select" />
</div>
</form>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>

The problem is caused by the form element in your ItemTemplate:
<form class="form-horizontal">
...
</form>
You can get the correct behavior if you replace it by another type of container (typically a div):
<div class="form-horizontal">
...
</div>

Form-control datepicker in c# webforms jquery 1.8.20

I have this code in my aspx page:
<div class="form-group">
<asp:Label ID="lbl_Make" runat="server" Text="Make:"></asp:Label>
<asp:TextBox ID="tb_Make" CssClass="form-control datepicker-input" data-mask="9999-99-99" runat="server" placeholder="Enter Make"></asp:TextBox>
</div>
how come this is the result of the datepicker:
need help on this any other suggestions?
i already have these on my bundleconfig.cs :
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Scripts/jquery-1.7.1.js"));
"~/Scripts/jquery-ui-1.8.20.js"));
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/assets/third/datepicker/css/datepicker.css",
"~/Content/assets/third/datepicker/js/bootstrap-datepicker.js",

Update Panel - The ScriptManager must appear before any controls that need it

I tried to put an update panel in my aspx form, but it keeps on showing this error. The ScriptManager must appear before any controls that need it
This is my aspx
<form id="Form1" runat="server" class="form-horizontal">
<div class="col-lg-6">
<%--<asp:Panel id="pnlExisting" runat="server">
<div class="alert alert-danger" role="danger">
<i class="glyphicon glyphicon-exclamation-sign"></i> <asp:Label ID="recordCheck" runat ="server"> </asp:Label>
</div>
</asp:Panel>--%>
<div class="form-group">
<label class="control-label col-lg-4">Project</label>
<div class="col-lg-8">
<asp:DropDownList ID="ddlProjects" runat="server" class="form-control" AutoPostBack="true"
onselectedindexchanged="ddlProjects_SelectedIndexChanged" /><br />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Project Code</label>
<div class="col-lg-8">
<asp:Textbox ID="txtProjectCode" runat="server" class="form-control" required />
</div>
</div>
<%-- <div class="form-group">
<label class="control-label col-lg-4">Price</label>
<div class="col-lg-8">
<asp:Textbox ID="txtPrice" runat="server" class="form-control" Textmode="Number" required />
</div>
</div>--%>
<%-- <div class="form-group">
<label class="control-label col-lg-4">Status</label>
<div class="col-lg-8">
<asp:Textbox ID="txtStatus" runat="server" class="form-control" required />
</div>
</div>--%>
</div>
<asp:UpdatePanel ID="upMaterialsList" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lvMaterialsList" EventName="PagePropertiesChanging" />
</Triggers>
<ContentTemplate>
<table class="table table-hover">
<thead>
<th>Material</th>
<th>Quantity</th>
<th>Status</th>
<th>Date Added</th>
<th>Date Modified</th>
<th></th>
</thead>
<tbody>
<asp:ListView ID="lvMaterialsList" runat="server" ondatabound="lvMaterialsList_DataBound"
onpagepropertieschanging="lvMaterialsList_PagePropertiesChanging" OnItemCommand="lvMaterialsList_ItemCommand">
<ItemTemplate>
<tr>
<td><%# Eval("SupplierProduct")%></td>
<td><%# Eval("Quantity") %></td>
<td><%# Eval("Status") %></td>
<td><%# Eval("DateAdded", "{0: MMMM dd, yyyy}") %></td>
<td><%# Eval("DateModified", "{0: MMMM dd, yyyy}") %></td>
<td>
<asp:Label ID="ltReqMat" runat="server" Text='<%# Eval("ReqMatID") %>' Visible="false" />
</td>
<td>
<asp:LinkButton Text="Approved" class="btn btn-success " ID="lbtnApproved" runat="server"
CommandName="Approve" > </asp:LinkButton>
<asp:LinkButton Text="Decline" class="btn btn-warning " ID="lbtnDecline" runat="server"
CommandName="Decline" > </asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<tr>
<td colspan="12"><h2 class="text-center">No records found.</h2></td>
</td>
</tr>
</EmptyDataTemplate>
</asp:ListView>
</tbody>
</table>
<div class="col-lg-12">
<center>
<asp:Button ID="btnReturn" runat="server" class="btn btn-default" Text="Back"
PostBackUrl="Default.aspx" formnovalidate />
</center>
</div>
<br />
<center>
<asp:DataPager ID="dpMaterialsList" runat="server" PageSize="10" PagedControlID="lvMaterialsList">
<Fields>
<asp:NumericPagerField ButtonType="Button"
NumericButtonCssClass="btn btn-default"
CurrentPageLabelCssClass="btn btn-success"
NextPreviousButtonCssClass="btn btn-default" />
</Fields>
</asp:DataPager>
</center>
</ContentTemplate>
</asp:UpdatePanel>
</form>
I want to know why it is not working properly

Add ScriptManager tags just below the <Form> tag of your page.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

You have to include the ScriptManager control in either your content page or Master page to enable ASP.NET AJAX features. So in your Master page you can place this control just after the form tag and ensure you put it before any ContentPlaceHolder control:-
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
By this all the content page which have the Master page set to the above master will automatically use this ScriptManager.
Apart from this, if at all you want to include any specific script reference in any of your content page then you can make use of ScriptManagerProxy control which at run time will combine the properties of both ScriptManager and ScriptManagerProxy.
According to ASP.NET AJAX:-
ScriptManager - A server control that makes script resources available
to the browser, including the Microsoft AJAX Library and the
functionality that enables partial-page rendering.
ScriptManagerProxy - A server control that enables nested components
to add script and service references if the page already contains a
ScriptManager control.

Why ScriptManager causes postback on RequiredFieldValidator in ASP.NET (Web Forms)?

Before adding the ScriptManager when I was clicking on the login button it was showing the required field warning without page postback but after that it has started to do postback first and then validate fields.
It's required to add a ScriptManager when there is an UpdatePanel on the page.
How can I fix this so it doesn't postback on RequiredFieldValidator?
Login Page
<form id="signinform" runat="server" defaultfocus="username" defaultbutton="LogInBtn">
<asp:scriptmanager id="FormScriptManager" runat="server"></asp:scriptmanager>
<div class="form-signup">
<div class="form-group form-group-info">
<div class="append-icon m-b-30">
<asp:textbox id="username" runat="server" cssclass="form-control c-white form-control-success" placeholder="Username" />
<i class="mdi-action-perm-identity c-light"></i>
<asp:requiredfieldvalidator runat="server" id="UserNameValidator" controltovalidate="username" display="Dynamic" validationgroup="LoginVAL" setfocusonerror="true" cssclass=" f-11 c-red m-b-0" errormessage="The username is required." />
</div>
</div>
<div class="form-group form-group-info">
<div class="append-icon m-b-30">
<asp:textbox id="Password" textmode="Password" runat="server" cssclass="form-control c-white form-control-success" placeholder="Password" />
<i class=" mdi-action-lock-outline c-light"></i>
<asp:requiredfieldvalidator runat="server" id="PasswordValidator" controltovalidate="Password" display="Dynamic" setfocusonerror="true" validationgroup="LoginVAL" cssclass="f-11 c-red m-b-0" errormessage="The password is required." />
</div>
</div>
<div class="togglebutton togglebutton-info">
<label class="c-light normal f-11 m-b-15">
<input type="checkbox" runat="server" name="RememberMe" id="RememberMe" class="md-checkbox">
Remember me?
</label>
</div>
</div>
<asp:placeholder runat="server" id="ErrorMessage" visible="false" viewstatemode="Disabled">
<p id="ErrorMessageContainer" runat="server" class="badge badge-danger m-b-5 f-11">
<asp:Literal runat="server" ID="FailureText" ViewStateMode="Disabled" />
</p>
</asp:placeholder>
<div class="progress-demo">
<asp:linkbutton id="LogInBtn" runat="server" onclick="LogIn" text="Login" cssclass="btn btn-material-indigo btn-block btn-embossed ladda-button" validationgroup="LoginVAL" data-style="zoom-in"></asp:linkbutton>
</div>
<p>
<%-- Enable this once you have account confirmation enabled for password reset functionality--%>
<asp:hyperlink runat="server" id="ForgotPasswordHyperLink" viewstatemode="Disabled">Forgot your password?</asp:hyperlink>
</p>
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div id="LoginModalHeader" runat="server" class="modal-header bg-aero">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
<h4 class="modal-title c-white">
<asp:label id="LoginModalTitle" runat="server" />
</h4>
</div>
<asp:updatepanel id="LoginModalUpdatePanel" runat="server">
<ContentTemplate>
<div class="modal-body m-t-10">
<p class=" c-gray w-300 f-13"><asp:Label ID="LoginModalDetails" runat="server" /></p>
</div>
<div class="modal-footer">
<asp:LinkButton runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend Confirmation" Visible="false" CssClass="btn btn-material-blue-grey btn-embossed" />
<button id="LoginModalCancel" runat="server" type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Cancel</button>
</div>
</ContentTemplate>
</asp:updatepanel>
</div>
</div>
</div>
</form>
I appreciate your efforts in reaching a solution for my problem.

I came across the same issue a while back and was able to resolve it via Page.Validate();.
Basically, before I added ScriptManager everything was working well. When I would click the update button, the field validators would run and prevent a post back until requirements were met. After adding ScriptManager tag, the page would post back rendering my validators pretty much useless.
What I did was add on my update (submit) button click event:
page.validate();
if (Page.IsValid)
{
// Your update or submit code here.
}
This seems to work fine!

Write like this..
<asp:updatepanel id="LoginModalUpdatePanel" runat="server">
<ContentTemplate>
//paste all codes inside here
</ContentTemplate>
</asp:updatepanel>

Add two DropDownList to page on "Select" value in asp.net

I'm trying to create a booking page in asp like the one most hotels have. I can't seem to code/find the correct solution for this problem.
My problem is that a user can book from one to four rooms. If the user select, lets say 2 rooms, I have to make two more asp:DropDownList for adults / Children for the selected room.
Right now my booking.aspx page contains:
CheckIn (Asp:TextBox)
CheckOut (Asp:TextBox)
Rooms (Selected tag - Default value = 1)
Adults (Asp:DropDownList)
Children (Asp:DropDownList)
The default value in Rooms is 1, and if a user select 2 in the dropdownlist
two more Asp:DropDownList should come under.
I have tried to implement the DropDownLists and set the Type="Hidden", but on page load, you can actually see the field before it gets hidden.
Have also tried with some JQuery the Hide(); method, but this did also not work, because you can also see it for a split second before it gets hidden.
Code:
<div class="contentbooking">
<div class="form-group">
<asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"></asp:Label>
<asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
<asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"></asp:Label>
<select class="form-control" id="rooms">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<asp:Label ID="Label2" runat="server" Text="#1:"></asp:Label>
<br />
<asp:Label ID="Label1" runat="server" Text="Adult:"></asp:Label>
<asp:DropDownList ID="adults" CssClass="form-control" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<br />
<asp:Label ID="Label3" runat="server" Text="Children:"></asp:Label>
<asp:DropDownList ID="childrens" CssClass="form-control" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- From group for two rooms -->
<div class="form-group">
<div class="col-sm-6">
<asp:Label ID="Label4" type="hidden" runat="server" Text="#2:"></asp:Label>
<br />
<asp:DropDownList ID="adults2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<br />
<asp:DropDownList ID="childrens2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="form-group">
<br />
<asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" />
</div>
</div>
Is there a way to make it hidden before page is loading so you can't see it, because then what i am doing could work..
Hope someone can take a look.

Im not sure how to exactly achieve this, but why dont you try it using the razer sytax #if statements.
details can be found here:
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/

You can try to use css with initial property set as display:none for 2 dropdown lists and then at the time you require the dropdown to be visible, update display:block.

protected void Page_Load(object sender, EventArgs e)
{
adults2.Visible = false;
childrens2.Visible = false;
}
have you try?

I found what i was looking for, and wanted to show the answer.
Added this code in the scripting for JavaScript/Jquery:
$(function () {
$('#<%=rooms.ClientID%>').on('change', function () {
$("#<%=adults2.ClientID%>,#<%=childrens2.ClientID%>,# <%=HiddenLabel2.ClientID%> ")[this.value == "2" ? "show" : "hide"]();
});
});
To get it to work.. i needed to add the display:none in my css file for the Asp:DropDownLists.