在ASP.NET MVC3 中使用OData

1. 建立一個asp.net mvc3 應用程式項目
2. 加入服務參考
   
3. 輸入地址：http://services.odata.org/Northwind/Northwind.svc/ 轉到並添加NorthwindService命名空間
   
4. 建立控制器
   
5. 按F6進行編譯
6. 添加強型別分部視圖ProductList
   
7. 替換Views/Product/ProductList.cshtml代碼
   View Code

   @model IEnumerable<ODataMvcApplication.NorthwindService.Product><table>    <tr>        <th>            ProductName        </th>        <th>            SupplierID        </th>        <th>            CategoryID        </th>        <th>            QuantityPerUnit        </th>        <th>            UnitPrice        </th>        <th>            UnitsInStock        </th>        <th>            UnitsOnOrder        </th>        <th>            ReorderLevel        </th>        <th>            Discontinued        </th>    </tr>@foreach (var item in Model) {    <tr>        <td>            @Html.DisplayFor(modelItem => item.ProductName)        </td>        <td>            @Html.DisplayFor(modelItem => item.SupplierID)        </td>        <td>            @Html.DisplayFor(modelItem => item.CategoryID)        </td>        <td>            @Html.DisplayFor(modelItem => item.QuantityPerUnit)        </td>        <td>            @Html.DisplayFor(modelItem => item.UnitPrice)        </td>        <td>            @Html.DisplayFor(modelItem => item.UnitsInStock)        </td>        <td>            @Html.DisplayFor(modelItem => item.UnitsOnOrder)        </td>        <td>            @Html.DisplayFor(modelItem => item.ReorderLevel)        </td>        <td>            @Html.DisplayFor(modelItem => item.Discontinued)        </td>    </tr>}</table>

    

8. 替換Controllers/ProductController.cs代碼View Code

   using ODataMvcApplication.NorthwindService;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace ODataMvcApplication.Controllers{    public class ProductController : Controller    {        public ActionResult Index()        {            return View();        }        public PartialViewResult Products(int id)        {            var context = new NorthwindEntities(new Uri("http://services.odata.org/Northwind/Northwind.svc/"));            var products = from product in context.Products where product.CategoryID == id select product; return PartialView("ProductList", products.ToList());        }        static public List<Category> Categories() { var context = new NorthwindEntities(new Uri("http://services.odata.org/Northwind/Northwind.svc/")); return context.Categories.ToList(); }    }}

    

9. 添加Index視圖
   
10. 替換Views/Product/Index.cshtml代碼View Code

    @{    Layout = null;}<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script><script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script><script type="text/javascript">    $(document).ready(function () {        $("#category").change(function () { loadView($(this).val()); }); loadView("1");    });    function loadView(cat)    {        $("#content").html("載入中。。。。");        $.get('@Url.RouteUrl("default", new { controller = "Product", action = "Products" })', { id: cat }, function (data) {            $("#content").html(data);        });    }</script><div>    <h1>Products</h1>    <div>        <div>Category:</div>        @Html.DropDownList("category", ODataMvcApplication.Controllers.ProductController.Categories().Select(c => new SelectListItem { Text = c.CategoryName, Value = c.CategoryID.ToString() }))    </div>    <hr />    <div id="content">載入中....</div></div>

     

11. 預覽效果