asp.net-mvc - 使用 Razor 进行表单验证

Question

我的 .net mvc razor 表单中有以下内容，我正在单击提交按钮，但它没有通过 js 中的验证进行验证。我在 Firefox 中调试它，而是直接转到表单方法，但表单上没有验证来停止表单提交。

model.LoanId 的 HTML 输出就是 LoanId。

如何正确验证表单？？？？

我做错了什么？

HTML

        @using (Html.BeginForm("Refresh", "Home", FormMethod.Post, new { id = "frmTemps" })) 
    <tr>
                    <td>
                    @Html.LabelFor(model => model.LoanId)
                    @Html.TextBoxFor(model => model.LoanId)
                    <td colspan="3">
                        <input type="submit" id="btnRefresh" value='Refresh' />
                    </td>
                </tr>

js

$("#frmTemps").validate({
        event: "submit",
        rules: {
            LoanID: {
                required: true
            }
        },
        messages: {
            LoanID: {
                required: ' Please enter a Loan ID. '
            }
        }
    });

I also tried it with non-model data below and got the same thing.

    @Html.Label("loanid:", "LoanID")
                    @Html.TextBox("loanID")


Here is the html I'm trying to validate:
<td>@Html.LabelFor(model => model.LoanType)
                    @Html.TextBox("SBA", "SBA")
                    @Html.ValidationMessageFor(model => model.LoanType)
                    @*@Html.TextBoxFor(model => model.LoanType)*@
                </td>
                <td>
                    <label for="ddlDept">Department:</label>
                    @(Html.Kendo().DropDownListFor(model => model.SelectedDeptText)
                            .Name("ddlDept")
                            .DataTextField("DepartmentName")
                            .DataValueField("DepartmentID")
                            .Events(e => e.Change("Refresh"))
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetDepartments", "Home");
                                });
                            })
                    )
                    @Html.ValidationMessageFor(model => model.SelectedDeptText)

查看模型

public class ViewModelTemplate_Guarantors
{
    public int SelectedTemplateId { get; set; }
    public IEnumerable<PDFTemplate> Templates { get; set; }

    public int SelectedGuarantorId { get; set; }
    public IEnumerable<tGuarantor> Guarantors { get; set; }

    public string LoanId { get; set; }
    public string SelectedDeptText { get; set; }
    public string LoanType { get; set; }

    public bool ShowTemps { get; set; }
    public string Error { get; set; }
    public string ErrorT { get; set; }
    public string ErrorG { get; set; }
    public bool ShowGeneratePDFBtn { get; set; }
}

_Layout.cshtml

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/modernizr-2.5.3.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.913/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.913/kendo.aspnetmvc.min.js")"></script>

验证类

namespace PDFService03Validation.Validations
{
    [MetadataType(typeof(PDFService03_Validation))]
    public partial class PDFService03
    {

}

    public partial class PDFService03_Validation
    {
        public class PDFService03
        {
            [Required(ErrorMessage = "Loan ID Required")]
            [DataType(DataType.Text)]
            public string LoanID { get; set; }

            [Required(ErrorMessage = "Loan Type Required")]
            [DataType(DataType.Text)]
            public string LoanType { get; set; }

            [Required(ErrorMessage = "Department Name Required")]
            [DataType(DataType.Text)]
            public string SelectedDeptText { get; set; }
        }
    }
}

索引方法

public ActionResult Index(ViewModelTemplate_Guarantors model)
{
    ViewBag.Error = "";

    model.ShowGeneratePDFBtn = false;

    return View();
}

Index.cshtml - 仍然认为对象未设置。调试时，我进入我的 Controller ，在模型中设置变量，然后返回这里。请帮忙......我不知道我在这里做错了什么。我想我已经按照需要进行了所有操作。

很抱歉再次打扰你，但我快到了....

我按照你说的做了，但仍然没有收到任何验证错误....

下面是我的 View 生成的 html 标记。您可以在顶部看到我正在使用的脚本，您还可以在 span 标签中看到验证。我错过了什么？？？我还将向您展示我编辑的 ViewModel。提前非常感谢...

View 模型

namespace PDFConverterModel.ViewModels
{
    [MetadataType(typeof(ViewModelTemplate_Guarantors_Validation))]
    public partial class ViewModelTemplate_GuarantorsValidation
    {

    }

    public partial class ViewModelTemplate_Guarantors_Validation
    {
        public class ViewModelTemplate_Guarantors
        {
            [Required(ErrorMessage = "Loan ID Required")]
            [DataType(DataType.Text)]
            public string LoanID { get; set; }

            [Required(ErrorMessage = "Loan Type Required")]
            [DataType(DataType.Text)]
            public string LoanType { get; set; }

            [Required(ErrorMessage = "Department Name Required")]
            [DataType(DataType.Text)]
            public string SelectedDeptText { get; set; }
        }
    }

    public class ViewModelTemplate_Guarantors
    {
        public int SelectedTemplateId { get; set; }
        public IEnumerable<PDFTemplate> Templates { get; set; }

        public int SelectedGuarantorId { get; set; }
        public IEnumerable<tGuarantor> Guarantors { get; set; }

        public string LoanId { get; set; }
        public string SelectedDeptText { get; set; }
        public string LoanType { get; set; }

        public bool ShowTemps { get; set; }
        public string Error { get; set; }
        public string ErrorT { get; set; }
        public string ErrorG { get; set; }
        public bool ShowGeneratePDFBtn { get; set; }
    }
}

页面输出:

<!DOCTYPE html>
<html>
<head>
    <title>BHG :: PDF Generator</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2012.2.913/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2012.2.913/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2012.2.913/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/kendo/2012.2.913/kendo.all.min.js"></script>
    <script src="/Scripts/kendo/2012.2.913/kendo.aspnetmvc.min.js"></script>
</head>

<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>BHG :: PDF Generator</h1>
            </div>
        </header>
        <section id="main">


<h2></h2>

<div>

    <table style="width: 1000px">
        <tr>
            <td colspan="5">
                <img alt="BHG Logo" src="/Images/logo.gif" />
            </td>
        </tr>

<form action="/Home/Refresh" id="frmTemps" method="post">            <tr>
                <td>


                <label for="LoanId">LoanId</label>
                <input id="LoanId" name="LoanId" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="LoanId" data-valmsg-replace="true"></span>
                <td colspan="3">
                    <input type="submit" id="btnRefresh" value='Refresh' />
                </td>
            </tr>
            <tr>
                <td><label for="LoanType">LoanType</label>
                    <input id="SBA" name="SBA" type="text" value="SBA" />
                    <span class="field-validation-valid" data-valmsg-for="LoanType" data-valmsg-replace="true"></span>

                </td>
                <td>
                    <label for="ddlDept">Department:</label>
                    <input id="ddlDept" name="ddlDept" type="text" /><script>
    jQuery(function(){jQuery("#ddlDept").kendoDropDownList({"change":Refresh,"dataSource":{"transport":{"read":{"url":"/Home/GetDepartments"}},"schema":{"errors":"Errors"}},"dataTextField":"DepartmentName","dataValueField":"DepartmentID"});});
</script>
                    <span class="field-validation-valid" data-valmsg-for="SelectedDeptText" data-valmsg-replace="true"></span>
                </td>
            </tr>
</form>
    </table>

</div>

<script type="text/javascript">

    $('btnRefresh').on('click', '#btnRefresh', function () {
        Refresh();
    });

    function Refresh() {

        var LoanID = $("#LoanID").val();

        if (LoanID != "") {
            document.forms["frmTemps"].submit();
        }
    }
</script>

        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Answer 1

哦...我明白为什么会这样了。你忘记了这一点:

@Html.ValidationMessageFor(model => model.LoanId)

如果您不放置 ValidationMessageFor，非侵入式验证将不知道此模型属性需要在表单提交之前进行验证。

所以你必须有这个:

@Html.LabelFor(model => model.LoanId)
@Html.TextBoxFor(model => model.LoanId)
@Html.ValidationMessageFor(model => model.LoanId)

不要忘记先在您的 LoanId 属性中添加一些数据注释...

有关这方面的更多信息，请查看此处:Validation with the Data Annotation Validators (C#)

编辑

在您为问题提供更多代码后，我明白了为什么未显示验证错误。

发生这种情况是因为您实际上是将自定义 ViewModel ViewModelTemplate_Guarantors 传递给 View 。如您所见，您的 View 模型没有数据注释。您在元数据类 PDFService03_Validation 中提供的数据注释只有在您将类型为 PDFService03 的对象传递给 View 时才会生效。因此，要解决此问题，您必须在 ViewModelTemplate_Guarantors View 模型对象中复制数据注释。这是代码重复，非常丑陋，但它是如何工作的。