Twitter bootstrap 无法在ASP.NET MVC中提交模式表单

我有一个模式表单来添加记录。但是，单击submit按钮完全不起任何作用。这是一个局部视图，单击父视图上的“添加”按钮可以很好地加载它。但是，部分视图上的表单不提交。我已经审阅了一些相关的帖子。不过，到目前为止，我还没有下定决心。这是密码-

@model MyApplication.Models.Cases.CaseViewModels.AddDiseasePhotosViewModel

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>

<div class="modal-dialog">
@using (Html.BeginForm("AddDiseasePhoto", "Cases", FormMethod.Post, new { @id = "frmModal", @name = "frmModal", enctype = "multipart/form-data" }))
{
    <div class="modal-content animated bounceInRight">
        <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>
            <i class="fa fa-laptop modal-icon"></i>
            <h4 class="modal-title">Add Disease Photo</h4>
        </div>
        <div class="modal-body">
            @TempData["SuccessMsg"]

            <div class="form-group">
                <label>Title</label>
                @Html.TextBoxFor(m => m.Title, new { @class="form-control" })
            </div>
            <div class="form-group">
                <label>Description</label>
                @Html.TextAreaFor(m => m.Description, new { @class = "form-control" })
            </div>
            <div class="form-group">
                <label>Upload File</label>
                @Html.TextBoxFor(model => model.PicFileUpload, new { type = "file", id = "file1" })
                @Html.ValidationMessageFor(m => m.PicFileUpload, string.Empty, new { @style = "color:red;" })
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" id="AjaxPost" class="btn btn-primary">Add Photo</button>
        </div>
    </div>
    }
</div>

<script type="text/javascript">
    $(function () {
        $.validator.unobtrusive.parse('#frmModal');
        //Submit button
        var submitButton = $("#AjaxPost");
        var infoForm = $("#frmModal");
        submitButton.click(function () {
            SubmitInfo(infoForm);
        });
    });

    function SubmitInfo(formContainer) {
        $.ajax({
            url: "@Url.Action("AddDiseasePhoto", "Cases")",
            type: 'post',
            data: formContainer.serialize()         
        });
    }        
</script>

@model MyApplication.Models.Cases.CaseViewModels.AddDiseasePhotosViewModel
@使用（Html.BeginForm（“AddDiseasePhoto”，“Cases”，FormMethod.Post，new{@id=“frmModal”，“name=“frmModal”，enctype=“multipart/form data”}））
{
&接近
添加疾病照片
@TempData[“successsg”]
标题
@TextBoxFor（m=>m.Title，新的{@class=“form control”}）
描述
@TextAreaFor（m=>m.Description，新的{@class=“formcontrol”}）
上载文件
@Html.TextBoxFor（model=>model.PicFileUpload，新的{type=“file”，id=“file1”}）
@Html.ValidationMessageFor（m=>m.PicFileUpload，string.Empty，new{@style=“color:red；”}）
添加照片
}
$（函数（）{
$.validator.unobtrusive.parse（'#frmodal'）；
//提交按钮
var submitButton=$（“#AjaxPost”）；
var信息形式=$（“#frmodal”）；
submitButton.单击（函数（）{
SubmitInfo（infoForm）；
});
});
函数SubmitInfo（formContainer）{
$.ajax({
url:“@url.Action”（“AddDiseasePhoto”，“Cases”）”，
键入：“post”，
数据：formContainer.serialize（）
});
}        

请导游。谢谢。

您的“提交”按钮键入的是“按钮”，而不是“提交”。“button”类型的按钮本身不起任何作用，并且不会提交您的表单。将其更改为：

<button type="submit" id="AjaxPost" class="btn btn-primary">Add Photo</button>

添加照片

现在，您似乎正在尝试使用AJAX提交，因此只要您绑定到按钮的click事件处理程序，它就可以在不更改类型的情况下工作，但是您应该始终将HTML设计为不支持JavaScript。然后，不管怎样，它都将提交表单，如果支持JavaScript，它将通过AJAX提交

因为它根本不提交，即使您有JavaScript，只要点击按钮就应该提交，那么您的JavaScript有两个问题：

您没有正确绑定到该元素上的单击事件处理程序

页面上出现了一些JavaScript错误，导致JavaScript无法运行

---

局部视图的问题通常不是视图本身，而是局部视图嵌入了什么。例如，如果您碰巧在表单中嵌入表单，这将导致不可预知的结果，因为这是非法的HTML。另一个问题可能是所包含的脚本的重复，或者是我们只看到部分脚本就无法真正诊断的其他问题。

@Erik非常感谢您的回复。在我的例子中，模态表单嵌套在父视图的表单中。在将表单与父视图隔离后，我已使模式正常工作。非常感谢你。你能把这个作为答案贴出来让我选择吗？另一方面，您提到了所包含脚本的复制。模态是否需要包含任何特定的js文件，尽管它包含在父视图中？我确实在模态视图中包含了js文件，并发现包含或删除它们没有任何区别。有什么想法吗？一旦网页组装好，你必须把它作为一个整体来看待。布局，页面，部分页面，都在一起。因此，如果部分包含已包含在父级中的脚本，则可能会导致问题。但是，如果它包含在父项中，那么您不需要将其包含在部分中。感谢您指出这一点。是的，那是个错误。然而，在我的例子中，问题是嵌套的表单阻止提交正确工作。我已经设法纠正了这一点，因此表格正在自行提交。但是，我发现javascripts（ajax处理）并不是这样运行的。除了按钮类型等于submit之外，代码与上面的代码基本相同。请让我知道你的想法。非常感谢您的帮助。我遇到了同样的问题您哪里有一个有效的示例？我需要知道您如何在aciton控制器中返回视图