将数据从 Dialog 提交到控制器

Question

我有一个视图，一个按钮从中调用一个对话框 Bootstrap。 在这个对话框中，我渲染了这个视图：

 @using (Ajax.BeginForm("Create", new { @class = "form-control", id="form-create"  }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "wrapperViews" }))
{

@Html.AntiForgeryToken()
@Html.ValidationSummary(false)
<hr />
<div class="form-horizontal">
    <div id="divParamType" style="display: none;"></div>
    <div class="form-group">
        @Html.LabelFor(x => Model.PhaseID, htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-3">
            @Html.DropDownListFor(x => Model.PhaseID,
                new SelectList(Model.Phases, "Value", "Text"), "", new { @class = "form-control", id = "Phase" })
            @Html.ValidationMessageFor(x => Model.PhaseID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(x => Model.ParamID, "Description", htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-3">
            @Html.DropDownListFor(x => Model.ParamID,
                  new SelectList(Model.ProcessIDListParams, "Value", "Text"), "", new { @class = "form-control", id = "ProcessParam" })
            @Html.ValidationMessageFor(x => Model.ParamID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group" id="forList">
        @Html.LabelFor(x => Model.CodeValue, htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-3">
            @Html.DropDownListFor(x => Model.CodeValue,
            new SelectList(Model.PPvalues, "Value", "Text"), "", new { @class = "form-control", id = "PPValue" })
            @Html.ValidationMessageFor(x => Model.CodeValue, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group" id="forOtherType">
        @Html.LabelFor(x => Model.CodeValue, htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-2">
            @Html.TextBoxFor(x => Model.CodeValue, new { @class = "form-control", id = "PPValTextBox" })
            @Html.ValidationMessageFor(x => Model.CodeValue, "", new { @class = "text-danger" })
            <div id="idTypeValue1"></div>
        </div>
        @Html.Label("<=", htmlAttributes: new { @class = "control-label col-md-1", id = "SecondValueLabel" })
        <div class="col-md-2">
            @Html.TextBoxFor(x => Model.SecondValue, new { @class = "form-control", id = "SecondValue" })
            @Html.ValidationMessageFor(x => Model.SecondValue, "", new { @class = "text-danger" })
            <div id="idTypeValue2"></div>
        </div>
    </div>
}

致电@Html.Action("Create", "Search")

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="dialog">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h5 class="modal-title">Add Parameter</h5>
        </div>
        <div class="modal-body">
            @Html.Action("Create", "Search")
            <div id="myModalContent"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <input type="submit" id="bntSubmit" , name="name" class="btn btn-primary" value="Save" />

        </div>
    </div>
</div>

到目前为止一切顺利，我的对话框打开并显示了视图。

但是当我点击保存按钮时，我的 ajax 请求失败，因为即使我序列化了表单，我也无法传递数据。表单 id 在 View 上是“form-create”：

@using (Ajax.BeginForm("Create", new { @class = "form-control", id="form-create"  }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "wrapperViews" }))

但是当 serialize() 的结果为空时。

 $(document).ready(function () {
    $('#bntSubmit').click(function (e) {
        debugger;
        e.preventDefault();
        var form = $("#form-create").serialize();
        debugger;
        $.ajax({
            type: "POST",
            url: '/Search/Create',
            data: form,
            success: function () {
                $('#myModal').modal("hide");
            },
            error: function () {
                alert("Dynamic content load failed.");
            }
        });

    });

});

我尝试使用模态 id 更改 id 形式，但没有任何改变。 我为此苦苦挣扎了一天，但还没有解决方案。

任何帮助将不胜感激。

Answer 1

首先，确保在布局中包含“jquery.unobtrusive-ajax.min.js”，没有它“Ajax.Beginform”将无法工作。

如果这不起作用，请尝试提交表单。 通过使用“Ajax.Beginform”，您应该只绑定：

$(function () {
    $('#bntSubmit').on('click', function (e) {
        e.preventDefault();
        $('form-create').submit();
    });
});

然后使用“AjaxOptions”对象中的“OnSuccess”事件来完成剩下的工作。