Question

我有一个View，从中可以通过按钮调用对话框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>

到目前为止，我的对话框打开并显示视图。

但是，当我单击Save按钮时，我的ajax请求失败，因为即使序列化了表单，我也无法传递数据。表单ID在视图上是“ 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”事件来完成其余工作。

将对话框中的数据提交到控制器

1 个答案: