Friday, October 28, 2016

Quick coding excersice to learn Angular

I have created one simple user interface with MVC Controller to understand AngularJS directive, controller, module, GET and PUT method. This will help at beginner level, one single code will let you know many things.

User Interface Code














































































MVC C#.NET Controller Code

namespace AngularTutorial.Controllers
{
    public class Emp
    {
        public string Name {get; set;}
        public string City {get; set;}
    }

    public class AngularController : Controller
    {
         public ActionResult Angular()
        {
            return View();
        }

        [HttpGet]
        public JsonResult GetEmpData()
        {
            List empList = new List();

            for (int i = 0; i <= 5; i++)
            {
                Emp emp = new Emp();
                emp.Name = "Ritesh - " + i;
                emp.City = "Jbp - " + i*i;
                empList.Add(emp);
            }
            return Json(empList, JsonRequestBehavior.AllowGet);
         }

        [HttpPost]
        public ActionResult Employee(Emp emp)
        {
            if (ModelState.IsValid)
            {
                // Add data insert/update logic here
            }
            return View();
        }
}
}

User Interface Run time


 

Referencehttp://www.w3schools.com/angular/