Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

M-V-VM in ASP.NET MVC: Removing Dependencies Between ASP.NET Views and Controller Actions

0.00/5 (No votes)
30 Nov 2009 1  
M-V-VM in ASP.NET MVC: Removing Dependencies Between ASP.NET Views and Controller Actions

Since the early days, I have always been a fan of the ASP.NET MVC framework, although I had one really big issue with it: the coupling of the controller actions in the view pages. This part was a real annoyance, since all the flow and logic was included in the controller, and none of it in the views, _except_ the action flow; this was included in the views by using Html.ActionLink.

This has always been a nuisance for me, so last week, as I was working on a project, I decided to fix this issue...

IMHO, the possible proceeding controller actions in the program flow should be defined in the controller action, and not in the view. So how could we do this, while still making it maintainable and easy to follow?

After considering a few alternative routes, and thinking about it event more, it suddenly hit me; why not represent the possible routes as data.

A few development cycles later, I had the following code in the controller:

public ActionResult Index()
{
     ViewData.Model = new VMIndex()
     {
         AllTasks = rTask.Find.OrderBy(o => o.Name),
         AL_AddTask = this.ActionLink("Add new task",c=>c.AddNewTask(null,null))
     };
     return View();
}

And this code in the view:

<h1>Task list</h1>
<%= Html.Grid(Model.AllTasks)
        .Columns(c=> {
            c.For(t => t.Name);
            c.For(t => t.Description);
            c.For(t => Html.ActionLink(t.AL_Status())).Named("Status").DoNotEncode();
            c.For(t => Html.ActionLink(t.AL_Edit())).Named("Edit").DoNotEncode();
            c.For(t => Html.ActionLink(t.AL_Delete())).Named("Delete").DoNotEncode();
        }).Empty("No tasks yet") 
%>
<hr />
<h3>Add a new task</h3>
<% using (Html.BeginForm(Model.AL_AddTask)) { %>
    Name<br />
    <%=Html.TextBox("Name") %><br />
    Description<br />
    <%=Html.TextArea("Description") %><br />
    <%=Html.SubmitButton(Model.AL_AddTask) %><br />
<% }%> 

Which looks rather nice in my opinion. Since I do not know whether I am the first person who thinks about this or not, I decided to publish the source code together with an example on github.

The technical implementation is actually quite simple; I implement the Model-View-Viewmodel pattern, which is used in WPF, using a simple wrapper class for the action links (i.e., commands in MVVM). Once I made that link, the rest was child's play.

Next to this, I also created some helper extensions, to make the code a little easier on the eyes.

I also think that by using this pattern, we should be able to implement a winforms/WPF app using the same controller. Anybody who is willing to send me a git patch of a WPF application using this controller: please do !!!

P.S.: This also makes the actionlinks testable in an easy way; another responsibility that has been taken away from the view !!!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here