เริ่มจาก สร้าง project แบบ MVC ใน VS2013
จากนั้น เข้า NuGet ติดตั้ง angularJS
<script src="~/Scripts/angular.js"></script>
เรียกใช้ angularJS
<div ng-app="" ng-controller="person2Controller">
<p><input type="text" ng-model="name" ng-show="false"></p>
<p>Filtering input(Name only):</p>
<p><input type="text" ng-model="name2.Name"></p>
<table class="table table-bordered table-hover" style="width:800px">
<tr>
<th>#</th>
<th>Name</th>
<th>LastName</th>
<th>Address</th>
<th>City</th>
<th>PostalCode</th>
<th>Country</th>
<th>Notes</th>
</tr>
<tr ng-repeat="x in name | filter:name2 ">
<td>{{ x.id }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.LastName }}</td>
<td>{{ x.Address }}</td>
<td>{{ x.City }}</td>
<td>{{ x.PostalCode }}</td>
<td>{{ x.Country }}</td>
<td>{{ x.Notes }}</td>
</tr>
</table>
</div>
<script>
function person2Controller($scope,$http) {
var site = "http://localhost:19937";
var page = "/Api/";
$http.get(site + page).success(
function (response) {
$scope.name = response;
}
);
}
</script>
######################################################################
หลังจากเขียน Code ฝั่งหน้าบ้านเสร็จ ก้อมาจัดการฝั่งหลังบ้านกัน
public ActionResult Index()
{
IEnumerable
new TestModel() { id="1" ,Name="Rawee" ,LastName="Sri" , City="AAA", Country="", Address ="", Notes="" , PostalCode ="" },
new TestModel() { id="2" ,Name="yee" ,LastName="sss" , City="AAA", Country="", Address ="", Notes="" , PostalCode ="" },
new TestModel() { id="3" ,Name="amp" ,LastName="hh" , City="AAA", Country="", Address ="", Notes="" , PostalCode ="" },
new TestModel() { id="4" ,Name="peak" ,LastName="Shhjri" , City="AAA", Country="", Address ="", Notes="" , PostalCode ="" }
};
return Json(testModel, JsonRequestBehavior.AllowGet);
}
เป็นอันเสร้จ พิธี ทดสอบ รัน ได้ผลลัพธ์ ดังใจ
<