在 asp.net mvc4 中验证动态控件答案

【问题标题】：Validating Dynamic Controls in asp.net mvc4在 asp.net mvc4 中验证动态控件
【发布时间】：2014-09-23 09:29:31
【问题描述】：

我正在尝试在我的 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>
}

【问题讨论】：

您尝试做的事情毫无意义...您想将 asp.mvc 视图定义移动到您奇怪的“动态控件”。不要这样做！
这是我构建动态控制的要求。基本上我需要为用户提供选项来定义他们想要在表单上构建什么样的控件。

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

【解决方案1】：

只需分配一个类，例如validate 到所有动态控件，您可以使用 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
              }
          });
      });

从控制器传递数据时，如果强制字段不是必填项，则将其设为“空”，否则将字段设为Mandatory = "validate"; 如果该字段为必填项，则会自动添加类。

在您的视图中，您可以在所有控件中添加一行 class="@row.Mandatory" 为了有条件地添加类，我已经为文本框制作了它，对其他控件应用相同。例如

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

希望这会有所帮助:)

【讨论】：

是的，但我的控件是动态的，它们的名称是模态的。我如何在 jquery 中访问它们？
我认为验证可能不需要字段的名称，在循环动态创建字段时，仅当它是必填字段时才添加类“validate”。然后在提交点击时，它将找到该类的所有可见元素并对其进行验证，不需要任何控件名称进行验证。
你能在这里放一些代码吗？我有点困惑如何在创建新控件时添加类来验证？您可以在帖子中查看我的视图代码以供参考

【解决方案2】：

我的建议是首先创建一个局部视图而不是创建一个动态控件，其次，您可以使用多种方法来验证该局部视图。

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

【讨论】：