Technology comes in waves. Over the years we have been drowned by several waves of web development technologies from MS. ASP, ASP.NET, ASP.NET Ajax and now there is ASP.MVC. A new wave does bring nice new things but also has the tendency to wash away the things brought by the one before. Also for the users of the software we create. Thanks to partial postbacks ASP.NET Ajax brought the user a far more pleasant view in the browser. Not every click resulted in a full screen refresh with its disturbing flickering. And the possibilities of javascript gave more room for screen candy. ASP.MVC, the next wave, still does care a lot about the possibilities of script but partial rendering has moved somewhat to the background of attention. Most MVC documentation and examples describe a full rebuild of the page. Bringing the user back to the well known restless browser screens.

But ASP.MVC is full of Ajax possibilities. It is even easier to build ajax style apps than in ASP.NET ajax. In this post I will first present the basics and give some hints to create a popup screen. Not one in a new window but one which can easily communicate with the document which created it.

Partial views

In MVC the basics for a partial screen update are present in the form of partial views. They are regular ascx usercontrols.



Inside straightforward MVC scaffolded markup, including the possibility to use a strong typed model


















More on the ActionLink later on. This is My Model

public class MyModel

{

public MyModel()

{

MyProperty = "This is my model";

}



private readonly List<span style="color:blue;"string/span> myList = new List<span style="color:blue;"string/span>() {"One", "Two", "Three"};

public string MyProperty { get; private set; }

public IEnumerable<span style="color:blue;"string/span> MyList

{

get

{

return myList;

}

}

}


You assemble a page from usercontrols using the renderpartial method of the html extension class














The ajax stuff needs extra script libraries. Include these in your masterfile
















Async postbacks

The code so far produces this result.





Three hyperlinks, as dictated by my model. As they are created by the ajax-, and not the html-, extension class they will do an async partial postback.

These requests are also caught by the home controller.

public class HomeController : Controller

{

public ActionResult Partial(string routeValue)

{

return null;

}


What the action returns does not matter yet, for now I just return null. The reason it does not matter yet is because the actionlink has not defined a target to receive the result of the action.

An ajax actionlink has as obligatory parameter an AjaxOptions object. So far I had created an empty object. A list of the properties of the AjaxOptions class is shown by Intellisense





The updatetargetId is the id of any DOM element. Like an ordinary div. On the main page I will add an empty div as placeholder for the result of the async postback
















(It would be tempting to code the div as , but that will spoil the trick.)

This div is going to be the updatetarget for the ajax action link




Now the controller has a target for its result. I create another simple partial view to return





On you selected


This view uses another simple model

public class MySelection

{

public MySelection(string selectedValue)

{

SelectedValue = selectedValue;

SelectedTime = DateTime.Now.ToLongTimeString();

}



public string SelectedValue { get; set; }

public string SelectedTime { get; private set;}



}


This partial view is passed the model and will be the result of the action

public class HomeController : Controller

{

public ActionResult Partial(string routeValue)

{

return View("Selected",new MySelection(routeValue));

}


The result of the partial postback is now that the div will be filled by the contents of the usercontrol.



That is all there is to the basics to create aync postbacks and do partial rendering. All pretty straightforward. And with loads of possibilities to enrichen behavior.

Creating a pop up

As a small example I will now present the basics of a (not the) way to do a popup screen. Creating a popup in a new browser window has quite a few drawbacks. Your application loses control of the window and communicating between the two DOM&rsquo;s in the separate windows is no fun either. It is so much easier to have your popup and its contents in the same document.

Plain old HTML (POH ?) has the possibility to render itself in layers. Each layer has it&rsquo;s own z-index. I will now add the target of the async postback as a new layer to the master page













My MVC Application






The z-index attribute makes it a new layer. A new layer in the same document. The position:absolute attribute ensures independent positioning from the underlying layer. To see the effect the resulting partial view of the async postback is decorated with a style.

.popup

{

background-color:Transparent;

border-style: double;

border-width: thick;

border-color:Red;

}



Also a button is added to the popup. Clicking the button fires a script statement to close the popup. It does that by clearing the innerHTML of the target div







On you selected






This results in a transparent popup which lies on top of the originating page and can be closed by clicking the button.













By far not complete but the basics are there. I will leave it up to you (or better your html artist, I&rsquo;m not good at it either&hellip;) for the further visual candy.

What I hope to have demonstrated is how easy and straightforward it is to add ajax functionality to an mvc application. Do your end users a favor and use it.




More...