ASP.NET and More

How to Bind a collection of Abstract Class or Interface to a Model – ASP.NET MVC

Wed, 08 Jul 2009 11:43:00 GMT

Default Model binder is a very neat and slick piece of functionality, that automatically parses the Request.Form fields and maps the Form Fields to our Action parameters, mostly in case of POST.

In most of the scenario’s it will work pretty well, but it some of the cases it will not (Obviously !!!). So when it works out well we don’t have a problem, but if not then we are in trouble. Remember we are in trouble, but not a dead end. One thing about ASP.NET MVC is that it’s heavily customizable. But then we also need to know what to customize. In this case when the default model binder doesn’t work, we have to write our own ModelBinder.

Problem Statement: Let’s assume that we an Abstract Base class “Animal” and there are three concrete classes, namely Cat, Dog and Tiger which inherits from Animal class.

The Animal Class is defined as

   1: public abstract class Animal   2:     {   3:         public Animal()   4:         {   5:         }   6:     7:         public string Name { get; set; }   8:         public string Color { get; set; }   9:         public int Legs { get; set; }  10:         public abstract string Shout();  11:         public abstract string AnimalType { get;}  12:     }

And the three derived classes are defined as

   1: public abstract class Animal   2:     {   3:         public Animal()   4:         {   5:         }   6:     7:         public string Name { get; set; }   8:         public string Color { get; set; }   9:         public int Legs { get; set; }  10:         public abstract string Shout();  11:         public abstract string AnimalType { get;}  12:     }  13:    14: public class Cat : Animal  15:     {  16:         private string m_animalType = "Cat";  17:    18:         public Cat()  19:         {  20:             this.Color = "Bluish Gray";  21:             this.Name = "Tom";  22:             this.Legs = 4;  23:         }  24:    25:         public override string Shout()  26:         {  27:             return (".");  28:         }  29:    30:         public override string AnimalType  31:         {  32:             get { return (m_animalType); }  33:         }  34:     }  35:    36: public class Dog : Animal  37:    {  38:        private string m_animalType = "Dog";  39:    40:        public Dog()  41:        {  42:            this.Color = "Gray";  43:            this.Name = "Spike";  44:            this.Legs = 4;  45:        }  46:        public override string Shout()  47:        {  48:            return("..");  49:        }  50:    51:        public override string AnimalType  52:        {  53:            get  54:            {  55:                return (m_animalType);  56:            }  57:        }  58:    }  59:    60:    61: public class Tiger : Animal  62:     {  63:         private string m_animalType = "Tiger";  64:    65:         public Tiger()  66:         {  67:             this.Color = "White and Black Stripes";  68:             this.Name = "Hobbes";  69:             this.Legs = 4;  70:         }  71:         public override string Shout()  72:         {  73:             return ("....");  74:         }  75:    76:         public override string AnimalType  77:         {  78:             get { return (m_animalType); }  79:         }  80:     }

So now we will Bind the view with a List<Animal>. So the Action will look like following:

   1: public ActionResult Index()   2:         {   3:             List<Animal> _lst = AnimalFactory.GetMyPets();   4:             return View(_lst);   5:         }

Now let’s say our View is a Bulk Edit screen, which looks like…

Now if we modify any value and try to Save it, it will call the “Save” controller.

   1: [AcceptVerbs(HttpVerbs.Post)]   2: public ActionResult Save(IList<Animal> myPets)

But here if we try to run it it will throw an Exception,

Which is expected, because after all you can’t instantiate an abstract class. So here we require some mechanism, so that we can create instances of the concrete classes, and recreate the List. A custom Model binder will help us to do that.

First step to create a Model Binder is to create a class which Implements IModelBinder interface.

So my Model Binder will look like…

   1: public class AnimalModelBinder : IModelBinder   2:     {   3:         #region IModelBinder Members   4:     5:         object IModelBinder.BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)   6:         {   7:             string typeKey = bindingContext.ModelName + ".Type";   8:             string animalTypeName = GetValue<string>(bindingContext, typeKey);   9:             Animal tempAnimal = Activator.CreateInstance(Assembly.GetAssembly(typeof(Animal)).GetName().FullName,animalTypeName).Unwrap() as Animal;  10:               11:             typeKey = bindingContext.ModelName + ".Name";  12:             tempAnimal.Name = GetValue<string>(bindingContext, typeKey);  13:    14:             typeKey = bindingContext.ModelName + ".Color";  15:             tempAnimal.Color = GetValue<string>(bindingContext, typeKey);  16:    17:             typeKey = bindingContext.ModelName + ".Legs";  18:             tempAnimal.Legs = GetValue<int>(bindingContext, typeKey);  19:             return (tempAnimal);  20:         }  21:    22:         private T GetValue<T>(ModelBindingContext bindingContext, string key)  23:         {  24:             ValueProviderResult valueResult;  25:             bindingContext.ValueProvider.TryGetValue(key, out valueResult);  26:             bindingContext.ModelState.SetModelValue(key, valueResult);  27:             return (T)valueResult.ConvertTo(typeof(T));  28:         }    29:    30:         #endregion  31:     }

GetValue method I have copied from this Post.

And to get the concrete type of each of the item of the List<Animal>, I have included and hidden field in the View.

<%   = Html.TextBox("myPets[" + i + "].Type",item.GetType(),new {style="display:none"}) 
%>

So I am getting the Type from “myPets[i].Type” field. Once I have the Type, I am using Reflection to create object of that class, and assigning the properties.

That’s all !!!

Data Bound DropDownList (HTML Helper) for ASP.NET MVC

Mon, 22 Jun 2009 14:17:00 GMT

In this Post I will try to create a HTML Helper method to create a Data-bound Dropdownlist for ASP.NET MVC framework. When iterating through the DataSource in the ViewPage, to create a Dropdownlist is easy, but at the sametime this is one feature that we will come across multiple time during any project execution. So it make more sense to me, if we create a HTML Helper, which will generate the Dropdownlist from a DataSource.

Our HTML Helper will accept the following parameters.

A DataSource
DataTextField
DataValueField
Selectedvalue
HTMLAttributes, this will be optional.

   1: public static string DataBoundDropDownList(this HtmlHelper helper, object DataSource,string DataValueProperty,string DataTextProperty,string selectedValue, object HtmlAttributes)   2: public static string DataBoundDropDownList(this HtmlHelper helper, object DataSource, string DataValueProperty, string DataTextProperty, string selectedValue)

So there will be two methods, one with the HTMLAttribute parameter another without it. In this walkthrough we will use TagBuilder to generate the HTML, rather than using StringBuilder. Since in both of the methods the <option> tag will be same, so we will be using a private method to generate it.

   1: private static TagBuilder CreateDropDownlist(object DataSource, string DataValueProperty, string DataTextProperty, string selectedValue)

This method will return me a TagBuilder of type “select”, which will contain all the “<option>” tag for the select tag.

At first in CreateDropDownlist method we will create the “select” tag.

   1: TagBuilder selectBuilder = new TagBuilder("select");

Then we will be iteration through the DataSource, to create the options fro the dropdownlist. So the code for the CreateDropDownlist will look

   1: private static TagBuilder CreateDropDownlist(object DataSource, string DataValueProperty, string DataTextProperty, string selectedValue)   2:         {   3:             #region "Create the DropdownList"   4:             TagBuilder selectBuilder = new TagBuilder("select");   5:             StringBuilder optionStringBuilder = new StringBuilder();   6:             #endregion   7:     8:             #region "Create OptionList"   9:             IEnumerable ddlSource = DataSource as IEnumerable;  10:             if (ddlSource == null)  11:             {  12:                 throw new Exception("DataSource must implement IEnumerable Interface.");  13:             }  14:             IEnumerator item = ddlSource.GetEnumerator();  15:             while (item.MoveNext())  16:             {  17:                 string strText = DataBinder.GetPropertyValue(item.Current, DataTextProperty).ToString();  18:                 string strVal = DataBinder.GetPropertyValue(item.Current, DataValueProperty).ToString();  19:                 TagBuilder optionBuilder = new TagBuilder("option");  20:                 optionBuilder.MergeAttribute("value", strVal);  21:                 optionBuilder.InnerHtml = strText;  22:                 if (strVal == selectedValue)  23:                 {  24:                     optionBuilder.MergeAttribute("selected", "selected");  25:                 }  26:                 optionStringBuilder.Append(optionBuilder.ToString());  27:             }  28:             selectBuilder.InnerHtml = optionStringBuilder.ToString();  29:             #endregion  30:    31:             return (selectBuilder);  32:         }

Now once we get back the TagBuilder from the CreateDropDownlist method, in the DataBoundDropDownList method we will do the following, depending on the no of parameters.

   1: public static string DataBoundDropDownList(this HtmlHelper helper, object DataSource, string DataValueProperty, string DataTextProperty, string selectedValue)   2:         {   3:             TagBuilder selectTag = CreateDropDownlist(DataSource, DataValueProperty, DataTextProperty, selectedValue);   4:             return (selectTag.ToString());   5:         }

   1: public static string DataBoundDropDownList(this HtmlHelper helper, object DataSource,string DataValueProperty,string DataTextProperty,string selectedValue, object HtmlAttributes)   2:         {   3:             TagBuilder selectTag = CreateDropDownlist(DataSource, DataValueProperty, DataTextProperty, selectedValue);   4:             selectTag.MergeAttributes(new RouteValueDictionary(HtmlAttributes));   5:             return (selectTag.ToString());   6:         }

That’s all !!!. Have fun.

Source

Bulk Data Update with ASP.NET MVC

Thu, 18 Jun 2009 09:59:00 GMT

Recently I was doing some R&D with ASP.NET MVC. During that I was mimicking the Create a Movie Database Application in 15 Minutes with ASP.NET MVC (C#) tutorial, which is a nice ice-breaker tutorial. Once I was done with it, I was thinking of some more complex real-life scenarios. As a business application developer, I came across a scenario when I need to implement a bulk update operation through a Web interface. I hate it simply !!!!! Binding the data, then iterate through the Grid, do a lot of FindControl….

So I thought let’s try the same scenario with ASP.NET MVC….

There is a nice blog by Phil Haack on the topic, which is for Beta version, and the same approach doesn’t quite work with the released version. After tumbling few times finally I got the thing working, and my first observation is that, I am loving it !!!!!, it’s short, much more simple and the best part no more auto generated garbage HTML markups. The result is much more cleaner in terms of HTML. Though some you may not agree with me, but I always thought of having greater control over the HTML generation, the way it was with Classic ASP. Webforms doesn’t provide that, specially if you are using a Gridview.

So let’s look at the page.

It’s a simple UI, where I can update multiple book records, and then hit the “Save Changes” button to commit all the changes.

First I have created a database with a simple table, and the generated the ASP.NET Entity class, to perform the CRUD operation, though in this example i will only use the Update operation. I am not going into details on How to use the Entity framework.

I have used the HomeController’s Index() method to create a View with all the Movie records, in a tabular format. The code looks like,

   1: BookStoreEntities _db = new BookStoreEntities();   2:     public ActionResult Index()   3:     {   4:         return View(_db.BookDetails.ToList());   5:     }

The View looks like this:

<form action="/Home/Index" method="post"> <table>     <tr>         <th>             BookID         </th>         <th>             Title         </th>         <th>             Author         </th>         <th>             Publication         </th>     </tr> <% int i = 0; %> <% foreach (var item in Model) { %>      <tr>         <td>             <%= Html.Encode(item.BookID) %>             <input type="hidden" name='<%= "BookList[" + i + "].BookID" %>' value='<%=item.BookID %>' />         </td>         <td>             <input type="text" name='<%= "BookList[" + i + "].Title" %>' value='<%=item.Title %>' />         </td>         <td>             <input type="text" name='<%= "BookList[" + i + "].Author" %>' value='<%=item.Author %>' />         </td>         <td>             <input type="text" name='<%= "BookList[" + i + "].Publication" %>' value='<%=item.Publication %>' />         </td>     </tr> <% i++; %> <% } %>  </table>  <p>     <input type="submit" value="Save Changes" /> </p> </form>

The View is simple enough, though there are few important points here, without which the Save won’t work. First of all I have added a <form> tag, with method=”post”, and action="/Home/Index". Now the most important point, name='<%= "BookList[" + i + "].BookID" %>' , here i is a Zero-based index, which will be used to recreate the List of books upon submission.

Next I have added another Index method to handle the Form submission.

   1: [AcceptVerbs(HttpVerbs.Post)]   2:        public ActionResult Index(IList<BookDetails> BookList)   3:        {   4:            if (ModelState.IsValid)   5:            {   6:                foreach (BookDetails editedBook in BookList)   7:                {   8:                    var tempBook = (from book in _db.BookDetails   9:                                    where book.BookID == editedBook.BookID  10:                                    select book).First();  11:    12:                    _db.ApplyPropertyChanges(tempBook.EntityKey.EntitySetName, editedBook);  13:                }  14:                _db.SaveChanges();  15:                return View(_db.BookDetails.ToList());  16:            }  17:            else  18:            {  19:                return View();  20:            }  21:        }

Also note that the name “BookList” is same as in the HomeController’s Index method’s parameter’s name.

I guess that’s it!!!! very simple and clean way to handle Bulk Update scenario.

Source Code

Custom Control, Postback and Events

Thu, 10 Jul 2008 10:36:00 GMT

Sometime back I was required to write a Custom Control, with some custom Events and some advanced functionality. Since I was not too familiar with the "Art of Writing Controls", I was searching through Google, to get some useful material. After spending sometime, I realized that there are a lot of blogs, articles are out there on custom controls, but none of them are complex and realistic, most of them are "Hello World" kind of an example. Moreover, I found that different people are using some different ways of achieving the same thing. So in this blog I will try to explain what I have learned from that experience, but I may add up to another different approach. Sorry for that. :D

In this post I will try to explain few concepts about Custom controls, mostly related to Postback and Raising Events.

I will use example of a Custom Control, that will not do much of the activities, but it will contain 2 buttons, and it will expose 2 events, one each for each of the button.

Event Handlers

Now to start with the very basic of Event handling in a Custom Control, we need to define a List of type EventHandlerList . EventHandler List will help us to store the Event Handler's associated with each of the Events.

protected EventHandlerList _lstEventHandlers = new EventHandlerList();

Since our control exposes two Events, we will define two key values, so that we can use them as Key values.

static readonly object _prevEventKey = new object();

static readonly object _nextEventKey = new object();

So far we have defined the EventHandlerList and two key values, to use to store the EventHandlers in the List. Now we will define the two Events, those will be Exposed to the Page, that uses this Control.

Remember, how we add EventHandler to an Event? Offcourse using the +=. If we want to expose those two events as Public Properties, then how they should look like? Hmmmm... surely we won't be using get;set;. Rather than that we will be using add; and remove; Sounds a bit confusing ??? Let's look into the code snippet.

public event EventHandler onPreviousButtonClick

{

add

{

_lstEventHandlers.AddHandler(_prevEventKey, value);

}

remove

{

_lstEventHandlers.RemoveHandler(_prevEventKey, value);

}

Similarly for the Next Button Click, we will define another Event say "onNextButtonClick"

public event EventHandler onNextButtonClick

{

add

{

_lstEventHandlers.AddHandler(_nextEventKey, value);

}

remove

{

_lstEventHandlers.RemoveHandler(_nextEventKey, value);

}

Now we will look into most important section, how to wire up PostBack and how to Raise Events.

Since I have two buttons, in the CreateChildControls() function, will add two LinkButtons, and give them ID's.

LinkButton _lnkNext = new LinkButton();

_lnkNext.ID = "NextButton";

LinkButton _lnkPrev = new LinkButton();

_lnkPrev.ID = "PrevButton";

Why we require ID's? hmmm, we will require these ID's sometime later. One quick point here, whenever you are creating any Custom Control, better to Implement "INamingContainer" interface. So far we have defined the events, and created the controls. But we haven't added any code to write the famous "__doPostback" function. So in the CreateChildControl method we will add the following code.

_lnkNext.Attributes.Add("href", Page.GetPostBackClientHyperlink(_lnkNext, this.ClientID));

_lnkNext.Attributes.Add("name", _lnkNext.ClientID);

_lnkPrev.Attributes.Add("href", Page.GetPostBackClientHyperlink(_lnkPrev, this.ClientID));

_lnkPrev.Attributes.Add("name", _lnkPrev.ClientID);

Postback

The above code snippet will add the Hyperlink and it will make sure that it will do a Postback. Now we will Use "IPostBackDataHandler" interface so that we can notify ASP.NET engine that this Control Participates in PostBack, and this control will have an opportunity to the values and decide whether to Raise any Event or Not.

This interface defines two methods,

public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection);

public void RaisePostDataChangedEvent();

The first method will fire just after Page_Init, but before Page_Load. If the PostBack is caused by our control, then we will return true, else we will return false. So in LoadPostData, we will write the below code snippet.

public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)

{

string _target = postCollection["__EVENTTARGET"];

string _arg = postCollection["__EVENTARGUMENT"];

if (_arg == this.ClientID)

{

if (_target == "NextButton")

{

//Property, to track which button was clicked.

this.NextButtonClicked = true;

}

Page.RegisterRequiresRaiseEvent(this);

return (true);

}

else

{

return (false);

}

In the above code snippet "__EVENTTARGET", and "" are two values, those were set from the __doPostBack javascript function. And the "Page.RegisterRequiresRaiseEvent(this);" line will notify the page that, it needs to fire the "RaisePostDataChangedEvent()" method.

In the "RaisePostDataChangedEvent" method, we will simply raise the Events, for the corresponding buttons.

public void RaisePostDataChangedEvent()

{

EventHandler prevHandler = (EventHandler)_lstEventHandlers[_prevEventKey];

if (prevHandler != null)

{

prevHandler(this, EventArgs.Empty);

}

EventHandler nextHandler = (EventHandler)_lstEventHandlers[_nextEventKey];

if (nextHandler != null)

{

nextHandler(this, EventArgs.Empty);

}

Hmmm, we are done..., a Control with multiple Events, is Done. Hope this post will help you.

Question: Why we are firing the Event in "RaisePostDataChangedEvent()", what will happen if we raise the Event in "LoadPostData"?