forum

home / developersection / forums / how to bind a list in angular js in mvc

Ask Question

How to bind a List in Angular js in mvc

Anonymous User 1951 28-Dec-2015
I want to bind a List in Angular js in mvc .how to do this Please help me.
.net angular js  mvc 
Updated on 28-Dec-2015
Anonymous User

Sr. Software Developer

I am a content writter !

Follow Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

28-Dec-2015
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology
@{
    ViewBag.Title = "Country";
    Layout = "~/Views/Shared/_Dashboard.cshtml";
}
<script src="/Scripts/angular.js" type="text/javascript"></script>
<script src="/Scripts/Country.js" type="text/javascript"></script>
<script language="javascript">
    var App = angular.module('Country', []);
    App.controller('CountryControler', Viewmodel);
</script>
<div data-ng-app="Country">
    <div class="box ui-draggable ui-droppable" data-ng-controller="CountryControler">
        <div class="box-header">
            <div class="box-name">
                <i class="fa fa-search"></i><span>Country List form</span>
            </div>
            <div class="box-icons">
                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a><a class="expand-link">
                    <i class="fa fa-expand"></i></a><a class="close-link"><i class="fa fa-times"></i>
                </a>
            </div>
            <div class="no-move">
            </div>
        </div>
        <div class="box-content">           
            <table class="table table-striped table-bordered table-hover table-heading no-border-bottom">
                <thead>
                    <tr>
                        <th>
                            Id
                        </th>
                        <th>
                            Country name
                        </th>
                        <th>
                            Country Code
                        </th>
                        <th>
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="item in Countrys">
                        <td>
                            {{item.countryId}}
                        </td>
                        <td>
                            {{item.countryName}}
                        </td>
                        <td>
                            {{item.countryCode}}
                        </td>
                        <td>
                            <button data-ng-click="Modify(item)">
                                Edit</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
country.js
var Viewmodel = function ($scope, $http) {    
   
    $scope.Load = function () {
        $http.post('/Location/GetCountrys').
  success(function (data, status, headers, config) {
      $scope.Countrys = data;
  }).
  error(function (data, status, headers, config) {

  });
    }
    $scope.Load();
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using EntityFramworkEcommerce;
namespace EntityFramworkEcommerce.Controllers
{
    public class LocationController : Controller
    {
        //
          
        // GET: /Location/
        EcommerceEntities db = new EcommerceEntities();
        
        public ActionResult Country()
        {
            return View();
        }       

        [HttpPost]
        public  JsonResult GetCountrys()
        {
            return Json(db.country.ToList(), JsonRequestBehavior.AllowGet);
        }
        
    }
}

How to bind a List in Angular js in mvc
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy