Wednesday, April 02, 2014

mvc partial view popup dialog form

required javascript:

$(document).ready(function () {
    $(".popupformContainer").dialog({
        height: 600,
        width: 300,
        autoOpen: false,
        modal: true,
        open: function (event, ui) {
            $(this).load("/controllername/actionname", { "parameter": $(this).data("parametervalue") }, function (html) {
            });
        },
        close: function (event, ui) {
            event.preventDefault();
            alert("closing");
        },
        buttons: {
            text: "提交", click: function (event) {
                event.preventDefault();
                $.validator.unobtrusive.parse("#PopupForm");
                $("#PopupForm").validate();
                if ($("#PopupForm").valid()) {
                    $("#PopupForm").submit();
                }
                else {
                    event.preventDefault();
                    alert("invalid");
                }
            }
        }
    });

    $(".btnOpenPopupForm").click(function () {
        $(".popupformContainer").data("parameter", $(this).attr("value")).dialog("open");
    });


});
in the parent view you need the button to open popup with class "btnOpenPopupForm" and an empty div with class "popupformContainer" for hosting the popup
in the partial view for the popup all you need is the form and all the form elements, the buttons are automatically generated unless you want some custom buttons

No comments: