CODEWITHSUNDEEP
asp.net-mvcpopup
advapi
advapi

Reputation: 3907

showing a view as popup in mvc4 pattern

I've a view rendered with Razor engine and I need to open at a button click a popup to insert a new user (i've already got my view/controller for the InsertUser)

I wish to know what the correct workflow to perform this, if I open it with jQuery how do I tell after the insert to close the view? my controller doesn't know it's on a popup and I've not seen any CloseResult as ActionResult... I'm using also KendoUI, I've seen it has the Window control....this as well won't help me on this.....what's best to use for opening a popup?

Thanks

Upvotes: 0

Views: 1791

Answers (1)

shenku
shenku

Reputation: 12468

Try reading this article on progressive enhancement, while you might not want to do it progressivly the article contains all the little recipes you will need to do it.

Your get action would be like this:

[HttpGet]
public ActionResult ContactUs()
{
     return PartialView("_ContactUs");
}

Your post like this:

[HttpPost]
public ActionResult ContactUs(ContactUsInput input)
{ 
    if (!ModelState.IsValid)
    { 
            return PartialView("_ContactUs", input);
    }       

    return PartialView("_ThanksForFeedback", input);
}

The front end something like this:

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

<script type="text/javascript">

    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this).attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    modal: true
                })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

<a class="openDialog" data-dialog-id="emailDialog"
 data-dialog-title="Contact Us" href="/Home/ContactUs">Contact Us</a>

Upvotes: 1

Related Questions