在ASP.NET MVC 2中使用Developer Express MVC Extensions开发Web应用程序时,实现Master-Detail视图可能会遇到一些挑战。本文将指导如何在DevExpress的GridView中实现这一功能。
假设已经熟悉ASP.NET MVC2开发,并且拥有以下环境:
本文使用的是Developer Express V2010 vol 2版本。
如果像一样喜欢简洁明了的表达,那么直接进入步骤指导。稍后会有更多背景信息的讨论。
假设已经有一个ASP.NET MVC2解决方案,并且有一些模型和控制器。为了使用DevExpress的GridView,需要将主要内容放入一个部分页面,该页面将被渲染到List action页面(称之为Index以保持简单):
<%@ Page Title="Cool Master-Detail GridView" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MyParentTable>>" %>
接下来,创建名为IndexPartial的部分视图。可能已经有了视图页面,或者准备输入它。也许想使用脚手架视图。好的,听到了;脚手架对于普通列表很有用,但对于DevExpress的GridView不可用,对吧?听说,去CodePlex下载MVC Templates for DevExpress,作者为了利益在那里发布了这个模板(注意:不将模板作为本文的下载添加,引用CodePlex,因为模板不是本文的主要话题,而且CodePlex有很棒的版本控制功能,所以总是能得到最新的模板)。
假设主网格和详细信息网格将通过MasterId(主网格的主键)连接:
public ActionResult DetailIndexPartial(int MasterId)
{
var details = db.GetDetailData(MasterId);
return View();
}
现在,准备进行魔法操作——将详细信息渲染添加到IndexPartial.ascx视图中。
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MyParentTable>>" %>
添加了3行:17-19,其余的都来自脚手架。还为第一列添加了标题(第10行),以提醒删除此列(删除第10行)可能是一个好主意。
现在,可以运行项目并享受Master-Detail页面的外观了。