می خواهیم یک مثال ساده از دریافت اطلاعات از سرور و نمایش آن در یک View را توسط AngularJS، با هم بررسی کنیم.
در کد فوق توسط ویژگی ng-init می‌توانیم داده هایمان را Initialize کنیم و در نهایت توسط ویژگی ng-repeat می‌توانیم داده هایمان را در صفحه نمایش دهیم. این ویژگی دقیقاً مانند یک حلقه foreach عمل میکند؛ مثلا معادل آن در Razor سمت سرور، به این صورت است:
خوب؛ حالا میخواهیم این اطلاعات را از سمت سرور بخوانیم و به صورت فوق نمایش دهیم. ابتدا مدل مان را به این صورت تعریف می‌کنیم :
سپس در داخل کنترلر زیر اطلاعات را به صورت in memory data تعریف می‌کنیم (جهت سهولت دموی کار) و به view مورد نظر پاس می‌دهیم. البته شما می‌توانید این اطلاعات را از دیتابیس بخوانید؛ روال کار فرقی نمی‌کند:
view را نیز به این صورت تغییر می‌دهیم :
تنها تغییری که در کد فوق اعمال شده است، به جای اینکه ویژگی ng-init را به صورت inline مقداردهی کنیم آن را از کنترلر دریافت کرده ایم.
همانطور که می‌دانید برای نمایش تعدادی از اشیاء در انگولار می‌توان به این صورت نیز عمل کرد:
<div ng-init="products=[
{id:1,name:'product1',price:25000,description:'description of product'},
{id:2,name:'product2',price:5000,description:'description of product'},
{id:3,name:'product3',price:5000,description:'description of product'},
{id:4,name:'product4',price:2000,description:'description of product'},
{id:5,name:'product5',price:255000,description:'description of product'}
]"><div><div><table><tr><th>Id</th><th>Product Name</th><th>Price</th><th>Description</th></tr><tr ng-repeat="product in products"><td>{{product.id}}</td><td>{{product.name}}</td><td>{{product.price}}</td><td>{{product.description}}</td></tr></table></div></div></div>@foreach (var product in Model.products)
{<td>product.id</td><td>product.name</td><td>product.price</td><td>product.description</td>
}namespace AngularAndMvc.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public float Price { get; set; }
public string Description { get; set; }
}
}namespace AngularAndMvc.Controllers
{
public class ProductController : Controller
{
public ActionResult Index()
{
return View("Index", "", GetSerializedProduct());
}
public string GetSerializedProduct()
{
var products = new[]
{
new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
};
var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(products,Formatting.None,settings);
}
}
}همانطور که در کد بالا مشخص است، اطلاعات را به صورت JSON به View مان پاس داده ایم و برای اینکه ابتدای نام مقادیر بازگشتی به صورت حروف بزرگ نباشند (به صورت خودکار تبدیل به camel case شوند) پارامتر settings را برای متد SerializeObject تعیین کرده‌ایم:
var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(products,Formatting.None,settings);@model string<div ng-init="products = @Model"><div><div><table><tr><th>Id</th><th>Product Name</th><th>Price</th><th>Description</th></tr><tr ng-repeat="product in products"><td>{{product.id}}</td><td>{{product.name}}</td><td>{{product.price}}</td><td>{{product.description}}</td></tr></table></div></div></div>در خروجی هم اطلاعات به این صورت نمایش داده می‌شوند :
سورس مثال فوق را هم از اینجا می توانید دریافت کنید.