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).

SteveC
  • 15,808
  • 23
  • 102
  • 173
Brian David Berman
  • 7,514
  • 26
  • 77
  • 144

3 Answers3

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/

Casey Williams
  • 4,045
  • 2
  • 24
  • 15
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.

scottm
  • 27,829
  • 22
  • 107
  • 159
  • I think I understand what you are saying. What would the "return" look like for the action method? – Brian David Berman May 14 '09 at 02: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
    or the dialog suggested.
     – scottm May 14 '09 at 03:21
  • 3
    Here is an example that show how to load external content into a jQuery dialog. http://www.christopherchin.com/blog/index.cfm/2009/3/19/jQuery--ajax-dialog--load-external-content – Andy T Mar 13 '10 at 03:27
  • What is the Lunchy's dialog you are referring to? – Kappacake Feb 17 '21 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.

tvanfosson
  • 524,688
  • 99
  • 697
  • 795
  • 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 04 '11 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 04 '11 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 '11 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 '11 at 21:04
  • This sounds like dogma that has nothing to do with the situation. First - users don't care about some high and mighty design choice. They want usability. Second - there is nothing that would prevent the underlying implementation from being restful. – Kirk Jun 17 '13 at 19:35
  • 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 '13 at 19:45