Submit Forms using AgularJS with ASP.NET MVC
Ways on how to submit forms using AngularJS:
I’m new to AngularJS and I was trying to create a CRUD application. While I was working on this project I run into some problem:
“How to submit a form using AngularJS with ASP.NET MVC model binding”
In this article, I would like to share with you a method I found on the internet. To start, you need to create a new MVC Project. If this is your first time in creating a project you can visit this article for a guide on how to create MVC Project in ASP.NET How to start with ASP.NET MVC.
I assume you have already created a project. To have an overview of what view we are about to create, below is the image of my final form view.
Output Preview: – Submit Forms using AgularJS
Let’s Start:
First, create a model class. To put every file in place it is best to put your model class in your Model folder. Then declare all properties you need for your inputs in your forms.
Model Properties:
|
1 2 3 4 5 6 |
public class EmployeeModel { public string UserName { get; set; } public string Email { get; set; } public int ID { get; set; } } |
Second, create your view. If you are using the default template of ASP.NET MVC you default controller would probably be HomeController and your default view is found under View Folder Home > index.chtml. Open the file and replace code using the snippet below.
- Declare @using AngularCrudOperation.Models > to make model class we created a while ago accessible from the view.
There are two ways of implementing input in ASP.NET MVC view, you can either use Html Helper or proceed using a plain HTML input.
Inputs > HTML Helper
- @Html.EditorFor(m => m.Email, new { @placeholder = “Enter email”, @class = “form-control”, required = “required”, ng_model = “model.Email” })
Code:
|
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 |
@using AngularCrudOperation.Models @model EmployeeModel @{ ViewBag.Title = "Home Page"; } <br /> <div class="container"> <div ng-app="HomeApp" ng-controller="HomeController"> <form name="employee_form" data-ng-submit="AddEmployee()"> <div class="panel"> <div class="panel-header"> <h4 class="panel-title">Employee Details</h4> </div> <div class="panel-body"> <div class="form-group"> <label for="ID">ID</label> <input type="text" class="form-control" id="ID" placeholder="ID" ng-model="model.ID" required="required"> </div> <div class="form-group"> <label for="username">User Name</label> <input type="text" class="form-control" id="username" placeholder="Enter username" ng-model="model.UserName" required="required"> </div> <div class="form-group"> <label for="Email">Email address</label> <input type="email" class="form-control" id="Email" placeholder="Enter email" ng-model="model.Email" required="required"> </div> </div> <div class="panel-footer"> <button type="submit" class="btn btn-default">Save</button> </div> </div> </form> <br /> </div> </div> |
Third, create AngularJS script for your application. There are two scopes or function we need to create base on the view we created a while ago.
- model > binding models with AngularJS
- AddEmployee > function used to submit our form input using post request.
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script src="~/Scripts/Angular.min.js"></script> <script> var app = angular.module('HomeApp', []); app.controller('HomeController', function ($scope, $http) { $scope.model = @Html.Raw(Json.Encode(Model)) $scope.AddEmployee = function () { debugger; var eee = $scope.model; $http({ method: 'POST', url: '@Url.Action("AddEmployee", "Home")', data: $scope.model, headers: { 'Content-type': 'application/json' } }).then(function (response) { $scope.employee = JSON.parse(response.data); }, function (error) { console.log(error); }); } }); </script> |
Fourth, create a POST method in your HomeController where we direct our POST request from our AngularJS App. For presentation I created an empty method with no functionality at all just to show you if the data from the input is successfully pass to the method we created. Copy the code below and test if it works.
Code:
|
1 2 3 4 5 6 7 |
[HttpPost] public string AddEmployee(EmployeeModel empdetails) { string result = ""; return result; } |
And that is all you need to do to submit a form using angularJS. This is just a part of the CRUD application I was about to create. Stay connected with this blog and check for my latest post to be updated. Thank you for reading happy coding.
Share this post if this helps you!
Code Summary:
Model Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; namespace AngularCrudOperation.Models { public class EmployeeModel { [Required] public string UserName { get; set; } public string Email { get; set; } public int ID { get; set; } } } |
HomeController
|
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 |
using AngularCrudOperation.Models; using AngularCrudOperation.Service; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace AngularCrudOperation.Controllers { public class HomeController : Controller { CRUDService service = new CRUDService(); public ActionResult Index() { return View(); } [HttpPost] public string AddEmployee(EmployeeModel empdetails) { string result = "";//service.AddEmployee(empdetails); return result; } } } |
Index.cshtml
|
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 |
@using AngularCrudOperation.Models @model EmployeeModel @{ ViewBag.Title = "Home Page"; } <br /> <div class="container"> <div ng-app="HomeApp" ng-controller="HomeController"> <form name="employee_form" data-ng-submit="AddEmployee()"> <div class="panel"> <div class="panel-header"> <h4 class="panel-title">Employee Details</h4> </div> <div class="panel-body"> <div class="form-group"> <label for="ID">ID</label> <input type="text" class="form-control" id="ID" placeholder="ID" ng-model="model.ID" required="required"> </div> <div class="form-group"> <label for="username">User Name</label> <input type="text" class="form-control" id="username" placeholder="Enter username" ng-model="model.UserName" required="required"> </div> <div class="form-group"> <label for="Email">Email address</label> <input type="email" class="form-control" id="Email" placeholder="Enter email" ng-model="model.Email" required="required"> </div> </div> <div class="panel-footer"> <button type="submit" class="btn btn-default">Save</button> </div> </div> </form> <br /> </div> </div> <script src="~/Scripts/Angular.min.js"></script> <script> var app = angular.module('HomeApp', []); app.controller('HomeController', function ($scope, $http) { $scope.model = @Html.Raw(Json.Encode(Model)) $scope.AddEmployee = function () { debugger; var eee = $scope.model; $http({ method: 'POST', url: '@Url.Action("AddEmployee", "Home")', data: $scope.model, headers: { 'Content-type': 'application/json' } }).then(function (response) { $scope.employee = JSON.parse(response.data); }, function (error) { console.log(error); }); } }); </script> |