Synchronizing Ajax Toolkit Calendar Extender - asp.net

I have two Ajax Toolkit calendar extenders. One of them is a start date and the other is the corresponding end date. What I would like to happen is when a date is selected in the Start calendar the End calendar will jump to that date. This sounds pretty simple but I have been having a hard time getting it to happen.
Someone put me out of my misery... What would be the way to accomplish this?

here you go this worked for me
<asp:TextBox runat="server" ID="txt1" OnTextChanged="txt1_TextChanged" AutoPostBack="true"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal1" TargetControlID="txt1"></ajaxToolkit:CalendarExtender>
<asp:TextBox runat="server" ID="txt2"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal2" TargetControlID="txt2"></ajaxToolkit:CalendarExtender>
protected void txt1_TextChanged(object sender, EventArgs e)
{
cal2.SelectedDate = Convert.ToDateTime(txt1.Text);
}
or you can do this through javascript I would recommend using jquery though to find the textboxes instead of using straight javascript
<asp:TextBox runat="server" ID="txt1" onchange="SetEndDate()"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal1" TargetControlID="txt1"></ajaxToolkit:CalendarExtender>
<asp:TextBox runat="server" ID="txt2"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="cal2" TargetControlID="txt2"></ajaxToolkit:CalendarExtender>
<script type="text/javascript">
function SetEndDate()
{
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
txt2.value = txt1.value
}
</script>

Related

Asp.net validation error message to change labels text

I am using asp.net validation controls for validating user input. What i want is to change the label text with the error message generated by the validation control.
<asp:Label ID="Label1" runat="server" Text="Whats your name"></asp:Label>
<asp:TextBox ID="nameB" Width="322px" Height="30px" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="business" runat="server" ErrorMessage="Please tell us your name." ControlToValidate="nameBuisness" CssClass="errMsg" Display="Dynamic"></asp:RequiredFieldValidator>
Thank you.
One way is to handle the submit-button's OnClientClick-event and call a javascript function like:
<script type="text/javascript">
function displayValidationResult() {
// Do nothing if client validation is not available
if (typeof (Page_Validators) == "undefined") return;
var LblName = document.getElementById('LblName');
var RequiredName = document.getElementById('RequiredName');
ValidatorValidate(RequiredName);
if (!RequiredName.isvalid) {
LblName.innerText = RequiredName.errormessage;
}
}
</script>
<asp:Label ID="LblName" runat="server" Text="Whats your name"></asp:Label>
<asp:TextBox ID="TxtNameBusiness" Width="322px" Height="30px" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredName" ValidationGroup="business"
runat="server" ErrorMessage="Please tell us your name." ControlToValidate="TxtNameBusiness"
CssClass="errMsg" Display="None"></asp:RequiredFieldValidator>
<asp:Button ID="BtnSumbit" runat="server" Text="Submit"
OnClientClick="displayValidationResult()" ValidationGroup="business" />
I've used some of the few ASP.NET client validation methods available. I've also renamed your controls to somewhat more meaningful and added a submit-button.
ASP.NET Validation in Depth
If your requirement is that you want to do this validation using the built-in ASP.Net validation controls, then you will need to use the ASP.Net CustomValidator control. This cannot be done using the ASP.Net RequiredFieldValidator control. To do the validation you specified, put a CustomValidator control on on your page so that the markup looks like this:
<asp:Label ID="Label1" runat="server" Text="Whats your name"></asp:Label>
<asp:TextBox ID="nameB" Width="322px" Height="30px" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustValidator" runat="server" ControlToValidate="nameB"
ValidateEmptyText="true" ErrorMessage="Please tell us your name."
onservervalidate="CustValidator_ServerValidate" Display="none" >**</asp:CustomValidator>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" CausesValidation="true" />
You then need to write your custom validator. The server-side validation code looks like this:
protected void CustValidator_ServerValidate(object source, ServerValidateEventArgs args)
{
if (string.IsNullOrWhiteSpace(args.Value))
{
Label1.Text = CustValidator.ErrorMessage;
args.IsValid = false;
}
else
{
Label1.Text = "Whats your name";
args.IsValid = true;
}
}
This custom validator will give you the behavior you desire.
In general when you use a CustomValidator control, you should do both server-side validation (for security) and client-side validation (for a better UI experience). To get client-side validation, you will need to write a client-side function in javascript and/or jQuery to do similar validation and then assign it to the ClientValidationFunction of the custom validator.
Further information on the CustomValidator control can be found in the MSDN documentation.

how to make a validation code for ASP.NET form with VB coding

im trying to build a form+attachment that needs to be send to email.
Im using a VB background code (attachementemail.aspx.vb)
and my front (b-16.aspx)
I want the page to check that the user entered a email, name, phonenumber and attachment.
what command do I put in the axp.vb
and what on the .aspx
tried just about anything.
The simplest way is to use validators eg RequiredFieldValidator for mandatory fields. You can also implement CustomValidators for custom logic.
See http://msdn.microsoft.com/en-us/e5a8xz39.aspx for the available validators
At it's basic level you could use RequiredFieldValidator and CustomValidation in your form. You can use some regex logic for email, I use this but there are many out there:
Regex(#"\w+([-+.]\w+)#\w+([-.]\w+).\w+([-.]\w+)*")
Personally I use client side javascript before it hits the server and then I re-validate the entries once it hits the server. If your using the postback events then you'll need update panels and a scriptmanager (not sure if you are aware of this already, so apologies if teaching you to suck eggs!).
Here is an example:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
Code behind (sorry this is in c#)
protected void Button1_Click(object sender, EventArgs e)
{
if (RequiredFieldValidator1.IsValid)
{
Label1.Text = "Has content";
}
else
{
Label1.Text = "Not valid";
}
}
Note that the required field validator has it's own methods to display a "hey you haven't entered content here my friend" message, but i have added that to the label instead.

asp.net ajax like reorder list

I'm trying to create a draggable list to change the order some pictures are displayed in a product page. I wan't to be able to do this in the product edit page (same place where I add the pics and their description). So, when creating I have nothing inserted on the database and since the AJAX toolkit reorderlist only works with a datasource I was specifying the list as the source of the reorderlist and calling the databind method. In the item template of the reorder list I have a textbox to edit the pic description and a img that displays the photo. I can drag the items and the list gets reordered, however when I click save I can't get the updated text on the textbox and the order property on the picture doesn't get updated. I've tried manually getting the items in the reorderlist but they're always null even though the list shows 20 items the DataItem is empty. I've enabled viewstate and didn't help either.
Here's my code:
<ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" SortOrderField="PhotoOrder" AllowReorder="true" PostBackOnReorder="true" ClientIDMode="AutoID" EnableViewState="true" ViewStateMode="Enabled">
<ItemTemplate>
<div>
<%--<eva:PhotoView ID="iPV" runat="server" Photo='<%# Container.DataItem %>' />--%>
<asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# string.Format("http://eva-atelier.net/sparkle{0}", Eval("Path").ToString().Substring(1)) %>' Width="150" Height="150" />
<div class="formGrid">
<label class="formLabel">Title</label>
<asp:TextBox ID="txtTitle" runat="server" Text='<%#Bind("FileTitle") %>' />
<br />
<label class="formLabel">Description</label>
<asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("FileDescription") %>' />
<br />
</div>
<p>
<asp:Button ID="btnRemove" runat="server" Text="Remover" />
</p>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="pnlReorder" runat="server" />
</ReorderTemplate>
<DragHandleTemplate>
<div style="width:20px;height:20px;background-color:Red"></div>
</DragHandleTemplate>
</ajaxToolkit:ReorderList>
And below the C# code:
private void AddPhotosView()
{
if (_currentProduct.Photos != null && _currentProduct.Photos.Count > 0)
{
rdlPhotos.DataSource = _currentProduct.Photos;
rdlPhotos.DataBind();
}
}
I'm new to Asp.net I come from a large WPF background, sorry if I'm making basic question :)
Thanks
For updating order of ReorderList items add your handler for it's OnItemReorder event. In this case your handler may looks like this:
protected void ReorderHandler(object sender, ReorderListItemReorderEventArgs e)
{
var movedPhoto = _currentProduct.Photos[e.OldIndex];
_currentProduct.Photos.RemoveAt(e.OldIndex);
_currentProduct.Photos.Insert(e.NewIndex, movedPhoto);
_currentProduct.Photos.Save();
}
For updating FileTitle and FileDescription of single Photo it is easy to use OnUpdateCommand event of ReorderList and a button with attribute CommandName="Update" for each Photo.
And for updating all Photos at once just iterate through rdlPhotos.Items in next manner:
protected void SaveAllHandler(object sender, EventArgs e)
{
foreach (var riItem in rdlPhotos.Items)
{
var id = ((HiddenField)riItem.FindControl("itemID")).Value;
var title = ((TextBox)riItem.FindControl("txtTitle")).Text;
var description = ((TextBox)riItem.FindControl("txtDescription")).Text;
UpdatePhoto(id, title, description);
}
}
Remember that rdlPhotos.Items here are in initial order. And for identifying which Photo should be updated add hidden field with Photo.ID-value to ReorderList's ItemTemplate like this:
<asp:HiddenField runat="server" ID="itemID" Value='<%# Eval("ID") %>' />

Update Panel and triggers from a repeater control

Hi I found code similiar to the following online. It's seems really great for getting a button buried in a repeater control to trigger a full cycle back to the server.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="HiddenButton" />
</Triggers>
</asp:UpdatePanel>
<!--Make a hidden button to treat as the postback trigger-->
<asp:Button ID="HiddenButton" runat="server" Style="display: none" Text="HiddenButton" />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<!--when cick the button1, it will fire the hiddenButton-->
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('HiddenButton').click();return false;"
runat="server" />
</ItemTemplate>
</asp:Repeater>
It uses a hiddenButton to achieve this by hooking the click event of the original button to this one. However my addition to this was the setting of the CommandArgument for the button. I would also need it to be set for the HiddenButton.
Does anyone know a way of going about this?
First I will like to explain the Disadvantage of using the Update Panel using the very same example posted by you.
Below is the Original Code
Output
To display the 22 character string you can check how much data is being received and sent to server. Just imagine following
If you would consider send each request to Database using Update Panel and your GridView is in Update Panel!!!!!!
Suppose you would use ViewState data for each request and with GridView Inside the Update Panel.
Both the above techniques are worst as per my understanding.
Now I will describe you Page Methods
Page Method over Update panel
Page Methods allow ASP.NET AJAX pages to directly execute a Page’s Static Methods, using JSON (JavaScript Object Notation). Instead of posting back and then receiving HTML markup to completely replace our UpdatePanel’s contents, we can use a Web Method to request only the information that we’re interested.
Sample Code
Output
Hope this clearly explains the difference of usage.
Answer to the original Query
You have to register the ItemDataBound event of the below Repeater and use below code for it.
Code Behind
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Button btn = (Button)e.Item.FindControl("Button1");
btn.OnClientClick = string.Format("SubmitButton('{0}');return false;"
, HiddenButton.ClientID);
}
}
JavaScript
<script type="text/javascript">
function SubmitButton(btn)
{
$("#" + btn).click();
}
</script>
//Alternative
<script type="text/javascript">
function SubmitButton(btn)
{
document.getElementById(btn).click();
}
</script>
Reference & Here
Your HiddenButton control is a server control but you are trying to access it in JQuery using it's ASP.Net ID,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('**HiddenButton**').click();return false;"
runat="server" />
A quick way to fix it is to make a separate function,
<script type="text/javascript">
function SubmitButton(btn)
{
$get("#" . btn).click();
}
</script>
and change your button code to ,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>'
runat="server" />
In code behind, in repeater's ItemDataBound event, find the button and HiddenControl and set Button1's OnClientClick property,
Button1.OnClientClick= string.Format("SubmitButton('{0}');return false;",HiddenButton.ClientID);

Using code nuggets for setting controls properties

Why cant i use code nuggets to set a control property??For example a validationgroup of a button or the text property of a label.
<asp:Button ID="btn" runat="server" Text="test" ValidationGroup='<% =TestValidate %>'
<asp:Label ID="lbl" runat="server" Text='<% =Test %>' />
Is there any way to set a controls properties without using codebehind?
You could use data binding:
<asp:Label ID="lbl" runat="server" Text='<%# "Hello World" %>' />
provided that you call DataBind in code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataBind();
}
}
<%=SomeVar %> uses late binding which behaves like a Response.Write (in Page.PreRender, if I remember correctly). Hence it will not be utilized by the server controls like the way you wanted it. Unless you use code-behind or inline-code-behind to perform binding.

Resources