在网格中添加排序链接
此时,用户无法直观地去排序,除非他在浏览器中象上面的方法输入查询字符串,因此我们在每个网格的标题行中提供超链接指向适当的网址。乍一看,这可能会像一个简单的任务,比如产品名称列,其url应该是
Products/Sortable?sortBy=ProductName&ascending=true,而价格列,则应该是
Products/Sortable?sortBy=UnitPrice&ascending=true,如此类推,归纳一下,其URL的连接方式应该象:
Products/Sortable?sortBy=ColumnName&ascending=false,同时,还应该增加一个象图标这样的指示,让用户可以清楚地看到当前排序的情况。
要做到这一点,需要创建一个局部视图。一个局部视图看上去跟WebForms模型中的用户控件的概念差不多。总之,这是一可以重用的视图。
在解决方案资源管理器中的Views/Shared目录下,鼠标右键点击,在弹出的菜单中选择“添加视图”,将其命名为SmartLink,并选中下面的两个复选框,然后选择Web.Models.ProductGridModel作为其view data class,如下图。
单击确定后,Visual Studio将创建一个新的局部视图(SmartLink.ascx)。其中局部视图只包含下列标记:
Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Web.Models.ProductGridModel>" %>
我们现在来学习如何将局部视图添加到正常的视图中去,这可以使用下列Html.RenderParial方法之一:
<% Html.RenderPartial("partialViewName", viewData); %>
<% Html.RenderPartial("partialViewName", model); %>
<% Html.RenderPartial("partialViewName", model, viewData); %>
可选的参数是一个ViewDataDictionary的ViewData对象。如果提供,可以通过
ViewData["name"].去访问这些值。
当要展示局部视图的时候,我们还需要将ProductGridModel和一些额外的信息传进来,下面的代码展示了对于产品名称一列这个表头,我们是如何通过局部视图去产生的,注意的是,我们通过ViewDataDictionary可以设置表头中显示的列的名称以及该列实际对应的是数据库中的列名:
这里设置了列名是ProductName,而显示在表头中的列名是Product。同理,其他表头列也是这样的处理,就可以把Model传递到部分视图中来了。
<tr>
<th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "ProductName" }, { "DisplayName", "Product" } }); %></th>
<th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "Category.CategoryName" }, { "DisplayName", "Category" } }); %></th>
<th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "QuantityPerUnit" }, { "DisplayName", "Qty/Unit" } }); %></th>
<th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "UnitPrice" }, { "DisplayName", "Price" } }); %></th>
<th><% Html.RenderPartial("SmartLink", Model, new ViewDataDictionary { { "ColumnName", "Discontinued" }, { "DisplayName" , "Discontinued" } }); %></th>
</tr>
...
</table>