#AngularJS #MVC #ViewModel
▌Introduction
So
how to quickly ngInit with a ViewModel in .NET MVC?
The
answer is using JSON serialization!
▌Sample
▋MVC : ViewModel
public class VmCustomers
{
[DisplayName("公司名稱")]
public string CompanyName { get; set; }
public List<VmCustomer> Customers { get; set; }
public VmCustomers()
{
this.Customers = new List<VmCustomer>();
}
}
public class VmCustomer
{
[DisplayName("聯絡人")]
public string InCharge { get; set; }
[DisplayName("電話號碼")]
public string Phone { get; set; }
[DisplayName("傳真號碼")]
public string Fax { get; set; }
public bool WillBeSaved { get; set; }
}
|
▋MVC : Action
public ActionResult Index()
{
var customers = new VmCustomers();
customers.CompanyName = "The Force
Studio";
customers.Customers = new List<VmCustomer>() {
new VmCustomer { Sn =
0,InCharge="JB", Phone="1234", Fax="4567", WillBeSaved=true},
new VmCustomer { Sn =
1,InCharge="Lily", Phone="1234",Fax="4567", WillBeSaved=false},
new VmCustomer {
Sn = 2,InCharge="Leia", Phone="1234",Fax="4567", WillBeSaved=false}
};
return View(customers);
}
|
▋MVC : View (Html)
@model VmCustomers
@using Newtonsoft.Json
<div ng-app="app" ng-controller="Ctrl">
<table class="table" ng-init="InitCustomers(@JsonConvert.SerializeObject(Model))">
<tr>
<th>
@Html.DisplayNameFor(model =>
model.Customers.First().InCharge)
</th>
<th>
@Html.DisplayNameFor(model =>
model.Customers.First().Phone)
</th>
<th>
@Html.DisplayNameFor(model => model.Customers.First().Fax)
</th>
</tr>
<tr ng-repeat="item in customers" >
<td><label>{{item.InCharge}}</label></td>
<td><label>{{item.Phone}}</label></td>
<td><label>{{item.Fax}}</label></td>
</tr>
</table>
</div>
|
▋JS
angular.module("app", [])
.controller('Ctrl', function ($scope) {
$scope.customers = [];
$scope.InitCustomers = function (data) {
$scope.customers = data.Customers;
}
})
|
▋Result
沒有留言:
張貼留言