0

In my asp.net mvc 5 application, every CRUD operation was working fine without any partial views. The Index.cshtml used to show all employees with the course in which they are selected. I needed to add a dropdown filter so I can filter employees by selecting the course from the dropdown.

I added a courses dropdown in my Index.cshtml and on selection change, I initiated an ajax call to bring the partial view. In my partial view, I am iterating over resultset and in each line I have an edit button which opens up the modal for that specific row. My issue is, when I moved the code from my main view to the partial view, the edit form stopped working. There's no error on console but the form won't submit.

This is the code inside my partial view:

<table class="display" id="dtAttendees">
        <thead>
        <tr>
            <th>ID</th>
            <th>Attendee Name</th>
            <th>Course</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        @foreach (AttendeeUserTbl attendee in Model)
        {
            <tr>
                <td>@attendee.AttendeeId</td>
                <td>@attendee.AttendeeName</td>
                <td>@attendee.CourseName</td>
                <td>
                    <a href="#" class="btn btn-icon-only green-original" title="Edit" data-toggle="modal" data-target="#attendeeIdss@(attendee.AttendeeId)"><i class="fa fa-edit"></i></a>
                </td>
            </tr>

            <!--Edit Modal start-->
            <div id="attendeeIdss@(attendee.AttendeeId)" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Attendee Management</h4>
                        </div>

                        @using (Html.BeginForm("SaveAttendee", "User", FormMethod.Post, new {@class="form-horizontal"}))
                        {
                            @Html.HiddenFor(p => attendee.AttendeeId)
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label class="control-label">Attendee Name</label>
                                    @Html.TextBoxFor(p => attendee.AttendeeName, new { @class = "form-control", id = "txtEditAttendeeName" + attendee.AttendeeId, placeholder = "enter attendee name..", data_validation = "required" })
                                </div>                                        
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">Update Attendee</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
        </tbody>
    </table>

It generates the correct modals when I click on edit in any row but it does not submits the form to /User/SaveAttendee. The same code works when i move it to my main parent view.

As there are no errors anywhere and it works with the main view, I'm not being able to understand the behavior. Can you please guide me or tell me what I'm doing wrong in my partial view? Will be really appreciable.

Thank you

Ali Baig
  • 3,819
  • 4
  • 34
  • 47
  • First you have invalid html (a `
    `is not a valid child of ``. Next you cannot generate form controls for a collection using a `foreach` loop (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943)) so nothing would bind correctly is you submitted the form. But why in the world would you generate form for each item in the collection.
     –  Jun 30 '16 at 02:44
  • @StephenMuecke Yes, automatically places all the
    elements before the table tag. I never wanted to use jquery to set the modal data and show/hide modals on clicks. It actually works when I put this code outside of the partial view?
     – Ali Baig Jun 30 '16 at 02:50

0 Answers0