CODEDIGEST
Home » Articles
Search
 

Technologies
 

Sponsored links
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Javascript Tips for ASP.Net

By Satheesh babu
Posted On Jul 19,2008
Article Rating:
Be first to rate
this article.
No of Comments: 6
Category: Javascript/ASP.Net
Print this article.

Javascript tips for ASP.Net

 

Introduction

We can use Javascript whenever we need to do some clientside operations in asp.net. There are so many Javascript operations which we repeatedly use in our applications. This article will list some of the repeated Javascript utilities, which we can use in our asp.net application.

Moving forward this article will discuss about,

Ø       MaxLength in ASP:Textbox Control.

Ø       Passing Date from Calendar Pop-Up to Parent Window.

Ø       Clear File Upload Control.

Ø       Restricting the user copying the Page Text.

 

MaxLength in ASP:TextBox Control

To restrict the length of a textbox control we can set the maximum length with a property called MaxLength. But, when we use the ASP.Net TextBox control as a multiline TextBox by setting TextMode property as MultiLine, the MaxLength property will not work. It is because the multiline textbox will be rendered as <TextArea> which does not support maximum length property (MaxLength). 

 

The below JavaScript function can be used to restrict the user from entering more than restricted length.

function limitCharsLength(Object, MaxLen)

{

if(Object.value.length > (MaxLen-1))

 {

    return false;  

 }

}

<asp:TextBox ID="TextBox2" runat="server" onkeypress="javascript: return limitCharsLengthDefault(this,10);" Rows="10" TextMode="MultiLine"></asp:TextBox>

 

Drawback of the above method

The above function will restrict the user to type more than 10 characters in the textbox but it does not validate the maximum length when the user copy pastes the content from elsewhere into the text box. So, the above function can be rewritten as,

 

function limitCharsLength(Object, MaxLen)

{

if(Object.value.length > MaxLen-1)

{

Object.value= Object.value.substring(0,MaxLen);

}

}

<asp:TextBox runat="server" ID="txtComments" onkeypress="javascript: return limitCharsLength(this,300);"  onblur="javascript:return limitCharsLength(this, 300)" onchange="javascript : return limitCharsLength(this, 300)" TextMode="MultiLine" Rows="10"></asp:TextBox>

 

This function will not allow a user to type or copy paste contents with length greater than the specified length.

 

Passing Date from Calendar Pop-Up to Parent Window

This section will help us building a simple DatePicker control using Calendar control and Javascript. Create two aspx pages, Default.aspx and Calendar.aspx. Calendar.aspx will contain a Calendar control and it should be opened as a popup window. When the user selects a date in the Calendar popup it will populate the date selected into a textbox in the Default.aspx page.

 

Default.aspx

1) Drag a TextBox and name it as ‘txtDate’.

2) Drag an Html Button and change the text as ‘Date’.

 

Write a JavaScript function to open the popup that is containing the Calender Control.

 

function PopupPicker(ctl)

{

var PopupWindow=null;

PopupWindow=window.open('Calender.aspx?ctl='+ctl,'','width=250,height=250’);

PopupWindow.focus();

}

 

Pass the textbox control id to the popup windows in a QueryString (ctl), so that the popup window can populate the textbox control with the date selected in the Calendar control.

 

<input id="Button2" type="button" value="Click" onclick="PopupPicker('txtDate');"/>

 

Calender.aspx

1) Drag a Calendar Control to the webform.

2) Get the TextBox Control Name which is sent in query string.

3) Create a JavaScript function called “SetDate” which accepts 2 parameters, dateValue and ctl. dateValue is the date selected by the user in the calendar popup and ctl is the parent page control id where we need to populate the date selected.

(The code is self explanatory).

function SetDate(dateValue,ctl)

{

thisForm = window.opener.document.forms[0].elements[ctl].value= dateValue;

self.close();

}

 

4) In clnDatePicker_DayRender Event, write the following code to call a javascript function ‘SetDate’.

 

HyperLink hpl = new HyperLink();

hpl.Text = ((LiteralControl)e.Cell.Controls[0]).Text;

hpl.NavigateUrl = "javascript:SetDate('" + e.Day.Date.ToShortDateString() + "','"+ctrl+"');";

e.Cell.Controls.Clear();

e.Cell.Controls.Add(hpl);

 

By default, the days in calendar control is rendered as links and generate a postback when it is clicked. Instead of postback, we will call our custom SetDate() JavaScript function by changing the cell of the Calendar control to Hyperlink control and attaching the SetDate() JavaScript function to the hyperlink in clnDatePicker_DayRender event.

 


Clear File Upload Control

The following javascript function can be used to clear a FileUpload control in ASP.Net 2.0.

  <script language="javascript">

    function ClearFileUpload()

    {

    var fil = document.getElementById("FileUpload1");

   fil.select();

   n=fil.createTextRange();

   n.execCommand('delete');

   fil.focus();     

    }

    </script>

    <asp:FileUpload ID="FileUpload1" runat="server" />

    <asp:Button ID="Button1" runat="server" OnClientClick="ClearFileUpload()" Text="Button" />

 

Restricting the user copying the Page Text

We can restrict users copying the text in our page by using a simple Jscript code.

 

<script language="JavaScript">

document.onselectstart=new Function ("return false");

</script>

 

One another way of restricting the users block copying the text is by disabling the right click on the webpage.

The following script is taken from a Microsoft KB article Q286426 and it only works with IE.

 

<script language="JavaScript">

var message = "Sorry, that function is disabled.\n\n";

message += "This page is copyrighted, and ";

message += "all content is protected.";

function click(e) {

if (document.all) {

if (event.button == 2) {

alert(message);

return false;

}

}

if (document.layers) {

if (e.which == 3) {

alert(message);

return false;

}

}

}

if (document.layers) {

document.captureEvents(Event.MOUSEDOWN);

}

document.onmousedown = click;

 

Conclusion

Thus, we have seen some of the javascript functions which we can repeatedly use in our web applications. Even though we can do most of the things in server side it is a good approach that we can do certain things in clientside. We will continue this article with more and more new functions in coming days.

Happy Coding!!

Similar Articles
You can contribute to CodeDiget.Com:
Donate to CodeDigest.com
Article Feedback
Comments
rajeev
nice one
Very Informative
Clearing the textbox in the upload Control was useful
f
very nice
Jscript
It is very nice and informative. Thanking You
java script
I like these i have been trying to get some information on this. Kindly add and educate on java script.
Regarding ASP.NET and JavaScript
...you might want to have a look at this; http://ra-ajax.org/how-to-create-an-ajax-library-part-1-decisions.blog