Mohyuddin's Blog

Dynamically Templated GridView with Edit, Delete and Insert Options ( VB.NET Version)

2009-08-15T11:46:00.001-07:00

Quite a while back I wrote an article titled “Dynamically Templated GridView with Edit, Delete and Insert Options” on aspalliance.com in which I provided complete solution to build a GridView with template fields generated at run time with in-place Insert, Delete and Edit operations. I also gave complete description to implement ITemplate interface effectively. Before writing this article I googled a lot for such a solution for my university project but I could not find any, then I had to go for my own form scratch. When I came up with this and used it in my project successfully I thought to share it with complete description.

During this period where I received lot of appreciation mails for providing this ready to use piece of functionality, I also got many mails for its VB.NET version but unfortunately I could not find time to do so. Now I have converted it into VB.NET and have also done small refactoring for ADO.NET logic. You can download both versions from following links.

Download VB.NET Version

Download C-Sharp Version

Persisting jsTree changes in Database

2009-08-07T13:20:00.001-07:00

In my last posts I demonstrated how you can bind jsTree with database in ASP.NET MVC. In this post I'll demonstrate following actions on jsTree nodes and save the changes in database in ASP.NET MVC.

Moving a node/Changing order (changing employee’s manager)
Adding a new node (adding new employee under a manager)
Renaming a node (Changing name of an employee)
Deleting a node (Removing an employee from the hierarchy)

Please note that jsTree has “callback” option attribute to define the callbacks required to achieve these tasks. It exposes several callbacks which can be used as per needed. Here are the different callbacks we’ll have to implement.

$("#empgraph").tree({
        data: {
            type: "json",
            url: "/Home/GetHiearchicalNodesInfo",
            async: true
        },
        rules: {
            //ommitted for brevity
        },
        callback: {  //skeleton of all required callbacks
             onmove: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { },
             oncreate: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { },
             ondelete: function(NODE, TREE_OBJ, RB) { }
             onrename: function(NODE, LANG, TREE_OBJ, RB) { }
        }
 });

Before implementing these callbacks we should know what information we require to be sent to server to perform these actions. Lets have a look on these actions one by one.

Moving Nodes/Changing Order of Nodes

To save the changed hiearchy we need node’s id and its parent’s id. onmove call back has several arguments , three of which NODE , REF_NODE and TYPE are important to note, NODE has the reference of the moving node, REF_NODE is the one it is moving toward. When TYPE will be “inside”, REF_NODE will be its parent node. Lets implement this.

onmove: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
    var parent_id = 0;

    if (TYPE === "inside") {
        parent_id = $(REF_NODE).attr('id');
    }
       saveHiearchy(NODE.id, parent_id);
    }

After getting child (node) id and parent, simply call a method that could make a POSt request on sever to save this changed information in database.

function saveHiearchy(node_id, parent_id) {
    var actionUrl = "/Home/SaveHiearchy?childId=" + node_id + "&parentId=" + parent_id;
    $.ajax(
        {
            type: "POST",
            url: actionUrl,
            data: null,
            dataType: "json",
            success: function(data) {
            },
            error: function(req, status, error) {
            }
        });
}

Adding a new node

To create a node we need node’s parent’s id and the name of the node. oncreate callback also has the same arguments as onmove had, in this case hwe again require NODE , REF_NODE and TYPE to create a new node as the following code shows.

oncreate: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
    var parent_id = 0;

    if (TYPE === "inside") {
        parent_id = $(REF_NODE).attr('id');
    }
    createNode(NODE, parent_id);
}

It is interesting to note when you when you’ll create a node, oncreate will fire and a node with name “New Folder” will be created in database. When you will enter your required name , the onrename will be called to update the previously saved name.. But to achieve this we have to send the newly created node’s id from server back to client and on onsuccess of oncreate callback we have to save this id in some global variable to be used in rename callback; createdNodeId is being assigned the id. Please note createNode node method gets the name associated with the node and passes the information to server.

function createNode(NODE, parentId) {
    var folderName = $(NODE.innerHTML).filter("a")[0].innerText;
    var actionUrl = "/Home/CreateFolder?folderName=" + folderName + "&parentId=" + parentId;
    $.ajax(
        {
            type: "POST",
            url: actionUrl,
            data: null,
            dataType: "json",
            success: function(data) {
                createdNodeId = data.nodeId;
            },
            error: function(req, status, error) {
            }
        });
}

Renaming a node

Renaming a node requires its id and the changed name. This information can be available as shown below.

onrename: function(NODE, LANG, TREE_OBJ, RB) {
    renameNode(NODE.id, $(NODE.innerHTML).filter("a")[0].innerText);
  }

Since this method also gets called when a new node is created; it is the case when node id is empty so use the createdNodeId otherwise it will have node id.

function renameNode(nodeId, nodeNewTitle) {
    if ($.trim(nodeId) == "")
    nodeId = createdNodeId;

    var actionUrl = "/Home/RenameNode?nodeId=" + nodeId + "&nodeNewTitle=" + nodeNewTitle;
    $.ajax(
        {
            type: "POST",
            url: actionUrl,
            data: null,
            dataType: "json",
            success: function(data) {
            },
            error: function(req, status, error) {
            }
        });
}

Deleting a node

Deleting a node is the simplest case, in this case we just need id of the node to be deleted.

ondelete: function(NODE, TREE_OBJ, RB) {
            deleteSubNode(NODE.id);
        }

The related ajax routine

function deleteSubNode(nodeId) {
    var actionUrl = "/Home/DeleteSubNode?folderId=" + nodeId;
    $.ajax(
    {
        type: "POST",
        url: actionUrl,
        data: null,
        dataType: "json",
        success: function(data) {
        },
        error: function(req, status, error) {
        }
    });
}

Here is the complete jsTree code, with callbacks implemented.

$("#empgraph").tree({
            data: {
                type: "json",
                url: "/Home/GetHiearchicalNodesInfo",
                async: true
            },
            ui: { theme_name: "classic" },
            rules: {
                metadata: "mdata",
                use_inline: true,
                clickable: ["all"],
                deletable: ["all"],
                renameable: ["all"],
                creatable: ["all"],
                draggable: ["all"],
                // dragrules: ["child * child", "child inside root", "tree-drop inside root"],
                createat: ["top"],
                drag_button: "left",
                droppable: ["tree-drop"]
            },

            callback: {

                onmove: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
                    var parent_id = 0;

                    if (TYPE === "inside") {
                        parent_id = $(REF_NODE).attr('id');
                    }
                    saveHiearchy(NODE.id, parent_id);
                },
                onrename: function(NODE, LANG, TREE_OBJ, RB) {
                    renameNode(NODE.id, $(NODE.innerHTML).filter("a")[0].innerText);
                },
                oncreate: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
                    var parent_id = 0;

                    if (TYPE === "inside") {
                        parent_id = $(REF_NODE).attr('id');
                    }
                    createNode(NODE, parent_id);
                },
                ondelete: function(NODE, TREE_OBJ, RB) {
                    deleteSubNode(NODE.id);
                }
            }
        });

Here are the corresponding controller actions, they can be implemented with your own data access layer or LINQ or any type ORM.

public ActionResult SaveHiearchy(string childId, string parentId)
{
    JsTreeDAO.SaveNodeRelationship(childId,parentId);

    return null; //you may return any success flag etc
}
 public ActionResult RenameNode(string nodeId, string nodeNewTitle)
 {
     JsTreeDAO.RenameNode(nodeId, nodeNewTitle);

     return null; //you may return any success flag etc
 }

 public JsonResult CreateFolder(string folderName, string parentId)
 {
     int newNodeId = JsTreeDAO.AddSubNode(parentId, folderName);

     return Json(new { nodeId = newNodeId });//id of newly created node is required for rename callback.
 }

 public ActionResult DeleteSubNode(string folderId)
 {
     JsTreeDAO.DeleteSubNode(folderId);

     return null; //you may return any success flag etc
 }

Please note that I have not provided the details of the DAO class being used here and also have not used LINQ in these examples just to keep things simple because LINQ does not have direct equivalent for "Hierarchy" common table expression, otherwise we would have to resort to LINQ extensions.

Hope this helps.

Binding JsTree with Database in ASP.NET MVC

2009-06-29T15:16:00.001-07:00

In my previous post I demonstrated how to bind jsTree programmatically with a collection/array of objects using JSON. In this post I’ll reuse the same logic to map jsTree node anatomy on server side entity and will populate that entities from database. That , in turn will be converted to JSON and sent to client side to bind with jsTree. I’ll demonstrate this in ASP.NET MVC.

First you need to setup jsTree with required files in your ASP.NET MVC project as shown below .

I’ll bind jsTree with a self referencing table for example an Employee, where an employee can also be manager of another employee. To keep it as simplest as possible there are only three fields in the table , ID . Name and ManagerId as shown below.

Here is sample data in the table to be displayed. You can see from the data the table is self referencing i.e. ManagerId of an employee is ID of another employee

With bottom up approach next step is to setup Model with a method that could return a DataSet to the controller action. I am not using LINQ in this post , I have added a class named jsTreeDAO in the model that uses ConnectionManager, a utility class for data access . I am not showing its definition here. Its quite simple to implement, you can also wirte your own ADO logic in the method.

public static DataSet GetEmployeeHiearchicalInfo()
  {
    DataSet ds = new DataSet();
    try
    {
        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = @"WITH Hierarchy(ManagerId, EmpId, level, Name) AS (
            SELECT ManagerId, Id, 0, Name FROM Employee
            where ManagerId Is Null UNION ALL SELECT dt.ManagerId, dt.Id, level + 1, dt.Name FROM Employee 
            dt INNER JOIN hierarchy h ON dt.ManagerId = h.EmpId) 
            select * from Hierarchy";

        cmd.CommandType = CommandType.Text;
        //ConnectionManager is a utility class written for handling connection and exectue commands.
        ConnectionManager.Execute(cmd, ref ds);
    }
    catch (SqlException)
    {
        throw;
    }
    catch (Exception)
    {
        throw;
    }
    return ds;
 }

The important point to note in above method is the SQL query which uses Common Table Expression (CTE) a new feature in SQL Server 2005 for building an hierarchal view of the data. For more details about CTE ,please refer to this article.

Lets Add a controller Action that would call the model’s method. You need to add a controller first ,say its EmployeeController add an Action with name GetEmployeesHiearchicaInfo as shown below.

public JsonResult GetEmployeeInfo()
  {
    DataSet dsNodes = JsTreeDAO.GetEmployeeHiearchicalInfo();
    DataTable tableNodes = dsNodes.Tables[0];
    DataRow parentDr = tableNodes.Rows[0];

    JsTreeNode rootNode = new JsTreeNode();
    rootNode.attributes = new Attributes();
    rootNode.attributes.id = Convert.ToString(parentDr["EmpId"]);
    rootNode.attributes.rel = "root" + Convert.ToString(parentDr["EmpId"]);
    rootNode.data = new Data();
    rootNode.data.title = Convert.ToString(parentDr["Name"]);

    rootNode.attributes.mdata = "{ draggable : true, max_children : 100, max_depth : 100 }";

    PopulateTree(parentDr, rootNode, tableNodes);


    return Json(rootNode);
  }

This method is quite self explanatory. First it gets DataSet having employee info then it sets all info for the root node from the first data row, then it passes both rootNode and parentRow to another method that binds all info recursively for its children. The definition of method is shown below.

public void PopulateTree(DataRow dataRow, JsTreeNode jsTNode, DataTable tableNodes)
{
    jsTNode.children = new List();
    foreach (DataRow dr in tableNodes.Rows)
    {

        if (dr != null)
        {
            if (Convert.ToInt32(dr["level"]) == Convert.ToInt32(dataRow["level"]) + 1
                        && Convert.ToInt32(dr["ManagerId"]) == Convert.ToInt32(dataRow["EmpId"])
                        )
            {

                JsTreeNode cnode = new JsTreeNode();
                cnode.attributes = new Attributes();
                cnode.attributes.id = Convert.ToString(dr["EmpId"]);
                cnode.attributes.rel = "folder" + Convert.ToString(dr["EmpId"]);
                cnode.data = new Data();
                cnode.data.title = Convert.ToString(dr["Name"]);

                cnode.attributes.mdata = "{ draggable : true, max_children : 100, max_depth : 100 }";

                jsTNode.children.Add(cnode);


                PopulateTree(dr, cnode, tableNodes);

            }
        }
    }
}

Now we have to add a view named Employee to display employee information coming from database using jsTree. The View markup is quite simple just add a div to which you want to attach the jsTree as shown below.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server"%>
Employee Graph
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"%>
<div id="employeeGraph" %>
</div>
</asp:Content%>

Now we have to setup jsTree which will call the controller method asynchronously to load and bind data as shown below.

<script type="text/javascript">
$(function() {
    $("#foldergraph").tree({
        data: {
            type: "json",
            url: "/Home/GetEmployeeInfo",
            async: true
        },
        ui: { theme_name: "classic" },
        rules: {
            metadata: "mdata",
            use_inline: true,
            clickable: ["all"],
            deletable: ["all"],
            renameable: ["all"],
            creatable: ["all"],
            draggable: ["all"],
            dragrules: ["child * child", "child inside root", "tree-drop inside root"],
            createat: ["top"],
            drag_button: "left",
            droppable: ["tree-drop"]
        }

    });
});

</script>

Its also mentioned in my last post that the rules{} configuration is optional, only you have to set data aggregate attributes of the jsTree .

must need to set Async=true for asynchronous JSON data load form server.

Have a look on the output.

In these two posts i just focused on only jsTree data binding, in upcoming posts I will show you how you can drag drop, create, delete nodes and persist the changes in database

Hope this helps.

Mahr

Binding jsTree programmatically with server side entities using JSON in ASP.NET

2009-05-30T13:23:00.001-07:00

jsTree is very useful jQuery based javascript component for displaying contents
in tree structure in hierarchical manner. In this small example I’ll give you a
demonstration how you can bind jsTree programmatically with sever side data using
JSON.
Before going for implementation first have a look on the format of JSON input
to create nodes.

json:  [   { attributes:  { id: "root1", rel: "root" }, 
        state: "open", data: "Root node 1", 
        children: [    { attributes: { id: "root1_child1", rel: "folder" }, 
         data: { title: "Custom icon", icon: "../images/ok.jpg" } 
      }, 
//.. . other nodes 
  ]

And here is the entity based implementation of a jsTree node.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class JsTreeNode
{
    public JsTreeNode()
    {
    }
    Attributes _attributes;
    public Attributes attributes
    {
        get
        {
            return _attributes;
        }
        set
        {
            _attributes = value;
        }
    }
    Data _data;
    public Data data
    {
        get
        {
            return _data;
        }
        set
        {
            _data = value;
        }
    }
    string _state;
    public string state
    {
        get
        {
            return _state;
        }
        set
        {
            _state = value;
        }
    }
    List _children;
    public List children
    {
        get
        {
            return _children;
        }
        set
        {
            _children = value;
        }
    }

}
public class Attributes
{
    string _id;

    public string id
    {
        get
        {
            return _id;
        }
        set
        {
            _id = value;
        }
    }
    string _rel;

    public string rel
    {
        get
        {
            return _rel;
        }
        set
        {
            _rel = value;
        }
    }
    string _mdata;

    public string mdata
    {
        get
        {
            return _mdata;
        }
        set
        {
            _mdata = value;
        }
    }
}

public class Data
{
    string _title;

    public string title
    {
        get
        {
            return _title;
        }
        set
        {
            _title = value;
        }
    }

    string _icon;

    public string icon
    {
        get
        {
            return _icon;
        }
        set
        {
            _icon = value;
        }
    }
}

As you can see the JSON , jsTree expects is collection nodes each having following
structure

{  attributes: { id: "pjson1_5", rel: "root2" },  data: "Root node 2" }

where state and children are optional fields to be set. Keeping the above anatomy
of jsTree node , we can creat server side class to have one-one mapping with these
json objects with composition/aggregation as per needed so that we can bind
it with node collection populated from sever side. Lets create the main jsTreeNode
and other entities which compose its anatomy as shown above.
< The jsTreeNode is capable to fully map the jsTree json type node. And now its time to populate the jsTreeNode coollection bind the JsTree with it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RouteCallbacks();
        }
    }
    void RouteCallbacks()
    {
        string callback = Request.Params["callback"];
        if (string.IsNullOrEmpty(callback))
            return;

        if (callback == "GetNodesJson")
            this.GetNodesJson();
    }
    void GetNodesJson()
    {
        List nodesList = new List();
        for (int i = 1; i < 10; i++)
        {
            JsTreeNode node = new JsTreeNode();
            node.attributes = new Attributes();
            node.attributes.id = "rootnod" + i;
            node.attributes.rel = "root" + i;
            node.data = new Data();
            node.data.title = "Root node:" + i;
            node.state = "open";

            node.children = new List();

            for (int j = 1; j < 4; j++)
            {
                JsTreeNode cnode = new JsTreeNode();
                cnode.attributes = new Attributes();
                cnode.attributes.id = "childnod1" + j;
                node.attributes.rel = "folder";
                cnode.data = new Data();
                cnode.data.title = "child node: " + j;
                cnode.attributes.mdata = "{draggable : true,max_children : 1,max_depth : 1 }";
                node.children.Add(cnode);

            }
            node.attributes.mdata = "{draggable : false,max_children : 1, max_depth :1}";
            nodesList.Add(node);
        }
        JavaScriptSerializer ser = new JavaScriptSerializer();
        string res = ser.Serialize(nodesList);
        Response.ContentType = "application/json";
        Response.Write(res);
        Response.End();
    }
}

Following is the client side complete code snipet required to bind jsTree with the server side entities based JSON data. Please dont forget to add jQuery and jsTree related js files reference to your page. The "rule{}" configuration is optional. It is only required if you want your jsTree to be all ***able.

<script type="text/javascript">
      $(function() {
            $("#divJsTreeDemo").tree({
            data: {
            type: "json",
            url: "Default.aspx?callback=GetNodesJson",
            async: true

            },

            rules: {
            metadata: "mdata",
            use_inline: true,
            clickable: ["root2", "folder"],
            deletable: "none",
            renameable: "all",
            creatable: ["folder"],
            draggable: ["folder"],
            dragrules: ["folder * folder", "folder inside root", "tree-drop inside root2"],
            drag_button: "left",
            droppable: ["tree-drop"]

            }
          });

      });

    </script>

Following is the page markup.

    <form id="form1" runat="server">
    <div id="divJsTreeDemo">
    </div>
    </form>

Here it is, Have a look. Hope this helps. For more about jsTree please visit its website.

Uploading File in ASP.NET MVC

2009-04-25T00:52:00.001-07:00

Uploading file in ASP.NET MVC is not as straight job as in ASP.NET as you have to do the ASP.NET FileUpload server control job yourself. You have to follow following simple steps.

1. Set enctype property of the form to "Multipart/form-data" as shown below. By default enctype of form is “application/x-www-form-urlencoded"

The page contains an input field of type “file” and button to submit the form.

By adding setting enctype to "Multipart/form-data", HTTP takes cares of the files uploaded before submission.

2. Add logic to grab the file in the controller that is being used to update the form say it’s “Edit”. When the form having enctype = "Multipart/form-data" is submitted the Request object will contain a collection of files, iterate this collection to get the desired file.

That’s it.

Just for your info you might have seen that the built in HttpPostedFileBase class plays key role in getting correct file’s content type and saving it. This class has following members that almost all we have used in this example!

Hope it helps.

ASP.NET MVC vs ASP.NET

2009-04-18T01:07:00.000-07:00

I have been working on an application in ASP.NET MVC for last few months. It was in Beta then, now Microsoft has released its first version and also made it open source under MS-PL. I found it a great framework for web development as it provides you full control over all ins and outs of the request & response over http. It utilizes HTTP to its full extent. You will definitely go for ASP.NET MVC instead of regular ASP.NET if want to achieve following objectives. ASP.NET MVC 1. You want more control over Request and Response. No more ViewState and Postback. You have full control over the rendered HTML. 2. You want to make your urls RESTful, i.e. your site is capable to have a unique url for each action associated with each item. ASP.NET MVC gets this influence from RESTful web services. And RESTful urls are definitely SEO friendly. 3. You want clean separation of concerns. 4. You want to bring parallelism in development, i.e. one developer may work on View and another may work on controller and so on. This boosts productivity. 5. ASP.NET MVC is best suited for Test Driven Development (TDD) as it is contract based (interface based) and is easily mockable. 6. ASP.NET MVC provides fine grain control over any javascript framework like jQuery, Prototype etc. quite easily and intuitively. 7. ASP.NET MVC is easily pluggable and extendable framework. 8. Above all, now ASP.NET MVC is open source under MS-PL. So you have full source code to change anything you want. ASP.NET Though ASP.NET provides you lot of advantages, regular ASP.NET still will remain in industry and has its own worth and importance. 1. Provides a higher level of abstraction on Request and Response, brings ViewState and Postback in the cycle. Thus good option for novice web developers! 2. Well suited for heavy data driven applications. 3. Provides you set of server controls (built in & third party) that helps you boost productivity. In my upcoming posts I will show you how to work with ASP.NET MVC using JQuery. JQuery is best suited Javascript framewok for ASP.NET MVC to work with. We'll see almost all important features from DOM scripting and UI to rich Ajax calls, related with all types of form posting scenarios.

Response.Write/Response.BinaryWrite and File Download problem in UpdatePanel

2008-07-17T23:01:00.001-07:00

(Solution to Sys.WebForms.PageRequestManagerParserErrorException)

You may face problem when you write download file logic in aspx page code behind while the the control that fires the event to download file is in update panel. If you use Response.Write() or Response.BinaryWrite() method as shown below in async postback you will encounter Sys.WebForms.PageRequestManagerParserErrorException.

Page’s markup

Page’s Code behind

protected void ButtonDownload_Click(object sender, EventArgs e)
        {
            string fileName = "song.wav";
            string filePath = "Audio/song.wav";
            Response.Clear();
            Response.ContentType = "audio/mpeg3";
            Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
            string fileSeverPath = Server.MapPath(filePath);
            if (fileSeverPath != null)
            {

                byte[] fileBytes = GetFileBytes(fileSeverPath);

                Response.BinaryWrite(fileBytes);

                Response.Flush();
            }
        }
        protected byte[] GetFileBytes(string url)
        {
            WebRequest webRequest = WebRequest.Create(url);
            byte[] fileBytes = null;
            byte[] buffer = new byte[4096];
            WebResponse webResponse = webRequest.GetResponse();
            try
            {
                Stream stream = webResponse.GetResponseStream();
                MemoryStream memoryStream = new MemoryStream();
                int chunkSize = 0;
                do
                {
                    chunkSize = stream.Read(buffer, 0, buffer.Length);
                    memoryStream.Write(buffer, 0, chunkSize);
                } while (chunkSize != 0);
                fileBytes = memoryStream.ToArray();

            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
            }

            return fileBytes;
        }

The file download logic is simple. I have considered and audio file (say song.wav) to download that’s placed in Audio folder in root of my website. I have written separate method that takes URL for the file to be downloaded and return the bytes of that file.

Resolution of the Problem

There are several ways to fix this problem each fix has specific scops.

You can also use RegisterPostBackControl method of the ScriptManager control in Page_Load as shown below.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ScriptManager1.RegisterPostBackControl(ButtonDownload);
            }
        }

The drawback of these two approaches is obviuos i..e ultimatley you have to resort a full postback whenver you will need downlaod a file while the rest of the controls on the page are posting back asynchronously. This may lead to serious problems if you are using multiple update panels and you want them work simulatneolusly. Think of a scenario if you have a player in page and that is in a separate update panel. When it is playing file , you click on download file button. What will happen? A postback will occur that will close the player as complete page has to be posted back. In such cases we have to sort out some other way. You might have heard about HttpHandlers. If not , then its time to know their strength; and in such a scenario you can learn their usefullness. So it lets have a look briefly. An HttpHanlder is a class that impliments IHttppHanlder and can be set traget of a particular request (HttpRequest). They can be thought of like ISAPI extenions that are basically dlls mapped against particular file extensions that all happens at IIS level. An HttpHanlder handles request with particular extensions after HttpModule completes their working on it. An HttpHanlder takes an httpcontext and handels it in a way you have told it to do. They are best when you want to isloate or separate an HttpRequest from main HttpContext to handle it in custom manner. Like our scenario, we want our download file request to be separated from main context so that it won’t affect other ongoing requests/reponses of main httpcontext. There are built in HttpHandlers that automatically get registered in web.config. When we write a new httpHandler we have to reigister it but there are is support of generic handler with extension .ashx(asp handler x) that does not require regsiteration. Lets add a new generic hanlder. Right click on your web site and chose Add new item. and then select Generic Handler as shown below

Lets have a look on the file added

<%@ WebHandler Language="C#" Class="DownloadHandler" %>
        using System;
        using System.Web;
        public class DownloadHandler : IHttpHandler
        {
            public void ProcessRequest (HttpContext context) 
            {
                context.Response.ContentType = "text/plain";
                context.Response.Write("Hello World");
            }

            public bool IsReusable {
                get {
                return false;
            }
        }

It has a method ProcessRequest that takes httpcontext in parameter and allows us to handle it in custom manner and a property IsReusable used to flag whether or not the current instance of the handler is resuable for the following similar requests.

Let add our download logic here in ProcessRequest method. Now after complete implementation our hanlder looks like this

<%@ WebHandler Language="C#" Class="DownloadHandler" %>
        using System;
        using System.Web;
        public class DownloadHandler : IHttpHandler
        {
            public void ProcessRequest (HttpContext context) 
            {
              
                string fileName = context.Request.QueryString["fileName"];

                string filePath = context.Request.QueryString["filePath"];
                context.Response.Clear();
                context.Response.ContentType = "audio/mpeg3";
                context.Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
                string fileSeverPath = context.Server.MapPath(filePath);
                if (fileSeverPath != null)
                {
                    byte[] fileBytes = GetFileBytes(fileSeverPath);
                    context.Response.BinaryWrite(fileBytes);
                    context.Response.Flush();
                }
            }

            public bool IsReusable {
                get {
                return false;
            }
            }

            protected byte[] GetFileBytes(string url)
            {
                WebRequest webRequest = WebRequest.Create(url);
                byte[] fileBytes = null;
                byte[] buffer = new byte[4096];
                WebResponse webResponse = webRequest.GetResponse();
                try
                {
                    Stream stream = webResponse.GetResponseStream();
                    MemoryStream memoryStream = new MemoryStream();
                    int chunkSize = 0;
                do
                {
                    chunkSize = stream.Read(buffer, 0, buffer.Length);
                    memoryStream.Write(buffer, 0, chunkSize);
                } while (chunkSize != 0);

                fileBytes = memoryStream.ToArray();

                }
                catch (Exception ex)
                {

                   // log it somewhere

                }
               return fileBytes;

             }
        }

You might have noticed that the whole code is same as we used in the page just with few chnages , now all response, request are of the context being passed in paramater and we are getting file path and file name from query sting.

Lets come to last part of the story using this handler. You can call this handler by setting url of any url property supporting control and rasing its click hanlder programmterically or in windows.open in javascript. You might wonder , why I am not using Response.Redirect. Well you can use it, but in current scenario we cant use it as it will cause a postback. Remove download file logic from page code behind. All changes are in page’s mark up. After chnages here is it.

< script type="text/javascript">

        function downloadFile(fileName, filePath) {
            var downloadLink = $get('downloadFileLink');
            downloadLink.href = "DownloadHandler.ashx?fileName=" + fileName + "&filePath=" + filePath;
            downloadLink.style.display = 'block';
            downloadLink.style.display.visibility = 'hidden';
            downloadLink.click();

            return false;
        }

</script>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

Important point to note is that I have added and anchor in the page with id downloadFileLink and have resgister OnClientClick of the button with downloadFile javscript method that takes target file name and virtual relative path of the file (if used in GridView these may come from database) . When button is click downloadFile method is called that set the href proiperty of the anchor with the url to call DownloadHandler.

downloadLink.href = "DownloadHandler.ashx?fileName=" + fileName + "&filePath=" + filePath;

After setting it anchor is clicked programmatically and as result DownloadHandler is called and after processing the request shows following popup to save the file.

Here is it. Enjoy!

Purifying Heart

2008-07-16T22:19:00.000-07:00

Sustain Me, Lord Strengthen me, my lord,
for I am overcome with feebleness.
Ennoble me once more,
for I have been cast down.
Sustain me, Lord,
for I am impoverished.