ASP.Net MVC 3 Jquery UI对话框表单

Question

我正在尝试创建一个弹出对话框,允许用户填写表单.当他们点击提交时,我想提交表单.我想出了如何制作模态弹出窗口,但无法弄清楚如何在单击表单时提交表单.有谁知道如何做到这一点？

@using (Html.BeginForm())
{
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

            <p>
                <input type="submit" value="Log On" />
            </p>
        </fieldset>
    </div>
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog-form").dialog({
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

Answer 1

您需要确保控制器中有一个有效的POST方法,以便提交表单.只要您不希望对话框的提交按钮提交表单,您的表单就会有效.如果是这种情况,那么您需要为表单提供一个ID并从您的函数调用提交对话框"提交"按钮.

<div id="dialog-form">
@using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "LogOnForm" })) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

            <p>
                <input type="submit" value="Log On" style="display:none;" />
            </p>
        </fieldset>
    </div>
}
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog-form").dialog({
            modal: true,
            buttons: {
                "Submit": function () {
                    $("#LogOnForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>