Web Development Resources for Asp.net 2.0/3,5, Jquery, SQL Server Developers - By Brijendra Tiwari

State Management techniques in asp.net

2012-08-16T21:59:00.001+05:30

Web form pages are HTTP-Based, they are stateless, which means they don’t know whether the requests are all from the same client, and pages are destroyed and recreated with each round trip to the server, therefore information will be lost, therefore state management is really an issue in developing web applications

We could easily solve these problems in ASP with cookie, query string, application, session and so on. Now in ASP.NET, we still can use these functions, but they are richer and more powerful, so let’s dive into it.

Mainly there are two different ways to manage web page’s state: Client-side and Server-side.

1.Client-side state management :

There is no information maintained on the server between round trips. Information will be stored in the page or on the client’s computer.

A. Cookies.

A cookie is a small amount of data stored either in a text file on the client's file system or in-memory in the client browser session. Cookies are mainly used for tracking data settings. Let’s take an example: say we want to customize a welcome web page, when the user request the default web page, the application first to detect if the user has logined before, we can retrieve the user informatin from cookies:
[c#]
if (Request.Cookies[“username”]!=null)
lbMessage.text=”Dear “+Request.Cookies[“username”].Value+”, Welcome shopping here!”;
else
lbMessage.text=”Welcome shopping here!”;

If you want to store client’s information, you can use the following code:
[c#]
Response.Cookies[“username’].Value=username;

So next time when the user request the web page, you can easily recongnize the user again.

B. Hidden Field

A hidden field does not render visibly in the browser, but you can set its properties just as you can with a standard control. When a page is submitted to the server, the content of a hidden field is sent in the HTTP Form collection along with the values of other controls. A hidden field acts as a repository for any page-specific information that you would like to store directly in the page. Hidden field stores a single variable in its value property and must be explicitly added it to the page.
ASP.NET provides the HtmlInputHidden control that offers hidden field functionality.
[c#]
protected System.Web.UI.HtmlControls.HtmlInputHidden Hidden1;
//to assign a value to Hidden field
Hidden1.Value=”this is a test”;
//to retrieve a value
string str=Hidden1.Value;

Note: Keep in mind, in order to use hidden field, you have to use HTTP-Post method to post web page. Although its name is ‘Hidden’, its value is not hidden, you can see its value through ‘view source’ function.

C. View State

Each control on a Web Forms page, including the page itself, has a ViewState property, it is a built-in struture for automatic retention of page and control state, which means you don’t need to do anything about getting back the data of controls after posting page to the server.

Here, which is useful to us is the ViewState property, we can use it to save information between round trips to the server.
[c#]
//to save information
ViewState.Add(“shape”,”circle”);
//to retrieve information
string shapes=ViewState[“shape”];

Note: Unlike Hidden Field, the values in ViewState are invisible when ‘view source’, they are compressed and encoded.

D. Query Strings

Query strings provide a simple but limited way of maintaining some state information.You can easily pass information from one page to another, But most browsers and client devices impose a 255-character limit on the length of the URL. In addition, the query values are exposed to the Internet via the URL so in some cases security may be an issue.
A URL with query strings may look like this:

http://www.examples.com/list.aspx?categoryid=1&productid=101

When list.aspx is being requested, the category and product information can be obtained by using the following codes:
[c#]
string categoryid, productid;
categoryid=Request.Params[“categoryid”];
productid=Request.Params[“productid”];

Note: you can only use HTTP-Get method to post the web page, or you will never get the value from query strings.

2. Server-side state management:

Information will be stored on the server, it has higher security but it can use more web server resources.

A. Aplication object

The Application object provides a mechanism for storing data that is accessible to all code running within the Web application, The ideal data to insert into application state variables is data that is shared by multiple sessions and does not change often.. And just because it is visible to the entire application, you need to used Lock and UnLock pair to avoid having conflit value.

[c#]

Application.Lock();

Application[“mydata”]=”mydata”;

Application.UnLock();

B. Session object

Session object can be used for storing session-specific information that needs to be maintained between server round trips and between requests for pages. Session object is per-client basis, which means different clients generate different session object.The ideal data to store in session-state variables is short-lived, sensitive data that is specific to an individual session.

Each active ASP.NET session is identified and tracked using a 120-bit SessionID string containing URL-legal ASCII characters. SessionID values are generated using an algorithm that guarantees uniqueness so that sessions do not collide, and SessionID’s randomness makes it harder to guess the session ID of an existing session.
SessionIDs are communicated across client-server requests either by an HTTP cookie or a modified URL, depending on how you set the application's configuration settings. So how to set the session setting in application configuration? Ok, let’s go further to look at it.

Every web application must have a configuration file named web.config, it is a XML-Based file, there is a section name ‘sessionState’, the following is an example:

‘cookieless’ option can be ‘true’ or ‘false’. When it is ‘false’(default value), ASP.NET will use HTTP cookie to identify users. When it is ‘true’, ASP.NET will randomly generate a unique number and put it just right ahead of the requested file, this number is used to identify users, you can see it on the address bar of IE:

Ok, it is further enough, let is go back to session object.
[c#]
//to store information
Session[“myname”]=”Mike”;
//to retrieve information
myname=Session[“myname”];

C. Database

Database enables you to store large amount of information pertaining to state in your Web application. Sometimes users continually query the database by using the unique ID, you can save it in the database for use across multiple request for the pages in your site.

Performance guidelines for a asp.net Web application

2012-08-16T21:57:00.001+05:30

When you design and develop your web applications, you always must take into consideration the performance factor. By doing this, you will remove the cost of rewriting modules, modifying code, or redistributing applications. A good practice that must be kept in mind for writing quality code is to make frequent code reviews. For example, I often find a better implementation of a certain module after a code review. Also, you should test different ways of implementing your code to determine the performance impact over your application. Here are some rules that should be followed for writing high performing applications.

The rules

Store your content by using caching

As you know, ASP.NET allows you to cache entire pages, fragments of pages, or controls. You can also cache variable data by specifying the parameters that the data depends on. By using caching, you help the ASP.NET engine to return data for repeated requests for the same page much faster. There is one catch here: caching consumes server memory, so it's not recommended to be used when you need to get updated data on your page.

Avoid session state

Whether you store your data in in-process or on a state server or in a SQL database, session state requires memory, and it's also time consuming when you store or retrieve data from it. If you do not want to use session state, disable it on your web form using the <@%Page EnableSessionState="false"%> directive. In case you use session state only to retrieve data from it and not to update it, make the session state read only by using the <@%Page EnableSessionState ="ReadOnly"%> directive.

Avoid ViewState

ViewState allows you to keep the content of a control across trips to the server. This comes with a cost, a greater amount of data is sent from the server to the client end vice versa, so speed and network bandwidth can be affected. You can avoid this drawback by setting the EnableViewState property of your web controls to false, when you don't need them to keep their state across server trips.

Use low cost authentication

Authentication can also have an impact over the performance of your application. For example, passport authentication is slower than form-based authentication, which in turn is slower than Windows authentication.

Use the Server.Transfer() method for server-side page redirection

It is better to use the Server.Transfer() method for server-side ASPX page redirection in the same application than the Response.Redirect() method. This will reduce the extra roundtrip required by the second method (Response.Redirect()) to perform client-side redirection.

The number of web server controls

The use of web server controls increases the response time of your application because they need time to be processed on the server side before they are rendered on the client side. Therefore, take into consideration the usage of HTML elements where they are suited, for example, if you want to display static text.

Avoid frequent usage of boxing and unboxing

When a value type such as a structure is copied to a reference type such as a class, the compiler creates an object on the heap and copies the value of the value type from the stack to this newly created object on the heap. This process is called boxing, and requires more overhead than just a simple copy from a value type to value type. When you copy a reference type to a value type, the value of the object from the heap is copied to the value type from the stack. This process is called unboxing. You should take into consideration the overhead of these processes when you design your application.

Avoid using strings for complex string operations

The String type is immutable; this means that after a string is created, it can't be modified. When you modify a string, the CLR creates a new one based on your modifications and returns it. The old string remains in memory until the garbage collector cleans it. If your application needs to extensively modifying strings, then use the StringBuilder class. This class stores the string as an array of characters. The StringBuilder object is mutable, and does in-place modifications of strings.

Use the AddRange() method with collections

There is a large number of collection classes that expose the AddRange() method, which you can use to add an array of items to the collection instead of repeatedly calling the Add() method inside a loop.

Avoid throwing exceptions

Throwing exceptions is a costly operation. You should be very careful when you throw exceptions from your application. Exceptions should be thrown only to signify an exceptional error case. You should never throw exceptions just for managing your application flow.

Avoid using unmanaged code

Calls to unmanaged code are a costly marshaling operation. Try to reduce the number of calls between managed and unmanaged code. Consider doing more work in each call rather than making frequent calls to do small tasks.

Avoid making frequent calls across processes

Working with distributed applications involves additional overhead negotiating network and application level protocols. In this case, network speed can also be a bottleneck. Try to do as much work as possible in fewer calls over the network.

Make use of optimized managed providers

As you know, OLEDB is a generic provider which offers access to data exposed by any OLEDB provider. Managed providers are specifically optimized for some databases. For example, when you use OLEDB to connect to a SQL Server database, OLEDB first passes your request to OLE DB COM components, which in turn translate the request to the SQL Native Tabular Data Stream (TDS) format. If you use SqlClient, it will directly construct the TDS packets and communicate with SQL Server. The removal of extra translation will significantly improve the performance of your application.

Use Stored Procedure and not SQL statements

When you are working with an RDBMS as SQL Server, you should use Stored Procedures rather than SQL statements given as a text command, because Stored Procedures are highly optimized for server side data access.

Use a DataReader instead of a DataSet for forward-only sequential access

If you are reading a table sequentially, you should use the DataReader rather than the DataSet. ADataReader object creates a read only stream of data that will increase your application performance because only one row is in memory at a time.

Use connection pooling

The slowest operation performed in a database application scenario is establishing a connection with a database. The SQL Server .NET Data Provider offers connection pooling to improve performance when connecting to a SQL Server database. In connection pooling, old connection information is stored in a connection pool so it can be reused for the next connection. If you are using dynamic connection strings, you will disallow the connection pooling mechanism because connections are only pooled on the exact connection string.

Use transactions

Distributed transactions might add performance overhead to your application, so you should use them only when required and keep their life as short as possible.

Display hierarchial data using TreeView :: Parent-Child Relationship

2011-09-13T20:16:00.000+05:30

Treeview is a control available in ASP.NET to show hierarchial data. Using features of treeview and power of dataset, we can design a tree wrt datatable with parent-child relationship. This post explains the implementation of hierarchial data into treeview.
This figure illustrate the outcome and datatable strucuture to which tree should be mapped.

C# : Server Side Code

    public void bindDataToTree(DataSet __dsData)
    {
        treeViewCategories.Nodes.Clear();
        __dsData.Relations.Add("NodeRelation", __dsData.Tables[0].Columns["Category_Id"], __dsData.Tables[0].Columns["Parent_Id"]);
        foreach (DataRow dr in __dsData.Tables[0].Rows)
        {
            if (dr.IsNull("Parent_Id"))
            {
                TreeNode newNode = CreateNode(dr["Category_Name"].ToString(), dr["Category_Id"].ToString(), true);
                treeViewCategories.Nodes.Add(newNode);
                PopulateSubTree(dr, newNode);
            }
        }
    }

    private TreeNode CreateNode(string text, string value, bool expanded)
    {
        TreeNode node = new TreeNode();
        node.Text = text;
        node.Value = value;
        node.Expanded = expanded;
        return node;
    }

    private void PopulateSubTree(DataRow dbRow, TreeNode node)
    {
        foreach (DataRow childRow in dbRow.GetChildRows("NodeRelation"))
        {
            TreeNode childNode = CreateNode(childRow["Category_Name"].ToString(), childRow["Category_Id"].ToString(), true);
            node.ChildNodes.Add(childNode);
            PopulateSubTree(childRow, childNode);
        }
    }

CSS Style

    body{ font:normal 10pt arial;}
    a{ color:#006699;}
    .tvHoverStyle{ text-decoration:underline;}
    .tvRootNode{ font-weight:bold; color:#000; font-size:1.1em;}
    .tvParentNode{ font-weight:bold;}

ASPX page

Autocomplete TextBox with selection :: Facebook Clone

2011-09-13T18:13:00.001+05:30

One day i was actually thinking about implementation of auto complete text box in facebook. Then i received a email request from one my friend about same asking me how to implement Facebook like expanding textbox with Jquery. Then i started working and sample post for implementation logic.

C# : Server Side Code

    [WebMethod]
    public static string getTableData(string Keyword)
    {
        StringBuilder sb = new StringBuilder();
        if (!string.IsNullOrEmpty(Keyword))
        {
            DataTable dt = createDataSource();
            DataView dv = dt.DefaultView;
            dv.RowFilter = string.Format("{0} like '%{1}%'", "name", Keyword);
            dv.Sort = "name asc";
            foreach (DataRowView dr in dv)
            {
                sb.Append("");
                sb.Append("");
                sb.Append(string.Format("", dr["image"].ToString()));
                sb.Append(string.Format("", dr["name"].ToString()));
                sb.Append("");
                sb.Append(string.Format("", dr["location"].ToString()));
                sb.Append("
 {0}
 {0}

");
            }
        }
        return sb.ToString();
    }

CSS Style

        body{ font:normal 8pt tahoma;}
        #wrap{ width:900px; margin:40px auto 0 auto;}
        #loading
        {
            background:url('loading.gif') no-repeat left top;
            width:18px; height:16px; position:absolute; display:none;
        }
        #autoCompleteBox{border:1px solid #6b86b5; width:300px;}
        #autoCompleteBox span
        { 
            float:left; display:block; 
            background-color:#e7e7f7; 
            border:1px solid #9caece; 
            padding:2px; 
            margin:3px;
        }
        #autoCompleteBox input[type="text"]
        { 
            border:none; width:100px;
            padding:5px; 
            font:normal 8pt tahoma,arial;
        }
        #autoCompleteList
        { 
            width:300px; display:none; 
            padding:3px; position:absolute; top:65px; 
            border:1px solid #313031; 
            border-bottom:2px solid #293c6b; 
            background-color:#fff;
        }
        #autoCompleteList a{ display:block; margin-bottom:5px; text-decoration:none;}
        #autoCompleteList a:hover{ background-color:#6b86b5;}  
        #autoCompleteList a:hover table td{ color:#fff;}
        #autoCompleteList a:hover table td b{ color:#fff;}
        #autoCompleteList table
        {
            font-size:8.5pt; 
            border-collapse:collapse;
        }
        #autoCompleteList td
        { 
            vertical-align:top; 
            line-height:8pt; color:#666;
        }
        #autoCompleteList td b{ color:#000;}
        #autoCompleteList img{ border:none;}

ASPX page

JQuery Code

$(document).ready(function(e) 
        {
            $('#autoCompleteBox').bind("click",function(clickEvt){
                $(this).find("input").focus();
            });
            /*set loader position*/
            var boxOffsets = $('#autoCompleteBox').offset();
            var boxWidth=$('#autoCompleteBox').width();
            $('#loading').css("left", boxOffsets.left + boxWidth-18);
            $('#loading').css("top", boxOffsets.top + 5);
            $("#autoCompleteBox").find("input").bind("keyup", function(evt) {
                $(this).attr("id","controlId"+Math.random()); // To stop autocomplete of browser, chnage text box id randomly
                var keyword = $(this).val();
                keyword = keyword.trim();
                if (keyword != " ") {
                    $('#autoCompleteBox').ajaxStart(function() {
                        $('#loading').show();
                    });

                    $.ajax({
                        type: "POST",
                        url: window.location.pathname+ "/getTableData",
                        dataType: "json",
                        data: "{'Keyword':'" + keyword + "'}",
                        contentType: "application/json; charset=utf-8",
                        success: function(msg) {
                            $("#autoCompleteList").html(msg.d);
                            var listOffsets=$("#autoCompleteBox").offset();
                            var listHeight=$("#autoCompleteBox").height();
                            $("#autoCompleteList").css("top",listOffsets.top+listHeight+2);
                            /*remove duplicate value from list, which is already selected*/
                            $.each($("#autoCompleteBox").find("span"), function(index, value) {
                                var _currentValue = $(this).text().replace($(this).find('a').text(),'');
                                $.each($('#autoCompleteList table').find("td:eq(1)"), function(anchorIndex) {
                                    if ($(this).text().indexOf(_currentValue) >= 0) {
                                        $('#autoCompleteList a').eq(anchorIndex).remove();
                                    }
                                });
                            });

                            $('#loading').hide();
                            if ($("#autoCompleteList").html() != "") {
                                $("#autoCompleteList").show();
                            }
                            else { $("#autoCompleteList").hide(); }
                            
                            /*Bind click on autocomplete list items*/
                            $("#autoCompleteList").find("a").bind("click", function(aclick) {
                                var _uname = $(this).find("td:eq(1)").text();
                                _uname = "" + _uname + "X";
                                $('#autoCompleteBox').prepend(_uname);
                                $("#autoCompleteList").hide();
                                $("#autoCompleteBox").find("input").val("");
                                $("#autoCompleteBox").find("input").focus();
                                $()
                            });
                        },
                        error: function(eMSG) {
                            alert(eMSG.status);
                        }
                    });
                }
            });
        });
        function closeThis(spanObj)
        {
           $(spanObj).parent().remove();
           $("#autoCompleteBox").find("input").focus();
        }

Asp.net : Manage web application help in directory structure

2011-06-06T21:41:00.007+05:30

In this topic, I will explain how application help can be managed as file system structure. Web application file system is easy to manage and systematic.
In this solution, Application help files can be managed under their respective category and subcategories which will be folders of the file system. This solution will read all directories as category and file as help topic description.

HelpFile Explorer ASPX File




Help Categories
HelpFile Explorer ASPX File

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            'Add a root node
            Dim rootnode As TreeNode = New TreeNode("Help and Support", "Topics")
            rootnode.SelectAction = TreeNodeSelectAction.None
            rootnode.Selected = True
            TreeView1.Nodes.Add(rootnode)
            TreeView1_SelectedNodeChanged(sender, e)
            If Request.QueryString("path") IsNot Nothing Then
                Dim directoryPath() As String = Request.QueryString("path").Split(",")
                Dim dir As String = ""
                Dim valuePath As String = "Topics/"
                For Each dir In directoryPath
                    valuePath += dir
                    If TreeView1.FindNode(valuePath) IsNot Nothing Then
                        TreeView1.FindNode(valuePath).Selected = True
                        TreeView1_SelectedNodeChanged(sender, e)
                        valuePath += "/"
                    End If
                Next
            End If
        End If
    End Sub

    Protected Sub TreeView1_SelectedNodeChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TreeView1.SelectedNodeChanged
        'help files root folder
        Dim appHelpRoot As String = Server.MapPath("~") + "/AppHelp/"
        Dim currentDir As String = appHelpRoot + TreeView1.SelectedNode.ValuePath

        TreeView1.SelectedNode.ChildNodes.Clear()

        Dim dirCollections As String() = Directory.GetDirectories(currentDir)
        If dirCollections.Length > 0 Then
            Dim dir As String = ""
            For Each dir In dirCollections
                Dim curDir As DirectoryInfo = New DirectoryInfo(dir)
                Dim childNode As TreeNode = New TreeNode(curDir.Name, curDir.Name)
                TreeView1.SelectedNode.ChildNodes.Add(childNode)
            Next
        Else
            Dim filePath As String = currentDir + "/help.txt"
            If File.Exists(filePath) Then
                Dim newFile As StreamReader = File.OpenText(filePath)
                showHelpText.Text = newFile.ReadToEnd
                newFile.Close()
            End If
        End If
    End Sub

asp.net : Implement theme for web application using global.asax file

2011-06-06T00:36:00.008+05:30

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.
Themes are made up of majorly by cascading style sheets (CSS), images, and other resources like skins. . Themes are defined in special directories in your Web site or on your Web server App_Themes

How to implement

Theme can only be applied on page while Pre_Init is under execution. One way is to keep the code to implement theme in all the pages or add into global.asax file.
Global.asax File

void Application_PreRequestHandlerExecute(object src, EventArgs e)
   {
       Page _currentPageInRequest = this.Context.Handler as Page;
       if (_currentPageInRequest != null)
       {
           _currentPageInRequest.PreInit += new EventHandler(page_PreInit);
       }
   }

void page_PreInit(object sender, EventArgs e)
   {
       Object _curSessionKey=HttpContext.Current.Session["CurrentTheme"];
       if (_curSessionKey != null && (!string.IsNullOrEmpty(_curSessionKey.ToString())))
       {
           Page _currentPageInRequest = this.Context.Handler as Page;
           _currentPageInRequest.Theme = _curSessionKey.ToString();
       }
       else
       {
           Page _currentPageInRequest = this.Context.Handler as Page;
           _currentPageInRequest.Theme = "Default";
       }
   }

In above implementation, i have used Session variable to store current applied theme. You can use any mode of saving/reading of current theme. For example, database can be used to store current theme.

JavaScript : Get querystring key's value for current page url.

2011-06-06T00:19:00.008+05:30

Querystring is very most used technique to pass values across pages to manage web application state. All server-side programming languages like c#, vb.net, java etc have built-in functions to retrieve querystring values of a URL. In web browsers you can access the querystring with client-side JavaScript, but there is no standard way to parse out the name/value pairs
So here is a function to return a parameter you specify. The following javascript code snippet facilitates Javascript's built in regular expressions to retrieve value of the key. Optionally, you can specify a default value to return when key does not exist.
JavaScript Function

function getQuerystring(urlkey, default_)
  {
     if (default_==null) default_="en";
        urlkey = urlkey.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regex = new RegExp("[\\?&]"+urlkey+"=([^&#]*)");
        var qs = regex.exec(window.location.href);
        if(qs == null)
           return default_;
        else
           return qs[1];
  }

How to use this function


var langauge_value = getQuerystring('lang');

This function will help to retrieve current value for lang key in querystring. Call to this function will return 'en'.

Custom Validator for FileUpload in asp.net 2.0

2009-04-10T21:03:00.020+05:30

Validation Web controls are ASP.NET 2.0 Web controls designed to validate form fields control inputs with some rules apply to it. Previously it used to achieve with the javascript/vbscripts functions on user controls like text box and drop down list. it was bit annoying and time consuming and also code grows to longer line which is difficult to manage.

asp.net 2.0 introduces new validation controls to resolve these issues. One of which I am discussing here,

CustomValidator- Checks the form field's value against custom validation logic that you, the developer, provide with the help of client script written in javascript.

javascript function


       function check_ClientValidate(source, args)
           {
             var _pageStatus = true;
             if(args.Value != "")
               { _pageStatus = true;}
             else
               { 
                 con = false;
                 document.getElementById("CustomValidator1").innerHTML = "Please Select file!";
               }
             if( _pageStatus == true)
               {
                 var file1 = args.Value.substring(args.Value.length - 3, args.Value.length); //doc
                 if( file1 == "doc")
                 { 
                    _pageStatus = true;
                 }
                 else
                 { 
                    _pageStatus = false;
                    document.getElementById("CustomValidator1").innerHTML = "You can upload doc file only.";
                  }
               }
             if( _pageStatus == true)
               { args.IsValid = true;}
             else
               { args.IsValid = false;}
           }

You should also provide server validation code as well to perform both ways. this is to minimize error on server side in case client side validation get failed. [ techincal reasons..] Implement same logic here in server validation function to avoid runtime error.

asp.net page controls .aspx.vb file


Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
    Dim _pageStatus As Boolean = True
    If args.Value <> ("") Then
       _pageStatus = True
    Else
       _pageStatus = False
       CustomValidator1.Text = "Please select File!"
    End If
    If _pageStatus Then
       Dim file1 As String = args.Value.Substring(args.Value.Length - 3, args.Value.Length)
       If file1.Equals("doc") Then
         _pageStatus = True
       Else
         _pageStatus = False
         CustomValidator1.Text = "You can upload file such as .doc"
       End If
    End If
    If _pageStatus Then
        args.IsValid = True
    Else
        args.IsValid = False
    End If
End Sub

this will solve your problem of file upload with limited extension.

	{0}
	{0}