Rendering A Modal Dialog with ASP.Net MVC

Posted about 5 years ago on June 15, 2009

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:

controlleraction

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:

ascx

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:

javascriptcallingaction

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:

postforrowdetail

The complete solution with this code can be downloaded here:

Comments

Steven Harman writes...

an attribute to hold the id of the thing being rendered... really? are we back in the world where web standards and compliance with them suddenly don't matter any more?

For shame Mr. Horn, for shame! :)

June 15, 2009

tscheffel writes...

Just downloaded, unzipped and successfully launched the MVC modal web app. The modal popup works like a charm when using the VS development server but not when switching to the IIS server (the app launches but nothing visible happens when the modal link is clicked).

Any ideas why? Could it be IE's popup blocker?

Thanks & take care.

Troy S.

March 04, 2010

New Comment