ASP.NET: Client Side

-
ASP.Net client side coding has two aspects:
  • Client side scripts: that would run on the browser and in turn would speed up the execution of page. For example, client side data validation which can catch invalid data and warn the user accordingly without making a round trip to the server.
  • Client side source code: that the ASP.NET pages generate. For example, the HTML source code of an ASP.NET page contains a number of hidden fields and automatically injected blocks of JavaScript code, which keeps information like view state or does other jobs to make the page work.

Client Side Scripts:

All ASP.Net server controls allow calling client side code written using JavaScript or VBScript. Some ASP.Net server controls use client side scripting to provide responses to the users without posting back to the server, for example, the validation controls, which we will discuss in due time.
Apart from these scripts the Button control has a property OnClientClick, which allows executing client-side script, when the button is clicked.
The traditional and server HTML controls has the following events that can execute a script when they are raised:
EventDescription
onblur When the control loses focus
onfocusWhen the control receives focus
onclickWhen the control is clicked
onchangeWhen the value of the control changes
onkeydownWhen the user presses a key
onkeypressWhen the user presses an alphanumeric key
onkeyupWhen the user releases a key
onmouseoverWhen the user moves the mouse pointer over the control
onserverclickIt raises the ServerClick event of the control, when the control is clicked

Client Side Source Code

We have already discussed that, ASP.NET pages are generally written in two files:
  • The content file or the markup file ( .aspx)
  • The code-behind file
The content file contains the HTML or ASP.Net controls tags and literals to form the structure of the page and the code behind file contains the class definition. At run time, the content file is parsed and transformed into a page class.
This class along with the class definition in the code file and some other system generated code make the executable code (assembly) that processes all posted data and generates the response and sends it back to the client.
Consider the simple page:
<%@ Page Language="C#" AutoEventWireup="true" 
                       CodeBehind="Default.aspx.cs" 
                       Inherits="clientside._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
      <asp:Button ID="Button1" runat="server" 
        OnClick="Button1_Click" Text="Click" />
    </div>
    <hr />
    <h3><asp:Label ID="Msg" runat="server" Text=""></asp:Label>
    </h3>
    </form>
</body>
</html>
When this page is run on the browser, the View Source option shows the HTML page sent to the browser by the ASP.Net runtime:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
 Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
value="/wEPDwUKMTU5MTA2ODYwOWRk31NudGDgvhhA7joJum9Qn5RxU2M=" />
</div>
 
<div>
<input type="hidden" name="__EVENTVALIDATION" 
id="__EVENTVALIDATION" 
value="/wEWAwKpjZj0DALs0bLrBgKM54rGBhHsyM61rraxE+KnBTCS8cd1QDJ/"/>
</div>

<div>
<input name="TextBox1" type="text" id="TextBox1" />  
<input type="submit" name="Button1" value="Click" id="Button1" />
</div>

<hr />
<h3><span id="Msg"></span></h3>
</form>
</body>
</html>
Looking closely at the code would reveal that first two <div> tags contain the hidden fields which store the view state and validation information.

Comments

Post a Comment

Popular posts from this blog

Auto Scroll in Common Controls

-
This example shows, how to programatically autoscroll WinForm controls TextBox, ListBox, ListView, TreeView and DataGridView. Autoscroll to the end of box or view is useful. For example, in situations when you use one of these components as the output log window. Usually you add the items to the box or view and you want to be sure that the recently added item is visible without the necessary to do it manually. Though it is not difficult to solve this problem, .NET doesn't provide any unified way how to do it. TextBox autoscroll Code: textBox1.SelectionStart = textBox1.Text.Length; textBox1.ScrollToCaret(); ListBox autoscroll Code: listBox1.SelectedIndex = listBox1.Items.Count - 1; listBox1.SelectedIndex = -1; ListView autoscroll Code: listView1.EnsureVisible(listView1.Items.Count - 1); TreeView autoscroll Code: treeView1.Nodes[treeView1.Nodes.Count - 1].EnsureVisible(); DataGridView autoscroll Code: dataGridView1.FirstDisplayedCell = ...
Read more

Convert typed library (.tlb) to .net assembly?

-
Sometimes we have to use the legacy code(C, C++) in .Net projects which is provided by third party vendors. Most of the times these guys will provide, equivalent .net framework typed library (.tlb) of that legacy code. Then, how to refer those in our .net projects and make use of functionality provided by it?   Follow the below steps, Keep ".tlb" file which is nothing but legacy typed library Open windows command prompt Go to directory, " C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin " or     "C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin". It depends on which version of visual studio you had. Enter the following and execute, TlbImp.exe "E\MyLibrary.tlb" . Here, replace "E:\MyLibrary.tlb" with path to your tlb file. It will import the .net framework type library to assembly.i.e, .dll and it can be found at path "C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin" with name ...
Read more

Disable close button on form - C#

-
In one of my projects, I had to implement a form with Close[X] button Hide, so that the user cannot leave the form until it finishes the data processing. From the form designer window in VS.Net 2005, it is possible to hide the Minimize box and Maximize box. But there is no property called Close or CloseBox. Then I had tried with by setting form property ControlBox = false . With this i am able to achieve hiding the Close/Minimize/Maximize buttons. But at the same time there is a side effect.i.e., Form icon(which is generally displayed on form title bar)  also hidden.  So after little bit investigation came up with the following hack to get,  i)  disable the close button  ii) displaying the form icon To achieve this, we have to override CreateParams property of Form base class as follows, Code: private const int CP_DISABLE_CLOSE_BUTTON = 0x200; protected override CreateParams CreateParams { get ...
Read more