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.

There's nothing in your code here that would prevent this from working. Although, FWIW, you can't implement a section inside a partial view. That shouldn't cause any problems, though; it just won't include your validation scripts. — Chris Pratt, Nov 18 '14 at 18:27
Do you have client-side validation enabled? May be it doesn't prevent the form submission? — Vsevolod Goloviznin, Nov 18 '14 at 18:51
Good clue, I added this below the drop down list in my partial view `@Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)` and received this message: **The Item Type Name must be at least 2 characters long and no longer than 250 characters.** which is the validation message. I will try and troubleshoot a little more from here. Good pointer. — Termato, Nov 18 '14 at 18:55

score 0 · Accepted Answer · edited May 23 '17 at 11:43

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.

score -1 · Answer 2 · edited Jun 15 '18 at 15:49

-1

This is what helped me:

Try adding

data-toggle="modal" data-target="#modal-addItem-@sectionCount-@rowCount"

to your submit. That should close it and allow your data to submit.

Look at this .modal('toggle') in bootstraps documentation.

edited Jun 15 '18 at 15:49

pushkin

9,575
15
51
95

answered Jun 15 '18 at 15:31

James G

19
2

Partial View Form will not submit using Bootstrap Modal

2 Answers2