Question

我有一个模态表单来添加记录。但是，单击提交按钮绝对没有任何作用。这是一个局部视图，点击“添加”按钮可以很好地加载。父视图上的按钮。但是，部分视图上的表单不会提交。我已经回顾了一些相关的帖子。但到目前为止我还没有解决问题。这是代码 -

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

请指导。感谢。

Answer 1

您的“提交”按钮被输入“按钮”，而不是“提交”。 “按钮”类型的按钮不会自行执行任何操作，也不会提交您的表单。将其更改为：

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

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

由于它根本没有提交，即使你有点击按钮提交的JavaScript，你的JavaScript也有两个错误之一：

您没有正确绑定到该元素上的click事件处理程序
页面上存在一些JavaScript错误，导致JavaScript无法运行。

Answer 2

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

无法在ASP.NET MVC中提交Modal表单

2 个答案: