ثبت داده ها در view با استفاده از ng repeat

در این مقاله می خواهیم با استفاده از تکنولوژی Angular JS و MVC داده هایی که در برنامه داریم را به یک View متصل کنیم تا نمایش داده شوند.

ng-repeat چیست؟

ng-repeat فقط یک حلقه است که آن را در تکنولوژی ای که می خواهیم، به کار می گیریم. کاری که دایرکتیو ng-repeat انجام می دهد این است که یک قالب خاص را به ازای همه موارد درون یک مجموعه تکرار می کند و به همه آن موارد، آن قالب خاص را می دهد.

شکل دستوری این دایرکتیو عبارت است از :

<tr ng-repeat="data in dataList">
	<td>{{$index+1}}</td>
       <td ng-bind="data.Name"></td>
       <td ng-bind="data.Email"></td>
       <td ng-bind="data.Phone"></td>
</tr>

مثال

ما می خواهیم یک پروژه MVC 5 از نوع empty ایجاد کنیم و نام آن را AngularWithMVC بگذاریم.

بعد از این که پروژه را ایجاد کردیم، باید با استفاده از nuget package، به پروژه angularjs را اضافه کنیم. همچنین می توانید از angularjs core نیز استفاده کنید.

نکته: بهتر است از angularjs core استفاده شود.

بعد از این مرحله، نیاز داریم تا bootstrap به پروژه اضافه کنیم.

سپس یک controller اضافه کنید و نام آن را HomeController بگذارید.

کد های موجود در این Controller عبارتند از :

using System.Web.Mvc;

namespace AngularWithMVC.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult JsonValue()
        {
            var data = new[]{ new {Name="ایمان مدائنی",Email="Example@gmail.com",Phone="987654321"},
             new {Name="سجاد باقرزاده ",Email="Example@gmail.com",Phone="123456789"},
             new {Name="ایمان مدائنی",Email="Example@gmail.com",Phone="9811234343"},
             new {Name="سجاد باقرزاده ",Email="Example@gmail.com",Phone="9889657454"},
             new {Name="ایمان مدائنی",Email="Example@gmail.com",Phone="9535468899"},
             new {Name="سجاد باقرزاده ",Email="Example@gmail.com",Phone="965453532453"},
             new {Name="ایمان مدائنی",Email="Example@gmail.com",Phone="9098867456343"},
             new {Name="سجاد باقرزاده ",Email="Example@gmail.com",Phone="342658678574"}
            };
            return Json(data, JsonRequestBehavior.AllowGet);
        }
    }
}

دو پوشه به نام های shared و home به پوشه views اضافه کنید. _layout.cstml را در پوشه shared اضافه کنید تا به عنوان layout از آن استفاده کنیم.

_layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/angular.min.js"></script>
    </head>
    <body>
        <header>
            <div class="row" style="padding-left:20px;"><h1>ng-repeat in AngularJS</h1></div>
        </header>
         <section>
            @RenderBody()
        </section>
        <footer>
            <div class="row" style="padding-left:20px;"><p>© @DateTime.Now.Year - My ASP.NET MVC Application With AngularJS</p></div>
        </footer>
    </body>
</html>

در پوشه Scripts یک پوشه به نام Data اضافه کنید و در پوشه ی Data، یک فایل javascript به نام Data.js ایجاد کنید.

Data.js

var myApp = angular.module('myModule', []);
myApp.controller('myController', function ($scope, $http) {
    $scope.dataList = [];
    $http.get('/Home/JsonValue').success(function (response) {
        if (response != null || response != "undefined"){
            $scope.dataList = response;
        }
    })
});

یک view ایجاد کنید و نام آن را Index بگذارید و در آن ، _layout.cshtml را فراخوانی کنید.

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_layout.cshtml";
}
<script src="~/Scripts/Data/Data.js"></script>
<div class="table-responsive" ng-app="myModule" ng-controller="myController">
    <table class="table" style="width:600px">
        <thead>
            <tr>
                <th>SN</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in dataList">
                <td>{{$index+1}}</td>
                <td ng-bind="data.Name"></td>
                <td ng-bind="data.Email"></td>
                <td ng-bind="data.Phone"></td>
            </tr>
        </tbody>
    </table>
</div>

حالا باید برنامه را اجرا کنیم تا خروجی را ببینیم .

آموزش angular

فایل های ضمیمه

5294_AngularWithMVC.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

ثبت داده ها در view با استفاده از ng repeat

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید