Form post mixing AngularJs and Razor

The AngularJs validation is simple and straightforward to use, here’s a typical Razor form using the AngularJs MVVM model.

<div class="contact" ng-app="contacUsApp" ng-controller="ContactUsController">
        <div class="row">
            <div class="col-sm-8 col-sm-push-4">
                <h2 class="title">ENQUIRY FORM</h2>
                <p>Please complete your details below and a member of our team will be in touch.</p>
                @if (messageSent)
                {
                    <div class="alert alert-success" role="alert">Your message has been sent.</div>
                }
                <div>
                    @using (Html.BeginForm())
                    {
                        <div class="form-box" class="simple-form">
                            <h4>CONTACT DETAILS</h4>
                            <div class="form-group">
                                <label>Name:</label>
                                <input type="text" name="Name" class="form-control" ng-model="model.Name" required>
                            </div>

                            <div class="form-group">
                                <label>Telephone:</label>
                                <input type="text" name="Telephone" class="form-control" ng-model="model.Telephone">
                            </div>

                            <div class="form-group">
                                <label>Email Address:</label>
                                <input type="email" name="Email" class="form-control" ng-model="model.Email" required>
                            </div>

                        </div>
                        <div class="form-box">
                            <h4>YOUR ENQUIRY</h4>

                            <div class="form-group">
                                <label>Airport:</label>
                                @*<input type="text" name="Airport" class="form-control" ng-model="model.Airport">*@
                        @*<select name="Airport" ng-model="Airport" ng-options="item.value as item.text for item in airports" required>*@
                                <select name="Airport" ng-model="Airport" required>
                                    <option></option>
                                    <option ng-repeat="airport in airports" value="{{airport.value}}">{{airport.text}}</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Service:</label>
                                @*<input type="text" name="Service" class="form-control" ng-model="Service">*@
                                <select name="Service" ng-model="Service" required>
                                    <option></option>
                                    <option ng-repeat="service in services" value="{{service.value}}">{{service.text}}</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Help With:</label>
                                @*<input type="text" name="HelpWith" class="form-control" ng-model="HelpWith">*@
                                <select name="HelpWith"  ng-model="HelpWith" required>
                                    <option></option>
                                    <option ng-repeat="help in helpwith" value="{{help.value}}">{{help.text}}</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Comments:</label>
                                <textarea class="form-control" name="Comments" rows="5" ng-model="Comments" required></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <button class="btn btn-primary btn-lg submit pull-right" type="submit">Submit Form »</button>
                            </div>
                        </div>
                    }
                </div>
            </div>
        
        </div>
    </div>

The bit of javascript to init the $scope.
We convert the model to json an assign it to a js variable in order to make it available to the $scope:

<script>
  @{
    var contactUsModel = @Html.Raw(Json.Encode(Model));
}

 contactUsApp.controller("ContactUsController", function($scope) {
            //init model
            $scope.model = @contactUsModel;
    };
</script>

The action on the controller stays the same:

[HttpPost]
public ActionResult Index(ContactUsModel model)
{
	//do something
}



No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *