I need to add a calendar control with its associated buttons in asp.net with C#.
I have the code as below.
<asp:TextBox ID="txtDateFrom" CssClass="text-small" runat="server"
BorderWidth="1px" ToolTip="Click to choose date"></asp:TextBox>
<asp:Label ID="lblFromError" CssClass="Error" runat="server"
Text="*" Visible="False"></asp:Label>
<asp:Label ID="lblTo" runat="server" Text="To" ForeColor="Black"></asp:Label>
<asp:CalendarExtender ID="txtDateFrom_CalendarExtender" runat="server"
TargetControlID="txtDateFrom"
Format="yyyy-MM-dd" TodaysDateFormat="yyyy d, MMMM">
</asp:CalendarExtender>
You will need to add an ImageButton and set the CalendarExtender's PopupButtonID property to the ID of the ImageButton.
This is from the AjaxControlToolkit's sample web site:
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<b>Calendar with an associated button:</b><br />
<asp:TextBox runat="server" ID="Date5" />
<asp:ImageButton runat="Server" ID="Image1"
ImageUrl="~/images/Calendar_scheduleHS.png"
AlternateText="Click to show calendar" /><br />
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server"
TargetControlID="Date5" PopupButtonID="Image1" />
you can use the JQuery plugin for Calendar. Check this topic
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<div type="text" id="datepicker"></div>
Do like this
1. Add a ToolkitScriptManager
2. Add a TextBox Control
3. Add a CalendarExtender
Here is the complete code :
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender
ID="CalendarExtender1"
TargetControlID="txtStartDate"
runat="server" />
Related
<form runat="server" id="from1">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script src='https://www.google.com/recaptcha/api.js'></script>
<asp:Panel runat="server" ID="pnlSiteQuestions">
>>>>> CONTROLS removed for brevity <<<<<
<asp:Button ID="btnContinue" runat="server" Text="Continue" OnClick="btnContinue_Click" ValidationGroup="Questions" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlNotRequired" runat="server" Visible="false">
Sorry you do not qualify.
</asp:Panel>
<asp:Panel runat="server" ID="pnlAdditionalDetails" Visible="false">
<asp:ValidationSummary runat="server" ID="ValidationSummary1" />
Name
<asp:RequiredFieldValidator runat="server" ID="ValidatorName" ControlToValidate="ContactFormNameTextBox" ErrorMessage="Name is required" CssClass="ErrorClass">Required</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="txtName" />
<div class="g-recaptcha" data-sitekey="ABC123"></div>
<asp:Button runat="server" ID="button1" Text="Confirm" OnClick="button1_Click" />
</asp:Panel>
</form>
I have the above form and decided to add an update panel. When a user clicks Continue, it goes to a database and determines if the user qualifies. If not pnlNotRequired message is displayed otherwise pnlAdditionalDetails is displayed.
Everything is/was working until i added the update panel. So removing the UP has everything working.
I tried adding a trigger but i didnt fully understand how it should be configured as i dont completely understand why this is occurring?
No Javascript errors listed either. Anyway to overcome this issue?
Update panel should cover all panels. Add property to update panel "UpdateMode='Conditional'" than add trigger block
I'm new to ASP.NET and C# and I am having difficulty filtering my SQL data within a Repeater Control using AJAX.
I have the SQL data showing on my page but I need to find a way to filter the data using AJAX. I'm not sure if I need to add code to my .cs file or can update through JavaScript/JQuery.
The code for Repeater is below:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<div class="PhysicianDetails">
<span><%#Eval("LastName")%>,</span>
<span><%#Eval("FirstName")%></span>
<p><%#Eval("Language")%></p>
<asp:Button ID="Button2" runat="server" Text="View Profile" CommandName="ViewProfile" CommandArgument='<%#Eval("ContactID")%>' />
</div>
</ItemTemplate>
</asp:Repeater>
The code for input fields and DropDownList which I want to filter the data within Repeater Control.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="sidebar">
<h3>Refine Your Search</h3>
<p>Provider First Name:</p>
<input type="text" runat="server" name="name" value=" " placeholder="Search by First Name" />
<asp:Button ID="Button1" runat="server" Text="GO" />
<p>Provider Last Name:</p>
<input type="text" name="name" value=" " placeholder="Search by Last Name" />
<%--Last Name<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>--%>
<asp:Button ID="Button2" runat="server" Text="GO" />
<p>Search by Language:</p>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2" DataTextField="Languages" DataValueField="Languages"></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:DB %>" SelectCommand="Select DISTINCT Language From Languages"></asp:SqlDataSource>
<asp:Button ID="Button3" runat="server" Text="GO" />
</div>
Any suggestions? Thanks!
My problem is that I can't seem to get my textbox to fire the OnTextChanged event. I also checked and it doesn't seem like it is doing an autopostback despite the fact that it is set to true.
Basically, I am trying to validate the text in the textbox and either enable or disable a button based on the validation status.
Here's my code:
<asp:Panel ID="panelAccessControl" runat="server" Visible="false">
<asp:Panel ID="panelAddMileageRate" runat="server" BorderWidth="2" >
<h2>Add Mileage Rate</h2>
<asp:ScriptManager ID="scriptManagerMileageRate" runat="server" />
<asp:UpdatePanel ID="updatePanelAddMileageRate" runat="server">
<ContentTemplate>
<p>
Purpose:
<asp:DropDownList ID="ddlAddPurpose" runat="server"
AutoPostBack="true" Width="200px"></asp:DropDownList>
<br />
Country:
<asp:DropDownList ID="ddlAddCountry" runat="server"
AutoPostBack="true" Width="200px" >
</asp:DropDownList>
<br />
Effective Date:
<asp:Calendar ID="calAddEffectiveDate" runat="server">
</asp:Calendar>
<br />
Mileage Rate:
<asp:TextBox ID="txtAddMileageRate" runat="server"
AutoPostBack="true" Width="200px"
CausesValidation="true"
ontextchanged="txtAddMileageRate_TextChanged">
</asp:TextBox>
<asp:RegularExpressionValidator
ID="validatorAddMileageRate"
ControlToValidate="txtAddMileageRate" runat="server"
SetFocusOnError="true"
ErrorMessage="Only Numbers allowed"
ValidationExpression="^\d{1,20}(\.\d{0,4})?$">
</asp:RegularExpressionValidator>
</p>
</ContentTemplate>
</asp:UpdatePanel>
<p>
<asp:Button ID="buttonAddSecurityGroup" runat="server"
Text="Submit" onclick="buttonAddSecurityGroup_Click" />
</p>
</asp:Panel>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
The text box in question is txtAddMileageRate.
Set the EventName property for your txtAddMileageRate AsyncPostBackTrigger to TextChanged.
Add following codes inside your update panel and outside of ContentTemplate
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtAddMileageRate"
EventName="TextChanged" />
</Triggers>
Other sugguestion:
Have you tried looking at the AutoComplete (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/autocomplete/autocomplete) control that is part of the AjaxControlToolKit? Its behaves the same way you want your solution to behave.
I am using Ajax Calendar for date picker. when i click the calendar image the page will get postback but the calendar popup windows is not getting popup. How to resolve this problem?
Thanks in advance.
<asp:TextBox ID="txt_FromDate" runat="server" AutoPostBack="True"
ontextchanged="txt_FromDate_TextChanged>
</asp:TextBox>
<cc1:CalendarExtender ID="cal_FromDate" PopupButtonID="ibtnFromDate"
runat="server" TargetControlID="txt_FromDate"
Format="MM/dd/yyyy">
</cc1:CalendarExtender>
<asp:ImageButton ID="ibtnFromDate"
ImageUrl="~/_layouts/images/PayrollImages/calendar.gif"
ImageAlign="Bottom" runat="server"/>
Try This:
<asp:TextBox ID="btn1" runat="server">
</asp:TextBox>
<asp:ImageButton ID="img1" runat="server"
ImageUrl="~/_layouts/images/PayrollImages/calendar.gif"/>
<cc1:CalendarExtender ID="calendar1" runat="server" PopupButtonID="img1"
TargetControlID="btn1" Enabled="True">
</cc1:CalendarExtender>
<asp:TextBox ID="txtDOB" runat="server" Width="50%"></asp:TextBox>
<cc1:CalendarExtender ID="txtDOB_CalendarExtender" runat="server"
TargetControlID="txtDOB"
Format="MM/dd/yyyy" PopupButtonID="imgDate"
PopupPosition="BottomLeft">
</cc1:CalendarExtender>
<asp:Image ID="imgDate" AlternateText="Image Date"
ImageUrl="~/Images/Calendar.png" runat="server" />
try this,
<asp:TextBox ID="txt_from" placeholder="MM/DD/YYYY" runat="server"
AutoPostBack="True" ontextchanged="txt_from_TextChanged">
</asp:TextBox>
<cc1:CalendarExtender ID="txt_from_CalendarExtender" runat="server"
Format="MM/dd/yyyy" Enabled="True"
TargetControlID="txt_from">
</cc1:CalendarExtender>
no need to use image button for calendar.
You are just missing a Property of CalanderExtender PopupButtonID. try the following
<asp:TextBox ID="txt_FromDate" runat="server" AutoPostBack="True"
ontextchanged="txt_FromDate_TextChanged">
</asp:TextBox>
<asp:ImageButton ID="ibtnFromDate"
ImageUrl="~/_layouts/images/PayrollImages/calendar.gif"
ImageAlign="Bottom" runat="server"/>
<cc1:CalendarExtender ID="cal_FromDate" PopupButtonID="ibtnFromDate"
runat="server" PopupButtonID="ibtnFromDate"
TargetControlID="txt_FromDate" Format="MM/dd/yyyy">
</cc1:CalendarExtender>
I did everything correct and its not showing me any error. I just want to allow user to enter numbers but its allowing all the characters.
Here is my source
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers">
</asp:FilteredTextBoxExtender>
<asp:Label ID="Label1" runat="server" Text="Phone No"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
You should use a ToolkitScriptManager instead of a ScriptManager
You could also try ValidChars instead of FilterType
<asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
TargetControlID="TextBox1" ValidChars="0123456789.,">
</asp:FilteredTextBoxExtender>
I always use FilterMode="ValidChars" or FilterMode="InvalidChars".
Then use the ValidChars="0123456789.," or InvalidChars="0123456789.," to do the job
<asp:FilteredTextBoxExtender
ID="FilteredTextBoxExtender1"
runat="server"
TargetControlID="TextBox1"
FilterMode="ValidChars"
ValidChars="0123456789.,">
</asp:FilteredTextBoxExtender>