Client side validation with Angularjs and Server side validation with Asp.net MVC

Question

I am using Angularjs with Asp.net MVC. As I am new in Angularjs I am facing some issues using it with MVC. Presently I want to validate a form. I am using --

1.For client side: Angularjs

2.For Server side :

Asp.net MVC default validation technic using data annotation.
will check the ModelState IsValid after form submit.

ModelState.IsValid is working only when the name tag for each html element is exactly the same as the property name of my model.

Is there any other way for server side validation while using MVC with angularjs as when we have a big form full of controls then we have to take care for each element so that the name tag remains same with the respective property name of my model.

My Html:

   @model AngularMVC.Models.StudentModel
   @{
        ViewBag.Title = "student";
    }

    @using (Html.BeginForm("Submit", "Test", FormMethod.Post, new { name = "addstudent" }))
    {

        <div class="row">
            <section>
                <div class="form-group">
                    <div class="col-md-2">Name:</div>
                    <div class="col-md-10">
                        <div class="col-md-4">
                            <input class="form-control" name="Name" id="Name" type="text" placeholder="Enter Name" ng-model="Name" ng-required="true" />
                        </div>
                        <div class="col-md-4">
                            <span style="color:red" ng-show="addstudent.Name.$invalid">
                                <span ng-show="addstudent.Name.$dirty && addstudent.Name.$invalid">Name is required.</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2">Mobile Number:</div>
                    <div class="col-md-10">
                        <div class="col-md-4">
                            <input class="form-control" type="text" placeholder="Enter Mobile Number" name="MobileNumber" ng-model="MobileNumber" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" />
                        </div>
                        <div class="col-md-4">
                            <span style="color:red" ng-show="addstudent.MobileNumber.$invalid">
                                <span ng-show="addstudent.MobileNumber.$dirty && addstudent.MobileNumber.$invalid">Mobile number is required.</span>
                                <span ng-show="addstudent.MobileNumber.$dirty && addstudent.MobileNumber.$error.pattern">Not a valid mobile number!</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2">Email:</div>
                    <div class="col-md-10">
                        <div class="col-md-4">
                            <input class="form-control" type="email" name="EmailAddress" placeholder="Enter email" ng-model="email" />
                        </div>
                        <div class="col-md-4">
                            <span style="color:red" ng-show="addstudent.EmailAddress.$invalid">
                                <span ng-show="addstudent.EmailAddress.$dirty && addstudent.EmailAddress.$invalid">email is required.</span>
                                <span ng-show="addstudent.EmailAddress.$dirty && addstudent.EmailAddress.$error.pattern">Not a valid email address!</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2">Address:</div>
                    <div class="col-md-10">
                        <div class="col-md-4">
                            <input class="form-control" type="text" placeholder="Enter Addess" name="Address" ng-model="address" ng-required="true" />
                        </div>
                        <div class="col-md-4">
                            <span style="color:red" ng-show="addstudent.Address.$invalid">
                                <span ng-show="addstudent.Address.$dirty && addstudent.Address.$invalid">Address is required.</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Add Student" class="btn btn-default" />
                        </div>
                    </div>
                </div>
            </section>
        </div>

    }
    <script src="~/Scripts/ng-module.js"></script>

Student Model:

 public class StudentModel
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        [RegularExpression(@"/^\d{0,9}(\.\d{1,9})?$/")]
        public long MobileNumber { get; set; }

        [RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$")]
        public string EmailAddress { get; set; }

        [Required]
        public string Address { get; set; }
    }

If you're using AngularJs, you would be better off using WebAPI on the server side and sending the post request from AngularJs. I think it offers more possibilities to use $http or $resourceto issue an AJAX request than using a mix of AngularJs and ASP.NET MVC. — Carles Company
@CarlesCompany makes a good point. keep your server side validation because you need a gaurd against any process that goes around angular BUT have your user friendly validations including messages etc. purely in the UI using angular. Also it is a good idea to switch to Web API for all data calls and only use MVC to serve up the html centric views. — Igor
I have my server side validation but my concern is the process that I have followed here is the only process ? Is there any better solution ? — Anadi

Kirill Polunin Kirill Polunin · Accepted Answer · 2017-07-18T06:16:49

Instead of

 input class="form-control" name="Name"

you can use

 @Html.TextBoxFor(r=>r.Name)

In that way , you will not care about names. IntelliSense will do all work for you.

Client side validation with Angularjs and Server side validation with Asp.net MVC

1 Answers