选择元素客户端验证仅在发布后显示

时间:2012-11-19 21:56:25

标签: asp.net-mvc-3 validation client-side-validation

我试图在select元素上使用客户端验证,但是在表单最初加载时它不起作用。

这是我模型中的属性(实际上是在我的模型中的一个类中):

[Required(ErrorMessage="Please select an application type.")]
public override string Application
{
    get
    {
        return base.Application;
    }
    set
    {
        base.Application = value;
    }
}

这是视图的一部分

<div class="field_title">
    Application Type
</div>
<div class="field_validation">
    @Html.ValidationMessageFor(model => model.CreatePromocode.Application)
</div>
<div class="form_field">
    @Html.DropDownListFor(model => model.CreatePromocode.Application,
        SharedLibrary.Entities.DropDownLists.PromocodeApplicationOptions,
        "Select an application type...")
</div>

这是dropdownlist项目代码,我这样做是因为我可以在其他应用程序上使用它,只需在一个地方而不是在几个地方更改

public class DropDownLists
{        
    public static List<SelectListItem> PromocodeApplicationOptions
    {
        get
        {
            return new List<SelectListItem>()
            {
                new SelectListItem() { 
                    Text="Earlybird Registration", Value="Earlybird"},
                new SelectListItem() { 
                    Text="Standard Registration", Value="Standard"},
                new SelectListItem() { 
                    Text="Monday Registration", Value="Monday"},
                new SelectListItem() { 
                    Text="Tuesday Registration", Value="Tuesday"},
                new SelectListItem() { 
                    Text="Wednesday Registration", Value="Wednesday"},
                new SelectListItem() { 
                    Text="Multiple Tickets", Value="TicketMany"},
                new SelectListItem() { 
                    Text="Single Ticket",Value="TicketSingle"}
            };
        }
    }
}

我遇到的问题是当用户第一次到达页面时,下拉列表没有任何客户端验证属性。看起来像这样

<select id="CreatePromocode_Application" name="CreatePromocode.Application">

然而,一旦发布了表单,并且由于尚未选择应用程序类型而导致ModelState无效,则客户端验证将显示在下拉列表中并正常工作。

<select data-val="true" 
    data-val-required="Please select an application type." 
    id="CreatePromocode_Application"
    name="CreatePromocode.Application" 
    class="valid">

如何从一开始就让客户端验证工作?我宁愿不必手动添加必需的属性和错误消息,因为它会破坏使用数据注释的目的。

1 个答案:

答案 0 :(得分:1)

确保您正在初始化视图模型的CreatePromoCode属性,如此示例的默认构造函数中所示:

public class YourViewModel
{
    public YourViewModel()
    {
        CreatePromoCode = new CreatePromoCode();
    }

    public BaseCreatePromoCode CreatePromoCode { get; set; }

}

public class BaseCreatePromoCode
{
    public virtual string Application { get; set; }

}

public class CreatePromoCode : BaseCreatePromoCode
{
    [Required]
    public override string Application { get; set; }
}

HtmlHelper将使用视图模型的CreatePromoCode属性的运行时类型,以获取其属性的元数据并设置客户端验证的数据属性。 (因此即使必须在派生类上实际设置Required属性,验证也会起作用。)

当初始发布后出现错误时,MVC活页夹已创建视图模型和CreatePromoCode对象的实例。如果再次渲染视图以显示错误,则在初始化对象时,将设置数据属性并启动客户端验证。