MVC 4 button not working in partial view - confusion over use of Html.beginForm and where am posting

Question

I have a button in my partial view that is not working and I am not sure why. I have general questions for the layout of my view and partial view but mainly I want my button to work.

This is my main cshtml markup:

@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>

My RenderAction is used to render my partial view. It has it's own partial actionresult method called getGridData.

Html.RenderAction("getGridData");

At the moment my begin form block is in my partial view Partial_InterviewManageGrid.cshtml. Shown below:

@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 />
    }
}

I have an ActionResult method that is very basic right now, the breakpoint doesn't get hit for this and my browser doesn't show any GETs or POSTs.

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

• Should my html.beginform be in the view or partial view?
• How do I make it go to this actionResult? There is no view called SubmittedInterviews right now. Just the method in my controller.

Answer 1

Since a partial view is loaded after the main page, the button click event isn't tied to the button. To get it to work you need to attach your click event to the document.
Give your button a class to select on:

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

then on your main view

$(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
        }
     });
});