验证asp.net mvc4中的动态控件

时间:2014-09-23 09:29:32

标签: jquery asp.net-mvc-4 validation razor

我正在尝试在我的asp.net mvc 4应用程序中创建动态控件。我想要的是当我提交时,我想验证必填字段。所以我们假设有一个字段类型Checkbox已创建并且是强制性的。我想确保在提交之前对其进行检查。我需要jquery来验证还是可以通过任何其他方式完成?

查看模型

public class SignupViewModel : IValidatableObject
{
   public List<MembershipControls> Controls { get; set; }

    public List<Groups> Groups { get; set; }
}

型号

public class Groups
{
    public virtual int Id { get; set; }
    public virtual string GroupTitle { get; set; }

}

public class MembershipControls
{
    public virtual int Id { get; set; }
    public virtual string UserId { get; set; }
    public virtual string ControlType { get; set; }
    public virtual string Caption { get; set; }
    public virtual string Name { get; set; }
    public virtual string Mandatory { get; set; }
    public virtual string Content { get; set; }
    public virtual string GroupTitle { get; set; }
    public virtual string RadioButtonOptions { get; set; }
    public virtual string SelectOptionValues { get; set; }
    public virtual string SelectOptionText { get; set; }
}

查看

@foreach (var groups in Model.Groups)
{
    <label style="font-weight:bold">@groups.GroupTitle</label>

    <div style=" border: 1px solid #CCCCCC;padding:5px">

    @foreach (var row in Model.Controls.Where(r => r.GroupTitle == groups.GroupTitle))
    {
        <div style="padding:7px">

             @if (row.ControlType == "Single Line Text")
             {
                <label>@row.Caption</label>
                <input type="text" name="@row.Name" />
             }
             else if (row.ControlType == "Multi Line Text")
             {
                 <label>@row.Caption</label>
                 <textarea name="@row.Name"></textarea>
             }
             else if (row.ControlType == "Yes/No Choice(Radio Buttons)")
             {                            
                <div>     
                    <label>@row.Caption</label>
                    &nbsp                     
                    <input type="radio" name="@row.Name" value="Yes" /> &nbsp Yes                             
                    &nbsp
                    <input type="radio" name="@row.Name"  value="No" /> &nbsp No
                </div>
             }
             else if (row.ControlType == "Checkbox")
             {
                 <div>
                    <input type="checkbox" name="@row.Name"/> @row.Caption
                 </div>
             }
             else if (row.ControlType == "Date")
             {
                 <div>
                     <label>@row.Caption</label>
                    <input type="date" name="@row.Name"/>
                 </div>
             }
        </div>
    }
</div>
}

2 个答案:

答案 0 :(得分:1)

只需指定一个类,例如 验证 到所有动态控件,您可以通过为所有类型的控件编写通用验证函数,使用jquery轻松完成。下面的代码简要介绍了如何继续......

$("input[type=submit]").click(function () {
          $(".validate").each(function () {
              //Textbox validation
              if ($(this).is("input[type=text]")) {
                  //validation logic for textbox
              }
              //TextArea Validation
              if ($(this).is("textarea")) {
                  //validation logic for TextArea
              }
              //RadioButton Validation
              if ($(this).is("input[type=radio]")) {
                  //validation logic for RadioButton
              }
              //Checkbox Validation
              if ($(this).is("input[type=checkbox]")) {
                  //validation logic for Checkbox
              }
              //Date Validation
              if ($(this).is("input[type=date]")) {
                  //validation logic for Date field
              }
          });
      });

从控制器传递数据时,请使用必填字段&#34;清空&#34;如果它不是强制性的,或者将该字段设为Mandatory = "validate";如果该字段是必填字段,则会自动添加该字段。

在您的视图中,您可以为所有控件添加一行class="@row.Mandatory" 为了有条件地添加类,我已经为文本框创建了它,将其应用于其他控件。 E.g。

<input type="text" name="@row.Name" class="@row.Mandatory" />

希望这有助于:)

答案 1 :(得分:0)

我建议首先创建局部视图而不是创建动态控件,然后有很多方法可以用来验证局部视图。

您可以使用DataAnnotations进行服务器端验证,使用Unobtrusive jQuery进行客户端验证。