ASP.NET MVC中DevExpress GridView的Master-Detail实现

在ASP.NET MVC 2中使用Developer Express MVC Extensions开发Web应用程序时,实现Master-Detail视图可能会遇到一些挑战。本文将指导如何在DevExpressGridView中实现这一功能。

假设已经熟悉ASP.NET MVC2开发,并且拥有以下环境:

本文使用的是Developer Express V2010 vol 2版本。

解决方案概述

如果像一样喜欢简洁明了的表达,那么直接进入步骤指导。稍后会有更多背景信息的讨论。

假设已经有一个ASP.NET MVC2解决方案,并且有一些模型和控制器。为了使用DevExpressGridView,需要将主要内容放入一个部分页面,该页面将被渲染到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页面的外观了。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485