Best practice for modal window in Web Forms application

Question

On the list page, clicking on one of the elements displays the details in a modal pop-up window that will have its own functionality (for example, checking, updating, etc.). What is the best practice to implement this (without looking for a hack). Here I see two options:

• Hide the markup of information until at that moment the list button is pressed, execute the ajax request to get the details and fill in and show the information section.

• Separate the details section as a separate page. In the list item, click, show this page in a modal window (is this possible?) This is similar to the IFrame approach and sounds like an old school approach.

What are the pros and cons of these approaches, or are there other ways to do this? You should not return a back link to a list item.

Edit: Any other opinions are appreciated.

Answer 1

I am doing option 1 now, it is very lightweight, and all you need is ajax post (jQuery or UpdatePanel) and some modal ones (I use jQery user interface). This is simpler than a full page post, plus you have the added advantage that you can manipulate the page you are in as part of the result.

For example, I have grids on the page, the editor is modal, usually with more details, when you click "Save", the grid is updated. I put this in a universal template solution, and it’s very easy to work with, and it is as light as web forms that can be in this situation, so I’m all in favor of option 1.

Here's an example approach that has your modal control inherited from UpdatePanel (code compressed for brevity):

public class Modal : UpdatePanel { private bool? _show; public string Title { get { return ViewState.Get("Title", string.Empty); } set { ViewState.Set("Title", value); } } public string SaveButtonText { get { return ViewState.Get("SaveButtonText", "Save"); } set { ViewState.Set("SaveButtonText", value); } } protected override void OnPreRender(EventArgs e) { if (_show.HasValue) RegScript(_show.Value); base.OnPreRender(e); } public new Modal Update() { base.Update();return this;} public Modal Show() { _show = true; return this; } public Modal Hide() { _show = false; return this; } private void RegScript(bool show) { const string scriptShow = "$(function() {{ modal('{0}','{1}','{2}'); }});"; ScriptManager.RegisterStartupScript(this, typeof (Modal), ClientID + (show ? "s" : "h"), string.Format(scriptShow, ClientID, Title, SaveButtonText), true); } } 

In javascript:

 function modal(id, mTitle, saveText) { var btns = {}; btns[saveText || "Save"] = function() { $(this).find("input[id$=MySaveButton]").click(); }; btns.Close = function() { $(this).dialog("close"); }; return $("#" + id).dialog('destroy').dialog({ title: mTitle, modal: true, width: (width || '650') + 'px', resizable: false, buttons: btns }).parent().appendTo($("form:first")); } 

Then in your markup (now I can’t think of a better name than MyControls, sorry!):

 <MyControls:Modal ID="MyPanel" runat="server" UpdateMode="Conditional" Title="Details"> //Any Controls here, ListView, whatever <asp:Button ID="MySaveButton" runat="server" OnClick="DoSomething" /> </MyControls:Modal> 

In your codebehind pages you can:

 MyPanel.Update().Show(); 

Mark your approach, I will have a jQuery action that sets the input field and presses the button in modal mode, invoking the update panel for postback and in this code that loads data into any control in modal, just call MyPanel.Update.Show(); , and it will appear on the screen when the ajax request of the update panel appears.

The example above using jQuery UI will have 2 buttons on the modal, one to close and do nothing, one to save, click on MySaveButton inside the modal, and you can do whatever you want on the server by calling MyPanel.Hide() if successful, or put an error message in the panel, if the verification fails, just do not call MyModal.Hide() , and after the postback, it will remain with the user.