用剃刀进行表格验证

时间:2012-10-04 21:17:36

标签: asp.net-mvc razor validation submit

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

模型的HTML输出.LoanId只是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。非常感谢你...

视图模型

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>

2 个答案:

答案 0 :(得分:4)

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

@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传递给视图。如您所见,您的视图模型没有数据注释。您在元数据类PDFService03_Validation中提供的数据注释仅在将PDFService03类型的对象传递给视图时才会生效。因此,要解决此问题,您必须在ViewModelTemplate_Guarantors视图模型对象中复制数据注释。这是代码重复,很难看,但它是如何工作的。

答案 1 :(得分:2)

  1. 的jquery-1.7.1.min.j
  2. kendo.web.min.js
  3. kendo.aspnetmvc.min.js
  4. kendo.validator.min.js
  5. kendo.dataviz.min.js
  6. 这5个文件是验证工作所必需的。我已经看到你添加了一些这些添加所有这些并尝试。我也遇到了这个问题,但这解决了这个问题。

    还要检查您的网络配置:

    <appSettings>
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
      </appSettings>
    

    这也是必需的。让我没有工作。