- 新建一个asp.net mvc3 应用程序项目
- 添加服务引用
- 输入地址:http://services.odata.org/Northwind/Northwind.svc/ 转到并添加NorthwindService命名空间
- 新建控制器
- 按F6进行编译
- 添加强类型分部视图ProductList
- 替换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>
- 替换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(); } } }
- 添加Index视图
- 替换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>
- 预览效果