Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've used the dialog plugin from jQuery UI () before, which I've found works well. I normally get the links to open up in an iframe within the popup, which avoids the problem you describe where the jQuery validation events don't get hooked up because the page gets loaded dynamically - both client side and server side validation should work as normal, just within this iframe.</p> <p>The nice thing about this technique is that you can generate action links as normal within your index page, just add a class of popup to them e.g.</p> <pre><code>@Html.ActionLink("Edit", "Edit", new { id = Model.Id }, new { @class = "popup" }) </code></pre> <p>Then, you can get these links to open in a dialog iframe with jQuery like:</p> <pre><code>$("a.popup").click(function(e) { e.preventDefault(); $("&lt;iframe /&gt;").attr("src", $(this).attr("href") + "?popup=true").dialog({ show: "fadeIn", modal: true, width: 300, height: 300}); }); </code></pre> <p>This basically looks for popup links, cancels the default behaviour (page navigation) and opens that URL in a iframe within a popup, adding a querystring to identify that the page is within a popup. The reason for this querystring and knowing its a popup allows you to load a different layout page within the view, maybe through an action filter e.g.:</p> <pre><code>public class Popup : ActionFilterAttribute { public override void OnActionExecuted(ActionExecutedContext filterContext) { if (filterContext.Result != null &amp;&amp; filterContext.Result is ViewResult &amp;&amp; filterContext.RequestContext.HttpContext.Request["popup"] == "true") (filterContext.Result as ViewResult).MasterName = "~/Views/Shared/_PopupLayout.cshtml"; } } </code></pre> <p>This means you can easily apply this attribute to classes where you want action methods to apply. This method also means if you change your mind about the implementation in the future (ie removing the popups) then you can easily remove the jQuery that cancels the clicks and your app will continue to function as a normal MVC app with separate pages, and all the navigation/validation etc will 'just work'.</p> <p>I hope that all makes sense and helps.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload