Form-control datepicker in c# webforms jquery 1.8.20 - c#

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",

Related

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>

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.

.FindControl not working from my C#

I want to set some of my controls in a FormView manually and some from a SQL Data Source.
Here is the snippet of my code:
<asp:FormView runat="server" DataSourceID="ds_Sco_Post_Reference_Data" ID="frmview1">
<ItemTemplate>
<div class="customer-details-inception-date">
<label class="applicationfont">Inception Date:</label>
<asp:TextBox CssClass="smallinputbox" runat="server" ID="txt_customer_details_inception_date" Text='<%# Bind("InceptionDate") %>' />
</div>
<div class="customer-details-renewal-date">
<label class="applicationfont">Renewal Date:</label>
<input class="smallinputbox" runat="server" id="txt_customer_details_renewal_date" readonly="readonly" />
</div>
<div class="customer-details-date-complient-logged">
<label class="applicationfont">Date Complient Logged:</label>
<asp:TextBox CssClass="smallinputbox" runat="server" id="txt_customer_details_date_complient_logged" />
</div>
</ItemTemplate>
</asp:FormView>
I want to be able to find the control txt_customer_details_date_complient_logged and have tried alot of different C# code.
Here is an example that does not work:
FormView cph = (FormView)this.FindControl("frmview1");
TextBox t = ((TextBox)cph.FindControl("txt_customer_details_date_complient_logged"));
t.Text = DateTime.Now.ToString("d");
Does anyone know why I cant get this to work?

How do ASP.NET Identity framework (forms) with bootstrap

I'm doing an ASP.NET Web Application with Identity with this tutorial:
http://www.asp.net/identity/overview/getting-started/adding-aspnet-identity-to-an-empty-or-existing-web-forms-project
But I would like to the form with bootstrap like that:
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
</div>
But the form with .aspx is so:
<asp:Literal runat="server" ID="StatusMessage" />
</p>
<div style="margin-bottom:10px">
<asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
<div>
<asp:TextBox runat="server" ID="UserName" />
</div>
</div>
How it should be?
Thanks.
The idea is to add the css class's of bootstrap to the asp.net controls, and what other attributes you may like as:
<div class="input-group">
<asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
<asp:TextBox runat="server" ID="UserName" CssClass="form-control" placeholder="Username" />
</div>

Categories

Resources