ثبت داده ها در view با استفاده از ng repeat
دوشنبه 8 شهریور 1395در این مقاله می خواهیم با استفاده از تکنولوژی 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
- AngularJs
- 1k بازدید
- 4 تشکر