Validating Dynamic Controls in asp.net mvc4

Question

I am trying to create a dynamic control in my asp.net mvc 4 application. What I want is when I submit, I want to validate mandatory fields. So lets say there is field type Checkbox is created and its mandatory. I want to ensure, this is checked before submitting. Do I need jquery to validate or it can be done by any other means?

View Model

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

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

Model

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; }
}

View

@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>
}

What you are trying to do has no sense... you want to move asp.mvc view definition to your strange "dynamic control". Don't do this! — DaniCE
– DaniCE, Commented Sep 23, 2014 at 9:40
its my requirement to build dynamic control. basically i need to give the option to user to define what kind of controls they want to build on form. — Hammad Bukhari
– Hammad Bukhari, Commented Sep 23, 2014 at 9:45

D.T. · Accepted Answer · 2014-09-23 12:39:32Z

1

Just assign a class e.g. validate to all the dynamic controls and you can do it easily using jquery by writing a common validation function for all the type of controls. below code gives you a brief idea on how to proceed...

$("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
              }
          });
      });

When passing the data from the controller, make the Mandatory field "empty" if it is not mandatory or else make the field as Mandatory = "validate"; This will automatically add the class if the field is mandatory.

In your view you can add a line class="@row.Mandatory" to all the controls to add the class conditionally, I have made it for textbox, apply the same for other controls. E.g.

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

Hope this Helps :)

edited Sep 23, 2014 at 12:39

answered Sep 23, 2014 at 10:18

D.T.

3501 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hammad Bukhari Over a year ago

Yes but my controls are dynamic and their names are in modal. how can i access them in jquery?

D.T. Over a year ago

I dont think the names of the fields might be required for validation, while looping through to create the fields dynamically, add the class "validate" only if it is a required field. then on submit click, it will find all the visible elements with that class and validates them, there is no need of any name of the control for validating.

Hammad Bukhari Over a year ago

can you put some code over here? i am little confused how can i add class to validate while creating new controls ? you can see my view code in post for reference

Sonu K · Accepted Answer · 2014-09-23 09:46:32Z

0

My advise is first of all create a partial view instead of creating a dynamic control and second there are plenty of ways you could use for validating that partial view.

You can use either DataAnnotations for server side validations and Unobtrusive jQuery for client side validations.

answered Sep 23, 2014 at 9:46

Sonu K

2,8424 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Validating Dynamic Controls in asp.net mvc4

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related