Question

在MVC 5应用程序中，我有一个部分视图，其中有一个按钮来提交一些信息。但是当我按下该按钮时，父表单被验证，显示所有验证错误。我想要的只是部分视图中只有经过验证的字段才能执行而不与父表单进行交互。

代码更新（部分视图，UploadFile）：

<form action="@Url.Action("Upload","File")" method="post" enctype="multipart/form-data">

    <label for="photo">Photo:</label>
    <input type="file" name="photo" id="photo" />

    <input type="submit" value="Upload" />
</form>

代码父表：

<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CategoriaId, "CategoriaId", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CategoriaId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoriaId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Descripcion, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Descripcion, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Descripcion, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Precio, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Precio, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Precio, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>


        @Html.Partial("UploadFile")
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

这可能是由于嵌套表格造成的。

确保子表单不嵌套在另一个表单中。

HTML规范禁止嵌套表单。

@using (Html.BeginForm())
{
    ..
}
@Html.Partial("UploadFile") // place it outside of main form

由于部分视图包含另一种形式，您需要将其另外放置在主窗体之外，它将嵌套（ HTML规范禁止嵌套窗体）

Answer 2

由于您在局部视图中有<form>标记，并且您将@Html.Partial("UploadFile")放在@using (Html.BeginForm())块内，如下所示

<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    ....
    ....
    ....

    @Html.Partial("UploadFile")
}

它将呈现为像这样的嵌套表单

<h2>Create</h2>
<form>
    .... 
    ....
    ....

    <form action="/File/Upload" method="post" enctype="multipart/form-data">

        <label for="photo">Photo:</label>
        <input type="file" name="photo" id="photo" />

        <input type="submit" value="Upload" />
    </form>
</form>

这是无效的HTML。您需要将@Html.Partial("UploadFile")移到@using (Html.BeginForm())块

之外

<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    ....
    ....
    ....
}

@Html.Partial("UploadFile")

在部分视图中按下按钮时，将验证父表单

2 个答案: