部分视图表单将不会使用 Bootstrap 模式提交答案

【问题标题】：Partial View Form will not submit using Bootstrap Modal部分视图表单将不会使用 Bootstrap 模式提交
【发布时间】：2018-06-15 23:49:09
【问题描述】：

这是打开模态框的按钮（有效）：

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

这里是模态：

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

这是部分视图更新：

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

所以当我点击按钮时，它会按原样打开模式。当我单击“下一步>>”按钮时，该按钮是表单上的提交按钮。 没有回发，没有提交表单...什么也没有发生。

我不确定为什么这不起作用...谁能指出我做错了什么？如果您需要更多信息，请告诉我。

提前致谢。

更新：正如 Chris 指出的那样，我尝试删除 Section 脚本（因为它已经在视图中），但它仍然没有提交。

【问题讨论】：

您的代码中没有任何内容可以阻止此操作。虽然，FWIW，你不能在局部视图中实现一个部分。不过，这不应该引起任何问题；它只是不包含您的验证脚本。
您是否启用了客户端验证？可能不会阻止表单提交？
好线索，我在部分视图@Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName) 的下拉列表下方添加了此消息，并收到此消息：项目类型名称必须至少 2 个字符长且不超过 250字符。 这是验证消息。我将尝试从这里解决更多问题。好指针。

标签： c# asp.net-mvc html bootstrap-modal client-side-validation

【解决方案1】：

当然，答案很简单。我找到了这个页面：ASP .NET MVC Disable Client Side Validation at Per-Field Level

这让我得到了Vsevolod 好心指出的答案。在客户端启用验证。我之前没有输出消息所以我不知道。当我添加时：

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

到我能够看到消息的表单：

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

我的下拉列表是通过这种方法填充的：get.getItemTypes(false) 如果为 true，则返回 Names，如果为 false，则返回 Numbers(ids)。 id 是 1-9，只有一个数字。我需要 2 个字符来验证。因此它没有提交。

顶部链接提出的我的解决方案：

@{ 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); }

出于某种原因，即使我更改了方法 get.getItemTypes(false) 以返回名称（发送为 true），验证仍然无法正常工作，因此我不得不将其关闭并重新打开。

感谢大家的帮助。

【讨论】：

【解决方案2】：

这对我有帮助：

尝试添加

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

到您的提交。那应该关闭它并允许您提交数据。

在bootstraps documentation 中查看这个.modal('toggle')。

【讨论】：