项目中基本每个页面都在使用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);">οnclick="editInfo</span>(' + index + ')"/>' + ' '
+ '<img src="../../Images/icons/cancel.png" width="16px" height="16px" alt="删除" <span style="background-color: rgb(255, 255, 51);">οnclick="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。
至于分部视图是提前封装好的。这里的遗憾就是封装的很简陋,只能实现基本功能。