Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to bind a list in angular js in mvc
Ask Question
Anonymous User
Anonymous User

Sr. Software Developer

I am a content writter !

Message

1 Answers

Anonymous User
Anonymous User 28 Dec 2015
Report Abuse
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);
        }
        
    }
}

Anonymous User
advertising