Wednesday, March 27, 2013

javascript in ASP.NET

2:10 AM  BlessyAlexander  No comments

learn javascript in asp.net

Introduction


  • de facto standard for client-side Web development
  • Enable to build robust applications in combination with ASP.NET
  • Mainly used to compensate limitations of ASP.NET  in terms of usage of custom controls
  • JavaScript can allow you to create new things on your website that are both dynamic and interactive, allowing you to do things like find out some information about a user (like monitor resolution and browser), check that forms have been filled in correctly, rotate images, make random text, do calculations and many other things.
Inserting JavaScript into an ASP.NET Page



Steps:

  • Define the script block that contains the JavaScript function. 
  • Insert the script block programmatically:using the Page.RegisterStartupScript() or the Page.RegisterClientScriptBlock() method. 

Adding JavaScript to a Server Control

Illustrating with the help of a real world example. 

Button control in ASP.NET to generate the current time:
Button1.Value = DateTime.Now.ToString();

Note:ASP.NET page here gets the time from the server that generated the page. 

What if you wanted the button to show the time of the person viewing the page? The easiest way of accomplishing this task would be to do this using JavaScript on the client-side.

<%@ Page Language="C#" %>
<script runat="server">
    void Button1_Click(object sender, EventArgs e) 
    {
      Response.Write("Postback!");
   }
 </script>
<html>
<head> </head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
    <form runat="server">
        <p>
            <asp:Button id="Button1" onclick="Button1_Click" 
             runat="server" Font-Bold="True" Font-Names="Verdana"
             Font-Size="Larger"></asp:Button>
        </p>
    </form>
</body>
</html>


Button showing the current time: 









Performing a Simple Button-rollover

Hover mouse over a button
Useful for Web pages that have multiple buttons
Code:

<%@ Page Language="C#" %>
<script runat="server">    
    void ImageButton1_Click(object sender, ImageClickEventArgs e)    
   {
       Label1.Text = "Postback!";
    }
</script>

<html>
<head></head>
<body>
    <form runat="server">
        <p>
          <asp:ImageButton id="ImageButton1” onmouseover="this.src='button2.jpg‘ " 
             onclick="ImageButton1_Click“ onmouseout="this.src='button1.jpg‘ " 
             runat="server“ ImageUrl="button1.jpg"></asp:ImageButton>
        </p>
        <p>
            <asp:Label id="Label1" runat="server" />
        </p>
    </form>
</body>
</html>

Setting Control Focus

Seting focus on particular control
//to set focus on first textbox when there are multipile textboxes on a web page

<body onload="document.forms[0]['TextBox1'].focus();">

Changing the Control Focus Dynamically

Turn the <body> tag into a HTML server control
<body id="Body1" runat="server">

Placing  code constructs in ASP.NET server-side events.

Body1.Attributes["onload"] = “document.forms[0][‘TextBox2’].focus();";

Keeping JavaScript in a Separate File (.js)

It is highly recommended to keep javascript in a seperate file.
Code to include .js file in ASP.NET  page:

Page.RegisterClientScriptBlock("MyScript",
   "<script language=javascript src='MyJavaScriptFile.js'>");



Posted in: ,,

0 comments:

Post a Comment