AjaxZen

Ajax in Asp.net

writer007 — Wed, 03 Dec 2008 19:13:37 +0000

In today’s blog entry, I’m going to take a step back from MVC Frame Work and write little bit about Asp.net. We will be focusing on how to make an Ajax call within Asp.net Web Forms. Many programmers had asked me about implementing Ajax in Asp.net Web Forms. This will give me an opportunity to respond to that and besides I get a chance to take a short break from our MVC series.

What we need to get started?

Visual Studio 2005 or higher
.NET Frame Work 2.0 or higher
ICallbackEventHandler :- Interface which is part of the System.Web.UI
RaiseCallbackEvent :- Method part of the ICallbackEventHandler that when invoked will communicate with the server.
GetCallbackResult :- This method is also part of the ICallbackEventHandler interface that will return results to the client.

Also, we need little bit of JavaScript which we will register onto the page from server side.

First function :- Makes that actual request to the server.
Second function :- Handles an error that come up during the call.
Final function :- This is that main function that will be responsible for making the Ajax call. Also, it will be automatically generated by Asp.net. You will see in a sec.

Here is the code of the Page_Load event :-

protected void Page_Load(object sender, EventArgs e)
{
     #region Generic ajax call script registration 
     string js = Page.ClientScript.GetCallbackEventReference(this, "arg", "OnReturnedData",
            "ctx", "OnError", true);

     //create a simplified wrapper method
     StringBuilder newFunc = new StringBuilder();
     newFunc.Append("function StartAsyncCall(arg, ctx) ");
     newFunc.Append("{ "); 
     newFunc.Append(js);
     newFunc.Append(" } ");

     //register it
    Page.ClientScript.RegisterClientScriptBlock(typeof(Test), "AsyncMethod",
                       newFunc.ToString(), true);
     #endregion
}

Couple of things are happening here, which are quite simple as you will soon see:-

1. Page.ClientScript.GetCallbackEventReference(control, argument, clientCallback, context, async)

control :- Server control that handles the client callback. This control must also implement ICallbackEventHandler interface & provide a RaiseCallbackEvent method. In our case, it’s the page itself.
argument :- Arguments passed from the element script to the server.
clientCallback :- The name of the client event handler that receives the result.
context :- Client script is evaluated on the client prior to initiating callback. The result of the script is passed back to the client event handler.
clientError :- Client event handler that handles the error.
useAsync :- Set true to perform callback asynchronously, false for synchronously.

2. Function StartAsyncCall will be regenerated automatically which we will call within our custom JavaScript function.

3. The last line, simply registers our JavaScript on to the page.
Page.ClientScript.RegisterClientScriptBlock(typeof script, key, script string, add script tag);

Now, we got that over with, it is time to inherit from ICallBackEventHandler.

complete c# code of our Test.aspx.cs page:-

 public partial class Test : Page, ICallbackEventHandler
{
    public string retVal = string.Empty; //global variable that will store our return value
    protected void Page_Load(object sender, EventArgs e)
    {
        #region Generic ajax call script registration
        
        string js = Page.ClientScript.GetCallbackEventReference(this, "arg", "OnReturnedData",
                "ctx", "OnError", true);

        //create a simplified wrapper method
        StringBuilder newFunc = new StringBuilder();
        newFunc.Append("function StartAsyncCall(arg, ctx) ");
        newFunc.Append("{ ");
        newFunc.Append(js);
        newFunc.Append(" } ");

        //register it
        Page.ClientScript.RegisterClientScriptBlock(typeof(Test), "AsyncMethod",
                            newFunc.ToString(), true);

        #endregion
    }

    #region implement ICallbackEventHandler Members
    public string GetCallbackResult()
    {
        //return value back to client side
        return retVal;
    }

    public void  RaiseCallbackEvent(string eventArgument)
    {
        //do the server side process here....
        retVal = eventArgument;
    }
    #endregion
}

Simple enough for you…

Complete HTML code for our Test.aspx:-



    Untitled Page
    



    Type your name to talk to the server:
    
    Submit Name

Here is what the final output would look like:-

Look!!! maa, No page refresh….

I hope this blog entry will help you to add creativity to your web application.

ASP.NET MVC GRID part 2

writer007 — Sun, 30 Nov 2008 23:17:20 +0000

Welcome back, we’ll pick up where we left off. If you haven’t gotten a chance to read the Part I of this series. Please do so now.

We will be expanding our project that we had started in Part I in today’s article. We’ll began by modifying our Index.aspx View by adding a hyperlink and a place holder div, which we will use to render our Grid.

Make Ajax call

I used the standard hyperlink tag because I find it way less complicated to implement. You don’t have to take my words for it, see it for yourself.

If was to create a hyperlink using the ASP.NET MVC Html helper. It would look like this:

<%= Html.ActionLink("link test", "GetAjaxGrid") %>

to add attributes I would need to pass a dictionary object:

<% IDictionary linkAttr = new Dictionary();
linkAttr.Add("onclick", "AjaxCall();"); %>
<%= Html.ActionLink("link test", "GetAjaxGrid", null, linkAttr) %>

Second thing, we need to do is to modify our Home Controller . We’ll create a new action called GetAjaxGrid that will handle our Ajax request.

public ContentResult GetAjaxGrid()
{
       //var type is the implicit variable type declartion.
         var model = new MVCGridModel();

         return Content(model.GetResults());
}

If you remember back in part I, ContentResult is part of the six action types that the Controller returns. Since, we are not returning a View, we just need to return the HTML markup. ContentResult seems to be the best option in this situation. We could have instead create a void action that will return our string content via Response.Write().

Yep, it is possible to use Response.Write() within the Controller and will behave like a JavaScript alert() function.

public void GetAjaxGrid()
{
       //var type is the implicit variable type declartion.
         var model = new MVCGridModel();
         Response.Write(model.GetResults());
}

I had successfully used the latter method in many of my real world applications and works well.

Next thing we need to do is create a JavaScript file. This will help us to keep things organized.

Create a new function called AjaxCall in our new myScript.js file:

function AjaxCall()
{
   //do Ajax stuff here....
}

We’ll come back to this in a sec, but first we need to add reference to jQuery library. In our Master page, we’ll add the script reference, so that the jQuery library can be available to all our pages.

We have two options, either you can type the script tag manually, or you can drag & drop the .js file name from the Solution Explorer onto the Master page. I prefer the latter just because we can in Visual Studio. While we are here, we’ll create the reference to myScript.js file as well.

Here is what “head” tag of the site.Master page should look like:


    
    <%= Html.Encode(ViewData["Title"]) %>

Now, back to our AjaxCall() that we had started in our myScript.js file. We will utilize the ajax plugin that is part of the jQuery library: ajax(option).

There are so many different options available that you can use, so please refer to the jQuery.ajax documentation for more details. We will be using the main options that seems to useful in the real world applications:

$.ajax({
   dataType: “”,
   url: "",
   beforeSend: function (XMLHttpRequest) {

    },
   success: function (data, textStatus) {
    },
   error: function (XMLHttpRequest, textStatus, errorThrown) {
   }
 });

Options:

dataType :- This tells the Ajax what kind of data we will be dealing with such as html, xml, json
url :- Where the Ajax call will be made to. In our case, /Controller/Action/
beforeSend :- Do anything before the call is made. I usually use it to display the “loading…” message.
Success :- When everthing goes well, success function will capture the result.
error :- When there is an error during the Ajax call, error function will let us know.

We are almost done, hang in there…

When everything does go well and our Ajax call returns the appropriate content. We would like our success function to display the Grid in the place holder that we had added in the beginning.

$("#GridContent").html(data);

Lets dissect what’s happening here:

$ :- Represent the jQuery version of document.getElementById() and it also looks up element by class name as well. very handy…..
# :- Tells the jQuery to lookup element by ID.
GridContent :- Is the ID of our place holder div tag.
html :- Represents the innerHTML property of the element.

Complete code for the AjaxCall function:

function AjaxCall()
{
 $.ajax({
   dataType: "html",
   url: "/Home/GetAjaxGrid/",
   beforeSend: function (XMLHttpRequest) {
      //Before the Ajax call is made, show the users "loading..." status message
     // within the place holder div.
      $("#GridContent").html("loading...");
    },
   success: function (data, textStatus) {
      //Render the Grid markup within our place holder that we had created
      //just for this purpose.
      $("#GridContent").html(data);
    },
   error: function (XMLHttpRequest, textStatus, errorThrown) {
    //If there are any errors during our Ajax call display them within our place holder as well.
    $("#GridContent").html(XMLHttpRequest.responseText);
   }
 });

}

Finally, we just need to add onClick event to the our hyperlink that we had added in the Index View.

So back in our Index view, add onClick=”AjaxCall();” to our link.

Make Ajax call

Complete code of the Index View with styles added to make the Grid little prettier:


   
    Make Ajax call

Final output:

Hope you have enjoyed reading the part II as much as I have enjoyed writing it. In the upcoming Part III blog, I’ll cover how to make our Grid editable. The real cool stuff begins from here on.

ASP.NET MVC GRID part 1

writer007 — Thu, 27 Nov 2008 22:03:33 +0000

This blog entry is a multi-part series in which our Ajax Master, Tariq Ahmed will show how to develop Ajax driven Grid using ASP.NET MVC Frame Work. These upcoming entries will guide the users in developing a basic to a complicated Grid within ASP.NET MVC Frame Work. Also these entries will utilize jQuery to handle all of the Ajax calls. Sweet!!!… lets begin…

Background:-
Today we will start by making a simple grid. Rather than just creating a Grid out of the

tag. Why not utilize the Grid control that all of the pre-MVC programmers have been familiar with: GridView. Before we began, allow me to explain little bit about MVC Frame Work. For those who are “Experts” can skip this portion and jump right to the Action section, or you can stick around and read this section as well because wisdom lies in knowing the fundamentals.

MVC:- Stands for Model – View – Controller.
MODELs :- Just bunch of Class files that are responsible for maintaining state.
VIEWs :- Consists of all of the Web Pages such as aspx, ascx, etc. You can also inherit off the model data to generate the View.
CONTROLLER: – Think of controller as the action handler.
i.e User clicks on a link and controller intercepts that event (action). Also, within the Controller you can manipulate the Model.

Lets dissect the CONTROLLER bit more because usually thats what confuses the new MVC programmers the most.

Controller handles 6 different action types:-

ViewResult:- Represent HTML & Markup [ most common ]
EmptyResults:- Represent no results.
RedirectResult:- Redirects to a new URL.
RedirectToRouteResult:- Redirects to a new Controller action.
JsonResult:- Represent json formatted result.
ContentResult:- Represent text result.

** All of these action types inherits from the ActionResults base class which is the default return type. **

To actually return these action types, you must use the following predefined methods.

View():- Returns ViewResult action result.
Redirect():- Returns RedirectResult action.
RedirectToAction():- Returns RedirectToRouteResult action.
RedirectToRoute():- Returns RedirectToRouteResult action.
Json():- Returns Json results.
Content():- Returns ContentResult.

For example:- HomeController.cs

public ActionResult Get()
{
    return View();
}

When the Get() action is invoked, it will return a View or a page with a matching name such as Get.aspx located at :- \View\Home\Get.aspx

or you can also specify a different View such as:

public ActionResult Get()
{
   return View("Foo");
}

This will assume there a Foo.aspx page located at:- \Views\Home\Foo.aspx

** Name of the folder must match with the name of the Controller, so the MVC Frame Work will know where to find the View.**

How to pass data from Controller to the View?
When Controller is invoked, it returns “view specific data”, hence ViewData. Think of ViewData dictionary property of ASP.NET MVC Frame Work as the content that get returned from Controller. The content can be a Web Page as I mentioned earlier or even Custom Objects (you will see an example of this later).

How do I access ViewData within a Web Page?
When you add a Web Page (view) to the project with the appropriate directory ofcourse, you will notice that the page will be derived from “ViewPage” class. Compared to before in regular ASP.NET where a Web Page (Web Form) derived from “System.Web.UI. Page” class.

In ASP.NET MVC, “System.Web.Mvc.ViewPage” is a subclass of the existing “System.Web.UI. Page” class. ViewPage class will give us the access to the ViewData dictionary property that we can use to access the content that was returned from the Controller. Naturally, this is simple concept to grasp after understanding core concept, isn’t that right?

How do I render the content of ViewData onto the Web Page?
Depends on the content, if it is just a string value or even an HTML markup.

You can use: <%= Some Code %> :- Represents Response.Write();
On the other hand, you can use: <% Some Code %> :- Allows you implement any compilable code either of C# or VB.NET.

This ends our background section.

Action:-
Finally, we will built a simple but functional Grid and in the upcoming series we will expand on this using jQuery and Ajax to add more complex functionalities that will meet the real world demands.

Goal:-
When were are done, our final output will look the following:-

Start with blank ASP.NET MVC application, I’m using Visual Studio 2008 with MVC Beta.
File >> New Project >> ASP.NET MVC Application

After you have completed the create new project wizard, Visual Studio 2008 solution explorer should look like this:

Under Scripts folder, Visual Studio 2008 have added for us the necessary jQuery libraries that we need. Very cool… By the way, VS 2008 also give us the intelli-Sense for JavaScript and with the downloadable plug-in you can get intelli-Sense for jQuery as well.

Our Controller folder should look like this:

We are not interested in the AccountController.cs but we are mainly interested in HomeController.cs file.

HomeController.cs class should look like the following:-

When you run the project as it is, it should look like this:

Now lets add Models to our project, under the Models folder, add two new Classes called MVCGridModel.cs and GridEntity:

We will define our MVCGridModel.cs class little later, but for now lets define our GridEntity.cs class.

GridEntity.cs is our custom object class that we will use to bind our Grid. Properties IndexField and ValueField represents our columns in our Grid.

Now lets define the MVCGridModel, which you will soon realize is very straight forward:

Our main ingredient in our model is the GridView which we will inherit from System.Web.UI.WebControls class.

First, create a new public method called GetResults which will return a string, you will see why later.

public string GetResults()
{
    //create dynamic grid here
}

Inside our GetResults method, instantiate a new GridView object.
GridView gv = new GridView();

Since, we don’t need to display the footer, we can just set it to false.
gv.ShowFooter = false;

I usually set the width to 100%, so that the Grid can expand and shrink automatically when the user resize the browser.
gv.Width = Unit.Percentage(100);

GridView exposes AutoGenerateColumns attribute, which is set to true by default. The purpose of this attribute is to render all data fields that it can AS THEY ARE and by setting it to false, we can control how our columns will be displayed.
gv.AutoGenerateColumns = false;

There is a cool attribute that GridView provide is called RenderControl. RenderControl attribute is probably one of the least used attribute by the .NET programmers, therefore not many of them are aware of the awesome functionality it has. The main function of this attribute is the render entire GridView in pure HTML. It is kind of like similar to building the Grid manually out of the

tags. So, why not take advantage of this “badass” feature.

To use RenderControl attribute we need to bring in two other key players: StringWriter & HtmlTextWriter.

RenderControl attribute outputs the content to HtmlTextWriter object.
HtmlTextWriter outputs the markup content to StringWriter stream.

using (StringWriter sw = new StringWriter()) 
{
    HtmlTextWriter hw = new HtmlTextWriter(sw);
    gv.RenderControl(hw);
    hw.Flush();
    string gridMarkUp = hw.InnerWriter.ToString();
}

Finally, we need to bind the Grid.

We need a collection of object that we can use to bind our Grid’s DataSource. Best way we can do that is to use our GridEntity object that we created earlier and create a Collection List.

private List GetData()
{
	//Instantiate our GridEntity object as a new List Collection
	List lst = new List();

	GridEntity obj; //Instantiate GridEntity object
        obj = new GridEntity();
        obj.IndexField = 1; //Represent the Primary Key of the DataBase table.
        obj.ValueField = "Column one"; //Represent column field.
        lst.Add(obj); //append Custom object to the Collection.

        //Repeat above process to create as many Rows you want
        obj = new GridEntity();
        obj.IndexField = 2;
        obj.ValueField = "Column two";
        lst.Add(obj);
        return lst; // Return our Collection List
}

Here is the complete code of the MVCGridModel.cs:

public class MVCGridModel
{
        public MVCGridModel()
        {
        }

        public string GetResults()
        {
            string gridMarkUp = string.Empty;

            GridView gv = new GridView();
            gv.ShowFooter = false;
            gv.Width = Unit.Percentage(100);
            gv.AutoGenerateColumns = false;

            BoundField col;
            col = new BoundField();
            col.DataField = "IndexField";
            col.HeaderText = "Perimary Field";
            gv.Columns.Add(col);

            col = new BoundField();
            col.DataField = "ValueField";
            col.HeaderText = "Value Field";
            gv.Columns.Add(col);

            gv.DataSource = GetData();
            gv.DataBind();
            using (StringWriter sw = new StringWriter())
            {
                HtmlTextWriter hw = new HtmlTextWriter(sw);
                gv.RenderControl(hw);
                hw.Flush();
                gridMarkUp = hw.InnerWriter.ToString();
            }

            return gridMarkUp;
        }

        private List GetData()
        {
            List lst = new List();
            GridEntity obj;

            obj = new GridEntity();
            obj.IndexField = 1;
            obj.ValueField = "Column one";
            lst.Add(obj);

            obj = new GridEntity();
            obj.IndexField = 2;
            obj.ValueField = "Column two";
            lst.Add(obj);

            return lst;
        }
}

Hang in there, we are almost done. We just need to create the View and render our cool Grid.

First, we will create the action in our Home controller and than use the built-in option in VS 2008 to add a new View to the project. Cool…..

create a new action:

public ActionResult GetGrid()
{
    //var type is the implicit variable type declartion.
      var model = new MVCGridModel();
      return View(model);
}

var is the keyword supported by the MVC Frame work that allows you to implicitly declare a variable without having to specify the type. As a JavaScript programmer, I appreciate the implicit variable declaration and wished it could be possible in C#. Now it is, sweet!!!

example:
var i = 5;
// Represents an integer type.
var j = “This a string”;
// Represents a string type variable.

Here is the complete code of our Home Controller:

public class HomeController : Controller
{
        public ActionResult Index()
        {
            ViewData["Title"] = "Home Page";
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            ViewData["Title"] = "About Page";

            return View();
        }

        public ActionResult GetGrid()
        {
            //var type is the implicit variable type declartion.
            var model = new MVCGridModel();
            return View(model);
        }
}

Now, for the final piece of the puzzle, the View itself.

When you Right-Click within our GetGrid() action, VS 2008 will provide you with “Add View” option that is now part of the context menu.

When you select Add View, you will get the following window:

Couple of things are happening here:

View name: This will be automatically populated for you because as we talked about this earlier, the action name and View has to be the same.
First check box: Here you have the option to utilized the Model or another other custom objects that your view can inherit.
Second check box: Very straight forward, this tell whether you want your View to be part of the master page or not. In our case we want this view to be part of the master page.

When you hit add, your view will be automatically added to the appropriate folder:

the HTML code of our View should look like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="GetGrid.aspx.cs" Inherits="MVCGridApp.Views.Home.GetGrid" %>

And the Code behind:

namespace MVCGridApp.Views.Home
{
    public partial class GetGrid : ViewPage
    {
    }
}

Talk about convenience….. I’m sure many AP.NET MVC programmer who had worked on the earlier versions of the Frame Work, will definitely appreciate this functionality.

Now, we will add something in our code behind that will give us little bit advantage. I like to add a public property that will return the ViewData.

public partial class GetGrid : ViewPage
{
     //public property makes it lot easier for typing.
     //Instead of doing ViewData.Model, I can just do Model.something. Handy little trick to keep
     //things simple as possbile.
       public MVCGridModel Model
       {
           get { return ViewData.Model; }
       }
}

In our HTML code, I like to utilize div tags mainly because we can control the layout (ie. styles) and keep things organized:

<%= Model.GetResults() %>

If you remember back in our MVCGridModel we had created a GetResults() method that returns the HTML markup string of the GridView control. So by doing <%= Model.GetResults() %> within the div tag, our entire Grid will be embedded in the div. You will see the advantage of this when we apply the CSS styles to it.

This is the complete HML code of our View:

By doing this you will have full control of every aspect of your Grid, soon you will see what I mean in upcoming Part II.

There are many ways to built a Grid and this happens to be one of them.