Partial View Form will not submit using Bootstrap Modal

Question

Here is the button to open the modal box (which works):

<button data-toggle="modal" data-target="#modal-addItem-@sectionCount-@rowCount" class="btn btn-success">Add New List Item</button>

Here is the modal:

<div id="modal-addItem-@sectionCount-@rowCount" role="dialog" aria-hidden="true" aria-labelledby="modal-addItem-@sectionCount-@rowCount" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Added List Item</h4>
            </div>
            @Html.Partial("_SelectItemType", new ListItemsViewModel { listID = theLists.listID })
        </div>
    </div>
</div>

Here is that partial view Updated:

@using (Html.BeginForm("SelectItemType", "ListItems", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.listID)

    <div class="modal-body">
        <div class="form-group">
            <b class="control-label col-md-4">Select List Item Type:</b>
            <div class="col-md-8">
                @Html.DropDownListFor(model => model.ItemTypes.itemTypeName, DropDown.GeneralListCreator(get.getItemTypes(true), get.getItemTypes(false))) //This gets a list of item types
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn btn-default" data-dismiss="modal">Close</a>
        <input type="submit" value="Next Step &raquo;" class="btn btn-primary" />
    </div>
}

So when I click on the button, it opens up the modal as it should. When I click on the "Next Step >>" button which is the submit button on the form. No post back, no form submit...nothing happens.

I'm not sure why this wont work...can anyone please point out what I'm doing wrong? Please let me know if you need more information.

Thanks in advance.

---

UPDATE: I tried removing the Section script (because it's already in the view), as Chris pointed out but it is still not submitting.

Answer 1

So the answer was simple, of course. I found this page: ASP .NET MVC Disable Client Side Validation at Per-Field Level

It lead me right to the answer that Vsevolod kindly pointed out. Validation being enabled on the client side. I wasn't outputting a message before so I didn't know. When I added:

@Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)

to the form I was able to see the message:

The Item Type Name must be at least 2 characters long and no longer than 250 characters.

My drop down list was being populated by this method: get.getItemTypes(false) which returned Names if true and Numbers(ids) if false. The id's were 1-9 and were only a SINGLE digit. I required 2 characters to validate. Therefore it was not submitting.

My solution as proposed by the link at the top:

@{ Html.EnableClientValidation(false); }
@Html.DropDownListFor(model => model.ItemTypes.itemTypeName, DropDown.GeneralListCreator(get.getItemTypes(true), get.getItemTypes(true)))
@Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)
@{ Html.EnableClientValidation(true); }

For some reason, even once I changed the method get.getItemTypes(false) to return the names (send in true), the validation was still not working properly so I had to turn it off and back on.

Thank you everyone for the help.