Rendering A Modal Dialog with ASP.Net MVC

One of the most requested ‘Web 2.0’ features by users is the ability to pop up a “modal” dialog to the user.  There are a couple ways you could implement this functionality, but I’m going to show you a really easy way to do it with ASP.Net MVC.  (Hat tip to Jon Kruger for sharing this idea with me.)

Start with a very simple controller action:

Nothing spectacular going on here.  The “RandomModal” string points to a ASCX file that is in the views directory, and the second parameter is the model that you want the partial view to render:

And finally, on the view that is hosting the modal dialog there is a chunk of javascript that makes the call, throws the returned DOM elements into a parent div, and displays the div as a dialog:

Another place you could implement this pattern is on a grid.  A common request is to click on a row and view more detailed information about the record.  To implement this all you’d need to do is stash a row identifier on the html row, and pass that back to the controller on click.  Something like this:

The complete solution with this code can be downloaded here: