MVC中用分部视图封装DataGrid-优快云博客

本文介绍了一种在ASP.NET MVC项目中封装DataGrid组件的方法，利用分部视图实现页面复用，提高开发效率。文章详细描述了从创建分部视图到在控制器中调用的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中基本每个页面都在使用DataGrid，所以就在想能不能封装出一个DataGrid控件，大家都使。这样有变化后，改一处就好了。刚开始我是以用户控件这个角度去百度的。看过几篇后发现内容不是我想要的。MVC webForm中有用户控件这个概念，可是到了MVC cshtml中就不存在了。取而代之的是分部视图。后面我就开始捣鼓分部视图了。有时候我再想我们的这种封装会不会很蹩脚。也管不了那么多，盲人摸象吧。有这个经历总比没有的好。下面我描述一下我是怎么封装的。

思路是简单的：就是将easyui中的DataGrid画在分部视图中。然后将需要动态变化的地方添加变量，不同情况下传入不同的值就实现了以不变应万变的效果。

分部视图：

在MVC中，通常，我们创建了Controller后，会点右键，添加一个View。VS会默认在Views文件夹里建立对应的view文件。但对于partialView，我们不这样做。因为它是一个可重用的View，所以应该放到Shared 文件夹下。MVC是“约定先行”的编程，所以默认会去找Shared文件夹下的View以及当前页面所在Controller下的View。所以我们得在Shared文件夹上点右键，添加一个View，并且选择“Create as a Partial View”，这样就不会添加layout等代码，是个完全空白的view。

调用分部视图的方法：

@Html.Action("test", "home") 这种调用方法是通过调用HomeController下的test方法返回PartialView；

@Html.PartialView(“ViewUserController1”) 这种方法是直接调用PartialView。

当然这些方法都有多种重载函数。可以传入其他参数。我们还可以直接在脚本文件中调用home/test，这样也能达到效果。

完整代码以及在代码中如何使用

分部视图：ViewUserController1.cshtml

<br />
<br />

<script type="text/javascript">
    function formatOper(value, row, index) {
        return '<img src="../../Images/icons/pencil.png"  width="16px" height="16px" alt="编辑" <span style="background-color: rgb(255, 255, 51);">onclick="editInfo</span>(' + index + ')"/>' + '  '
        + '<img src="../../Images/icons/cancel.png"  width="16px" height="16px" alt="删除" <span style="background-color: rgb(255, 255, 51);">onclick="delInfo</span>(' + index + ')" />'
    }
 
</script>

<table <span style="background-color: rgb(255, 255, 51);">id="dg"</span> class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
            data-options="singleSelect:false,collapsible:true,url:<span style="background-color: rgb(255, 255, 51);">'@ViewData["url"]</span>',method:'get'">
        <thead>
            <tr>
                    <th data-options="field:'ck',checkbox:true"></th> 
                @foreach (var col in <span style="background-color: rgb(255, 255, 255);">ViewData["col"]</span> as List<string[]>)
                {    
                                  
                    <th data-options="field:'<span style="background-color: rgb(255, 255, 51);">@col[0]</span>',width:80"><span style="background-color: rgb(255, 255, 51);">@col[1]</span></th>
                }
                    <th data-options="field:'operate',width:60,align:'center',formatter:formatOper">操作</th>
            </tr>
        </thead>
    </table>

用黄色标出的部分都是需要动态填入的值和待完善的function入口。

主页面：Index.cshtml

@{
    ViewBag.Title = "主页";
}

<h2>@ViewBag.Message</h2>
<p>
    若要了解有关 ASP.NET MVC 的更多信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。
</p>

<script type="text/javascript">
    function <span style="background-color: rgb(255, 255, 51);">delInfo()</span> {
        alert("删除");
    }
    
    function <span style="background-color: rgb(255, 255, 51);">editInfo()</span> {
        $("#dlg").dialog("open").dialog('setTitle', '编辑用户'); 
    }
</script>

<span style="background-color: rgb(255, 255, 51);">@Html.Action("test", "Home")</span>

    <!-- 弹出操作框-->  
	<div id="dlg" class="easyui-dialog" style="width: 400px; height: 450px; padding: 10px 20px;"
       closed="true" buttons="#dlg-buttons"> 	 
    </div>

黄色标志的部分是调用分部视图的代码，和两个function实现体。

HomeController中的代码：

 #region DataGrid完成的代码段
        
        /// <summary>
        /// 填写表头信息
        /// </summary>
        public void addHeadInfo()
        {
            List<string[]> col = new List<string[]>();
            string[] a = { "number", "编号" };
            string[] b = { "name", "姓名" };
            string[] c = { "sex", "性别" };
            string[] e = { "birth", "生日" };
            string[] f = { "tel", "电话" };
            col.Add(a);
            col.Add(b);
            col.Add(e);
            col.Add(f);
            col.Add(c);
            ViewData["col"] = col;
        }

        /// <summary>
        /// 查询方法
        /// </summary>
        /// <returns></returns>
        public ActionResult <span style="background-color: rgb(255, 255, 51);">test</span>()
        {
            addHeadInfo();

            ViewData["url"] = <span style="background-color: rgb(255, 255, 51);">"/Home/test2"; </span> 
            
            return PartialView("ViewUserControl1");                        
        }
         
        /// <summary>
        /// 查询全部信息
        /// </summary>
        /// <returns></returns>
        public ActionResult <span style="background-color: rgb(255, 255, 51);">test2</span>(string arg)
        {
            List<UserInfoModel> li = new List<UserInfoModel>();

            if (null != arg && !"".Equals(arg))
            {
                //条件查询
                UserInfoModel user = new UserInfoModel
                {
                    Number = "1",
                    UserName = "jin",
                    sex = "女",
                    birthday = "2014年4月4日",
                    isCouple = "是"
                };
                li.Add(user);
            }
            else
            {
                //全部查询
                UserInfoModel user2 = new UserInfoModel
                {
                    Number = "2",
                    UserName = "hxj",
                    sex = "女",
                    birthday = "2014年12月16日",
                    isCouple = "是"
                };
                li.Add(user2);
            }
            var ltDate = li.Select
                   (
                   p => new
                   {
                       number = p.Number,
                       name = p.UserName,
                       sex = p.sex,
                       birth = p.birthday,
                       tel = p.isCouple
                   }
                   ).ToList();

              return Json(ltDate, JsonRequestBehavior.AllowGet);
        }

        #endregion

这段代码中有三个代码：addHeadInfo，这是不同情况下的表头信息。test方法是返回PartialView，给DataGrid传入URL。这个URL指向的是test2，所以test2所做得事情就是从数据库中读取数据，返回json格式字符串。我这个DEMO中并没有使用真实数据，用的是我模拟的假数据。

现在总结一下：如何使用该分部视图。

第一步：调用分部视图：@Html.Action("test", "Home")，第二步：再Controller中加入action.有三个：先完成表头信息；在完成home/test，左后完成绑定URL的action。

至于分部视图是提前封装好的。这里的遗憾就是封装的很简陋，只能实现基本功能。