We Keep Coding

Page scrolling on selecting value from drop down menu

i have successfully completed my web application for an organization and it works up to expectations but i noticed one problem and tried to cure it via searching on Google and asking seniors but none of these helped much.
Problem:
I have multiple drop downs lists on page, in which selecting value in one drop down triggers the loading of another drop down i.e. Country > cities situation, problem is that whenever i click any value it scrolls page to the top and i have to scroll back again then again and again which realy looks bad and unprofessional. Please help me.
Code:
<asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Panel ID="pnlBoxesDropDowns" runat="server">
<label style="width:400px">Relevant Region</label>
<asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True" AutoPostBack="true" >
<asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server"
ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>
<label style="width:400px">Relevant District</label>
<asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server"
ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
<label>Relevant P.Station</label>
<asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server"
ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
<label>Priority</label>
<asp:DropDownList ID="ddlPriority" runat="server">
<asp:ListItem Text="Top" Value="1"></asp:ListItem>
<asp:ListItem Text="Normal" Value="2"></asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<br />
<br />
<asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
help please.

The core issue here is that you are posting back to the server on every dropdown select. This means that the web page reloads, because it is your webserver that updates the HTML versus the more modern way to do things which is to have javascript do it on the client. Here is a hacky, imperfect, but quick solution:
In the browser, inspect your html DOM. Each of your dropdown ASPX tags should have been replaced with something along the lines of
<select id="ctl000$ddlDistricts"...
You can use url hashtags to scroll to that area by appending #ctl000$ddlDistricts to the url. Since the server knows which control was posted, it can get the control's client-side ID, and write it into the following javascript (preferably at the bottom of the page).
<script type="text/javascript">
location.href='#' + <%=PostedControl.ClientID %>
</script>
Why is this imperfect? Because it will scroll your page to a point where the dropdown is at the top edge of the browser. This means that if a user selects the dropdown with it halfway down the page, once the page reloads, that will be at the top. At the very least, however, your dropdowns will then be within view.
Your original question indicated that you wanted the page to look "professional" and while this gets the job done, it is imperfect, as will all solutions be when you are dealing with classic ASPX webforms-style postbacks. Specifically, your dropdowns have something that looks like this:
OnSelectedIndexChanged=MyFunction
What this tells the ASPX form is, in essence, "when you render this dropdown control into HTML, add something into the tag like onChange="postMyFormBackToServerCausingReloadAndPageScroll. What you really want, perhaps, is to have it do onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload. That involves more knowledge than I can add to an already long answer, but here are some helpful links:
http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms (a bit old but probably a good stepping stone)
http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx (a slightly more modern way to do it, but you do more yourself with this method as opposed to relying on .NET)
Lastly, the fully modern way to do things that involves completely rewriting your page
http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for (not sure if this is the right article for you, just google for ".NET MVC")

Modify Regular Expression for "dd/MM/yyyy"

I have the regular expression for "dd/MM/yyyy" which works fine,
"^([0]?[1-9]|[1][0-2])[./-]([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0-9]{4}|[0-9]{2})$"
but I want to modify this so it also accepts 00/MM/2014.
My program interpret this as all the days in a specific month. For example 00/04/2014
means all the dates in month of April.
Can someone tell me what kind of change I need to make to above script to make this happen?
Here is the code which I am using it in :
<asp:TextBox ID="TextBox5" runat="server" MaxLength="1" CssClass="MainContent"
style="text-align:justify" ValidationGroup="MKE" Width="130px" />
<asp:ImageButton ID="ImgBntCalc" runat="server" CausesValidation="False"
ImageUrl="images\calendar-schedulehs.png" />
<asp:MaskedEditExtender ID="MaskedEditExtender2" runat="server"
AcceptNegative="Left" DisplayMoney="Left" ErrorTooltipEnabled="True"
mask="99/99/9999" MaskType="Date" MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError"
TargetControlID="TextBox5" />
<asp:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
ControlExtender="MaskedEditExtender2" ControlToValidate="TextBox5"
Display="Dynamic" EmptyValueBlurredText="*" ValidationExpression="^(?:[012]?[0-9]|3[01])[./-](?:0?[1-9]|1[0-2])[./-](?:[0-9]{2}){1,2}$"
InvalidValueMessage="Date is invalid" ValidationGroup="MKE1" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy"
PopupButtonID="ImgBntCalc" TargetControlID="TextBox5" />

Well right now it's built for MM/dd/yyyy (the first group can only contain 0-12). But here's one that works for dd/mm/yyyy and allows for a 00 or 0 day:
"^([0]?[0-9]|[12][0-9]|[3][01])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$"

You may also want to check out DateTime.ParseExact (format is described here), in most cases it's the easier way to parse dates...

How about:
dd/mm/yyyy:
^(?:[012]?[0-9]|3[01])[./-](?:0?[1-9]|1[0-2])[./-](?:[0-9]{2}){1,2}$
mm/dd/yyyy:
^(?:0?[1-9]|1[0-2])[./-](?:[012]?[0-9]|3[01])[./-](?:[0-9]{2}){1,2}$

I'd submit that there's too much going on in this expression. Subjective, to be sure, but if this were my code I'd make a looser regex and do the validation in code. I find it's way easier to come back six months later and understand that, rather than a complicated regex.
That being said...
^(00|0?[1-9]|[12][0-9]|3[01])[./-]([0]?[1-9]|[12][0-9]|[3][01])[./-]([0-9]{4}|[0-9]{2})$
EDIT
By way of explanation, here's the day portion of the expression, commented:
^(
00 # match the literal string '00'
| 0?[1-9] # or, match 1-9, optionally prefixed with '0'
| [12][0-9] # or, match days 10-29
| 3[01] # or, match days 30 and 31
)
Judging by your comments, it sounds like there's a problem with how you're actually using the regex in code. Can you post the code where you're actually using the expression?

Try this pattern
^([0]?[0-9]|[1][0-2])[.\/-]([0]?[1-9]|[1|2][0-9]|[3][0|1])[.\/-]([0-9]{4}|[0-9]{2})$
IN ASPX
<asp:TextBox ID="TextBox5" runat="server" MaxLength="1" CssClass="MainContent"
style="text-align:justify" ValidationGroup="MKE" Width="130px" />
<asp:ImageButton ID="ImgBntCalc" runat="server" CausesValidation="False"
ImageUrl="images\calendar-schedulehs.png" />
<asp:MaskedEditExtender ID="MaskedEditExtender2" runat="server"
AcceptNegative="Left" DisplayMoney="Left" ErrorTooltipEnabled="True"
mask="99/99/9999" MaskType="Date" MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError"
TargetControlID="TextBox5" />
<asp:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
ControlExtender="MaskedEditExtender2" ControlToValidate="TextBox5"
Display="Dynamic" EmptyValueBlurredText="*" ValidationExpression="^([0]?[0-9]|[1][0-2])[.\/-]([0]?[1-9]|[1|2][0-9]|[3][0|1])[.\/-]([0-9]{4}|[0-9]{2})$"
InvalidValueMessage="Date is invalid" ValidationGroup="MKE1" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy"
PopupButtonID="ImgBntCalc"
TargetControlID="TextBox5" />
CHECK HERE DATE VALIDATION

MaskedEditValidator not working on client side

I am trying to enforce 15-minute granularity for time information entered by the user. So, for example, 12:15 PM and 3:45 am and 9:30 A.M. are all acceptable, but 2:35 PM would not be allowed. Server-side validation works, but it would be nice if the user was told their input was invalid when the text box loses focus, before they click the submit button. Here is the code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Always">
<ContentTemplate>
<asp:TextBox ID="txtStartTime" runat="server" AutoPostBack="True" CausesValidation="True"/>
<Ajax:MaskedEditExtender ID="txtStartTime_MaskedEditExtender" runat="server"
TargetControlID="txtStartTime" MaskType="Time" AcceptAMPM="True"
Mask="99:99">
</Ajax:MaskedEditExtender>
<asp:RequiredFieldValidator runat="server" ID="StartTimeRequired"
ValidationGroup="EventAddEditControls" ControlToValidate="txtStartTime"
EnableClientScript="True" SetFocusOnError="True">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Invalid time format." ControlToValidate="txtStartTime"
ValidationGroup="EventAddEditControls" SetFocusOnError="True"
EnableClientScript="True" Text="Invalid time format."
ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$" />
<Ajax:MaskedEditValidator ID="MaskedEditValidator1" ControlToValidate="txtStartTime"
ControlExtender="txtStartTime_MaskedEditExtender" IsValidEmpty="False"
ValidationGroup="EventAddEditControls"
ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$"
EnableClientScript="True" SetFocusOnError="True" Text="Time format is invalid."
runat="server"></Ajax:MaskedEditValidator>
</ContentTemplate>
</asp:UpdatePanel>
How can I get the MaskedEditExtender to enforce the 15-minute granularity constraint on the client side also (assuming that this is possible)?

This seems overly simple, but it seems to work.
The first thing I did was to comment out the RegularExpressionValidator - you don't really need both this and the MaskedEditValidator. To prove the point, apply the fix below but don't comment out the RegularExpressionValidator. Upon a failed validation you will see both errors.
The last thing was to replace the Text property of the MaskedEditValidator with the InvalidValueMessage property:
<Ajax:MaskedEditValidator ID="MaskedEditValidator1" ControlToValidate="txtStartTime"
ControlExtender="txtStartTime_MaskedEditExtender" IsValidEmpty="False"
ValidationGroup="EventAddEditControls"
ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$"
EnableClientScript="True" SetFocusOnError="True"
InvalidValueMessage="Time format is invalid." runat="server">
</Ajax:MaskedEditValidator>
This example gave me the hint regarding the correct property to use.
Doing both of these things resulted in the validation occurring when tabbing out of the control. This also indicates that the MaskedEditValidator was validating all along.

Making an email label a hyperlink

I was wondering if it is possible to make a label a hyperlink? Below is the code for a column I have set up and I want to make "lblEmail" clickable so that the email opens up and with that email address in it. The idea is that as various users log in to the site, their unique info will appear in the column. Is it as simple as wrapping the label control in an anchor tag? If so, I must be missing something because I tried that. Since I am new, it is likely I missed something!
Thanks in advance!
<p>
<asp:Label ID="lblName" runat="server" Text=""></asp:Label> <br />
<asp:Label ID="lblPhoneNo" runat="server" Text=""></asp:Label> <br />
<asp:Label ID="lblAddress" runat="server" Text=""></asp:Label> <br />
<asp:Label ID="lblCity" runat="server" Text=""></asp:Label>, <asp:Label ID="lblState" runat="server" Text="Label"></asp:Label> <asp:Label ID="lblZipCode" runat="server" Text="Label"></asp:Label> <br />
<asp:Label ID="lblEmail" runat="server" Text=""></asp:Label> <br />
</p>

Instead of using a label, you could make use of an hyperlink control.
The usage is as follows:
<asp:HyperLink id="hyperlink1"
ImageUrl="images/pict.jpg"
NavigateUrl="http://www.microsoft.com"
Text="Microsoft Official Site"
Target="_new"
runat="server"/>

Why not just use a hyperlink server control?
<asp:Hyperlink runat="server" id="lnk1">Your Text Here</asp:Hyperlink>
If you need additional formatting, you can wrap it in other another tag (or insert any legal HTML tag within the hyperlink).

Instead of using a label like hyperlink way, you should better use directly a hyperlink. Try the following :
<asp:Hyperlink runat="server" id="email" NavigateUrl="your_desired_address">
EmailLabelContent here
</asp:Hyperlink>
Thanks.

Binding a Java Date Picker to a textbox in formview ASP.NET C#

I'm having some problem binding the value of a date picker to a textbox in formview asp.net. I've tried to a put a date picker in ASP.NET and JavaScript which calls on a class file in calendar.css so far it can display the date but if I tried to insert it to a record it always return null. So how can I bind it so it can add the date value to the record?
Help would be much appreciated.
Thanks in advance ;)
Here's a sample of my code. I want to bind the 'input text' to the 'dateborrowedTextBox'
<InsertItemTemplate>
Book Title:
<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="booktitleDataSource" DataTextField="booktitle"
DataValueField="bookid" SelectedValue='<%# Bind("bookid", "{0}") %>'>
</asp:DropDownList>
<asp:SqlDataSource ID="booktitleDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:LibrarySystemConnectionString %>"
SelectCommand="SELECT [bookid], [booktitle] FROM [TblBooks]">
</asp:SqlDataSource>
<br />
Employee PIN:
<asp:TextBox ID="employeeidTextBox" runat="server"
Text='<%# Bind("employeeid") %>' />
<br />
Department:
<asp:TextBox ID="departmentTextBox" runat="server"
Text='<%# Bind("department") %>' />
<br />
Date borrowed:
<%--<asp:TextBox ID="dateborrowedTextBox" runat="server"
Text='<%# Bind("dateborrowed") %>' />--%>
<input type="text" name="dateborrowedTextBox" readonly="readonly" id="dateborrowedTextBox">
<a href="#" onclick="cdp1.showCalendar(this, 'dateborrowedTextBox'); return false;">Date Picker
</a>
<br />
<asp:Button ID="InsertButton" runat="server" CausesValidation="True"
CommandName="Insert" Text="Insert" />
<asp:Button ID="InsertCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel" />
</InsertItemTemplate>

The client-side IDs of the ASP.NET controls are not going to be translated as cleanly as you are hoping.
You need to do one of two things, both of which can be found here.
Date Picker
Or, you could add a Link control and set the actions that way (the link I gave you does it with an image control). It's up to you.

Just found my answer. ASP.NET cant read Javascript normally so CT100 and some dollar sign will do the trick ;)
Date Picker