MVC 4 按钮在部分视图中不起作用 - 混淆 Html.beginForm 的使用和发布位置

Question

我的局部视图中有一个按钮不起作用，我不知道为什么。我对视图和局部视图的布局有一般性问题，但主要是我希望我的按钮能够正常工作。

这是我的主要 cshtml 标记：

@model IMecheAdmin.Models.InterviewManagement
@{
    ViewBag.Title = "InterviewManagementPage";
}

    <div style="padding: 10px">
        <h4>
            Interview Management Page</h4>
        <table>
            <tr>
                <td>
                    @Html.Label("Select a membership type:")
                </td>
                <td>
                    @Html.DropDownListFor(m => m.SelectedMembershipType,
new SelectList(Model.InterviewTypes, "InterviewTypeID", "InterviewTypeName"), new { id = "lstMembershipType", onchange = "getGridValues();" })
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        function getGridValues() {
            var interviewTypeID = $('#lstMembershipType').val();
            $.ajax({
                url: '@Url.Action("getGridData", "InterviewManagement")',
                data: { interviewTypeID: interviewTypeID },
                type: 'POST',
                success: function (data) {
                    $('#gridData').html(data);
                }
            });
        }
    </script>
    <div id="gridData" style="padding: 10px">
        @{

    Html.RenderAction("getGridData");
        }
    </div>

我的 RenderAction 用于渲染我的局部视图。它有自己的部分 actionresult 方法，称为 getGridData。

Html.RenderAction("getGridData");

目前，我的开始表单块位于我的部分视图 Partial_InterviewManageGrid.cshtml 中。如下图：

@model IMecheAdmin.Models.InterviewManagement

@using (Html.BeginForm("SubmittedInterviews", "InterviewManagement", FormMethod.Post))
{
    if (Model.InterviewDates.Count > 0)
    {

        for (int i = 0; i < Model.InterviewSchedules.Count; i++)
        {
        @Html.Label("Date of interview:")
        @Html.Label(Model.InterviewDates[i].DateOfInterview.ToString())
        <table>
            <tr>
                <td>
                    Site
                </td>
                <td>
                    Location
                </td>
                <td>
                    Chair
                </td>
                <td>
                    Cofacilitator
                </td>
                <td>
                    Facilitator
                </td>
                <td>
                    Observer
                </td>
                <td>
                    Preference
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                    @foreach (var person in Model.InterviewDates[i].Interviewers)
                    {
                        @Html.RadioButtonFor(m => m.InterviewSchedules[i].Chair, Model.InterviewDates[i].Interviewers.Select(p => p.InterviewerName).ToList(), new { @style = "width:auto;background:none;border:none" })
                        @Html.Raw(person.InterviewerName)  
                        <br />
                    }
                </td>
                <td>
                    @foreach (var person in Model.InterviewDates[i].Interviewers)
                    {
                        @Html.RadioButtonFor(m => m.InterviewSchedules[i].Cofacilitator, Model.InterviewDates[i].Interviewers.Select(p => p.InterviewerName).ToList(), new { @style = "width:auto;background:none;border:none" })
                        @Html.Raw(person.InterviewerName)  
                        <br />
                    }
                </td>
                <td>
                    @foreach (var person in Model.InterviewDates[i].Interviewers)
                    {
                        @Html.RadioButtonFor(m => m.InterviewSchedules[i].Facilitator, Model.InterviewDates[i].Interviewers.Select(p => p.InterviewerName).ToList(), new { @style = "width:auto;background:none;border:none" })
                        @Html.Raw(person.InterviewerName)  
                        <br />
                    }
                </td>
                <td>
                    @foreach (var person in Model.InterviewDates[i].Interviewers)
                    {
                        @Html.RadioButtonFor(m => m.InterviewSchedules[i].Observer, Model.InterviewDates[i].Interviewers.Select(p => p.InterviewerName).ToList(), new { @style = "width:auto;background:none;border:none" })
                        @Html.Raw(person.InterviewerName)  
                        <br />
                    }
                </td>
            </tr>
        </table>
        <br />
        }

        if (Model.InterviewDates.Count > 0)
        {
        <input type="button" value="Confirm interview"/>

        }

        <hr />
    }
}

我现在有一个非常基本的 ActionResult 方法，断点没有被命中，我的浏览器没有显示任何 GET 或 POST。

 [HttpPost]
        public ActionResult SubmittedInterviews(InterviewManagement InterviewManagement)
        {
            return View(InterviewManagement);
        }

• 我的 html.beginform 应该在视图中还是部分视图中？
• 如何让它转到这个 actionResult？目前没有名为 SubmittedInterviews 的视图。只是我控制器中的方法。

Answer 1

由于在主页面之后加载了局部视图，因此按钮单击事件不会与按钮绑定。要使其正常工作，您需要将点击事件附加到文档中。
为您的按钮提供一个可供选择的类：

<input type="button" value="Confirm interview" class="btnConfirm"/>

然后在你的主视图上

$(document).on('click', '.btnConfirm', function(){
    $.ajax({
        url: '@Url.Action("Action", "Controller")',
        type: 'POST',
        cache: false,
        async: true,
        data: $('form').serialize(),
        success: function(result){
            //do something
        }
     });
});