62

I am looking for the most standard way to achieve modal dialogs in ASP.NET MVC.

An example of what I am trying to do is when I select an item from my "list" page, I want the "details" page to be a popup over the list and NOT a new page. I'm not looking for a hack. I want it to be a solution that follows the ASP.NET MVC pattern. I would also prefer not stepping outside jQuery and ASP.NET Ajax (no plugins UNLESS it is emerging as a best practice).

2

3 Answers 3

37

The jQuery UI library has a dialog widget that I use for things like this. While it's a plugin, IMO, the best practice is simply not rolling your own dialog widget.

http://jqueryui.com/demos/dialog/

20

Lunchy's dialog suggestion is nice. Just make an ajax request to your controller action and have the action return what you want to display, like a partial view with some formatting html. Then, put that html into your dialog, or whatever you plan to display, and show it.

4
  • I think I understand what you are saying. What would the "return" look like for the action method? May 14, 2009 at 2:50
  • It looks just like any other action, your view just has some html to format the details. Then you use javascript/jQuery to display the html rendered either in a small window, or <div> or the dialog suggested.
    – scottm
    May 14, 2009 at 3:21
  • 3
    Here is an example that show how to load external content into a jQuery dialog. christopherchin.com/blog/index.cfm/2009/3/19/…
    – Andy T
    Mar 13, 2010 at 3:27
  • What is the Lunchy's dialog you are referring to?
    – Kappacake
    Feb 17, 2021 at 15:31
6

One of the things that goes hand in hand with MVC is RESTful urls. That being the case the "standard" way of handling this would be to have the details pull up a new page with it's own, RESTful (and bookmarkable) URL instead of flying a dialog over the page. You could certainly do a "details preview" dialog within the context of the list, but if you're going to interact with the details, I'd consider doing a full request and get the details on it's own page.

6
  • 2
    That is just not what my clients usually want. They want to be able to edit the details in a modal popup over the grid and not be redirected to another 'edit' page.
    – Merritt
    Mar 4, 2011 at 21:11
  • 1
    @Merritt - I'd say it depends on how many things are in the interface. Dialogs, IMO, should be fairly small so if the number of details are managable in a dialog it's probably ok. It should still work, though, through a full request cycle to be able to support accessibility. This is the direction I've used for small forms.
    – tvanfosson
    Mar 4, 2011 at 21:23
  • Accessiblity... would you frown on using AJAX to do the postback for the modal form? I guess this really becomes an issue of who your client base is and what they are looking for.
    – Merritt
    Mar 23, 2011 at 20:33
  • @Merritt - no, but I would use progressive enhancement techniques. Design for it to work without javascript, then layer the javascript functionality on top of that to improve the interface for the vast majority of users. I'm currently working on some convention-based framework extensions that would allow you to have fully-accessible jQuery Tabs-based interfaces along those lines.
    – tvanfosson
    Mar 23, 2011 at 21:04
  • 1
    @Kirk This answer is pretty old and many things have changed over the years, but I still think it's best practice to have a details link that resolves to a full page to support search/SEO/accessibility. Whether you then use that page to populate a pop-up dialog depends on the application. I think whether you use a dialog for viewing/editing details is dependent on the complexity of the view/edit interface. I don't think you do the user any favors by having a dialog that's the same size/complexity as normal page.
    – tvanfosson
    Jun 17, 2013 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.