In this article I will show how JSON serialize in ASP.NET MVC and bind data by AngularJs. I will not describe what and how JSON, ASP.NET MVC or AngularJs work. Hope I will discuss these topics in another article.
Let’s start to create an ASP.NET MVC project with AngularJs.
Step 1: Create ASP.NET MVC application
Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
Select Empty Template and Razor as view engine
Step 2: Install required packages
Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package.
PM> Install-Package jQuery
PM> Install-Package angularjs -Version 1.2.26
PM> Install-Package Newtonsoft.Json
Step 3: Create a layout page
Create a layout page in Views-> Shared ->_Layout.cshtml and add reference of angularjs and jquery.
Student Information @RenderBody()
Step 4: Create a view model “Student” in model folder
public class StudentVM { public int RollNo { get; set; } public string StudentName { get; set; } public string Class { get; set; } public string ClassTeacher { get; set; } }
Step 5: Create StudentsController
Create StudentsController in Controller folder like following. Here GetSerializedStudentVMS method serialized Student model to JSON.
public class StudentsController : Controller { // // GET: /Students/ public ActionResult Index() { return View("Index", "", GetSerializedStudentVMS()); } public string GetSerializedStudentVMS() { var students = new[] { new StudentVM {RollNo = 1, StudentName = "Jamal Uddin", Class="One", ClassTeacher="Mr. Anowar Hossain"}, new StudentVM {RollNo = 5, StudentName = "Kamal Hossain", Class="Two", ClassTeacher="Mr. Shahana Begum"}, new StudentVM {RollNo = 10, StudentName = "Jahid Hasan", Class="Three", ClassTeacher="Mr. Lutfor Rahman"}, }; //Used to make property name as camel case var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }; return JsonConvert.SerializeObject(students, Formatting.None, settings); //Returns students list as JSON } }
Step 6: Create index view
Right click of index action of StudentsController, click view and a view will automatically create to Views-> Students ->index.cshtml
Change the index.cshtml like following
@model string @{ Layout = "~/Views/Shared/_Layout.cshtml"; }
Roll No Student Name Class Course Teacher {{student.rollNo}} {{student.studentName}} {{student.class}} {{student.classTeacher}}
Here ng-init used to initialize the json object and ng-repeat works like foreach.
Step 7: Change RouteConfig.cs
Change RouteConfig like following to run StudentController by default.
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Students", action = "Index", id = UrlParameter.Optional } ); } }
Now run the application. Yes you will see the student information in a table. Thanks for your patient
Good one carry on.
Good one.. Carry on…
this is Great Bro..
Can anyone please tell me how to deserialize this returning json string (students) and convert it to list of objects in an angular js controller? Thanks in advance