Features

Unobtrusive Validation

Unobtrusive Validation

This sample shows how to use unobtrusive validation in the MultiRow control.

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
Id
Name
Country
Phone
Birthdate
1
John
Albania
1424685445
Computers
John@gmail.com
1/1/2001
2
Mary
American
1296479754
Electronics
Mary@gmail.com
3/2/1985
3
David
Australia
1217654653
Telecom
David@gmail.com
3/1/1999
4
Sunny
Bosnia
1756456786
Internet
Sunny@gmail.com
4/3/1989
5
James
Botswana
1209687543
Accounting
James@gmail.com
3/2/1994
6
Maria
Bahrain
1543578643
Accounting
Maria@gmail.com
4/2/1998
7
Michael
Argentina
1215457467
Finance
Michael@gmail.com
2/2/2003
8
Michelle
Bulgaria
1534357546
Finance
Michelle@gmail.com
1/1/2001

Description

This sample shows how to use unobtrusive validation in the MultiRow control.

The columns have the following validations:

  • Name: Required. Alphanumeric and contains 4 to 10 characters.
  • Industry: Required.
  • Country: Required.
  • Phone: Required. 8 to 11 characters.
  • Email: Required. Valid e-mail address.
  • Birthdate: Required.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using MultiRowExplorer.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
 
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private static List<UserInfo> users = UsersData.Users;
 
        public ActionResult UnobtrusiveValidation()
        {
            return View(users);
        }
 
        public ActionResult MultiRowUpdateUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData)
        {
            return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item =>
            {
                string error = string.Empty;
                bool success = true;
                try
                {
                    var resultItem = users.Find(u => u.Id == item.Id);
                    var index = users.IndexOf(resultItem);
                    users.Remove(resultItem);
                    users.Insert(index, item);
                }
                catch (Exception e)
                {
                    error = e.Message;
                    success = false;
                }
                return new CollectionViewItemResult<UserInfo>
                {
                    Error = error,
                    Success = success,
                    Data = item
                };
            }, () => users));
        }
 
        public ActionResult MultiRowCreateUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData)
        {
            return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item =>
            {
                string error = string.Empty;
                bool success = true;
                try
                {
                    users.Add(item);
                    item.Id = users.Max(u => u.Id) + 1;
                }
                catch (Exception e)
                {
                    error = e.Message;
                    success = false;
                }
                return new CollectionViewItemResult<UserInfo>
                {
                    Error = error,
                    Success = success,
                    Data = item
                };
            }, () => users));
        }
 
        public ActionResult MultiRowDeleteUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData)
        {
            return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item =>
            {
                string error = string.Empty;
                bool success = true;
                try
                {
                    var resultItem = users.Find(u => u.Id == item.Id);
                    users.Remove(resultItem);
                }
                catch (Exception e)
                {
                    error = e.Message;
                    success = false;
                }
                return new CollectionViewItemResult<UserInfo>
                {
                    Error = error,
                    Success = success,
                    Data = item
                };
            }, () => users));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@model List<UserInfo>
 
@section Scripts{
    @Scripts.Render("~/jquery")
    @Scripts.Render("~/jqueryval")
}
 
@(Html.C1().MultiRow<UserInfo>()
    .Id("uvMultiRow")
    .LayoutDefinition(ld =>
    {
        ld.Add().Colspan(1).Cells(cells =>
        {
            cells.Add(c => c.Binding("Id").IsReadOnly(true));
        });
        ld.Add().Colspan(1).Cells(cells =>
        {
            cells.Add(c => c.Binding("Name"))
            .Add(c => c.Binding("Industry"));
        });
        ld.Add().Colspan(3).Cells(cells =>
        {
            cells.Add(c => c.Binding("Country"))
            .Add(c => c.Binding("Phone").Colspan(2))
            .Add(c => c.Binding("Email").Colspan(2))
            .Add(c => c.Binding("Birthdate").Format("M/d/yyyy"));
        });
    })
    .Bind(ib => ib.Bind(Model)
        .Update(Url.Action("MultiRowUpdateUserInfo"))
        .Create(Url.Action("MultiRowCreateUserInfo"))
        .Delete(Url.Action("MultiRowDeleteUserInfo"))
    )
    .AllowAddNew(true)
    .AllowDelete(true)
    .CssClass("multirow")
)
 
@section Description{
    <p>
    This sample shows how to use unobtrusive validation in the MultiRow control.
    </p>
    <p>
        The columns have the following validations:
        <ul>
            <li><b>Name:</b> Required. Alphanumeric and contains 4 to 10 characters.</li>
            <li><b>Industry:</b> Required.</li>
            <li><b>Country:</b> Required.</li>
            <li><b>Phone:</b> Required. 8 to 11 characters.</li>
            <li><b>Email:</b> Required. Valid e-mail address.</li>
            <li><b>Birthdate:</b> Required.</li>
        </ul>
    </p>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
using System;
using System.Linq;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Drawing;
 
namespace MultiRowExplorer.Models
{
    public class UserInfo
    {
        public int Id { get; set; }
 
        [Required]
        [RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessage = "The username must be alphanumeric and contains 4 to 10 characters.")]
        public string Name { get; set; }
 
        [Required]
        [RegularExpression(pattern: @"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessage = "The Email field is not a valid e-mail address.")]
        public string Email { get; set; }
 
        [Required]
        [StringLength(16, MinimumLength = 6)]
        public string Password { get; set; }
 
        [Required]
        [Compare("Password")]
        public string ConfirmPassword { get; set; }
 
        [Required]
        [StringLength(11, MinimumLength = 8)]
        public string Phone { get; set; }
 
        [Required]
        public string Country { get; set; }
 
        [Required]
        public string Industry { get; set; }
 
        [Required]
        public DateTime Birthdate { get; set; }
 
        [Required]
        public Color? FavoriteColor { get; set; }
 
        [Required]
        public string[] Skills { get; set; }
    }
}