2. WebGrid Sorting(排序) Ajax的实现
我们看，在上面的View代码中黄色背景表示的是创建WebGrid对象实例，其中有这样一行ajaxUpdateContainerId:"DivGrid"，他表示的是当WebGrid发生AjaxUpdate事件后，将更新后内容显示到指定的元素中。在我们示例中，我们指定的是一个Div对象。也就是说我们期望得到的结果是，当我们点击标题行的列进行排序后，应该把排序后的新内容放到这个Div中，并且是Ajax操作。但是在实际操作中，浏览器会提示如下信息：
为什么他会提示这样的信息呢?我们点击上面的结果，查看源代码，有如下行：
我们可以看到，他生成的是一个JQuery的操作方式，所以我们必须引用JQuery的类库，如下(本下在_Layout.cshtml中加载的)：
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script language="javascript" src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")"></script>
</head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script language="javascript" src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")"></script>
</head>
当你再次运行时，你就会发现，这时他已经是局部刷新了。
3. WebGrid Search Conditions(查询条件)的绑定
我们通常使用Grid的时候肯定不是直接使用的，比如说查询页面，常常有许多查询条件的，我们都知道MVC是没有ViewState的，当我们点击sorting的时候，输入的查询条件就可能会被刷新掉，所以将会影响我们的查询结果，如何解决这个问题呢?
现将View代码修改如下：
@using MVC3Tutorial;
@model List<T_STUDENT>
@{
View.Title = "Gridview";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using(Ajax.BeginForm("Gridview","Home",new AjaxOptions{ UpdateTargetId="DivGrid"}) )
{
IDictionary<string, string> searchConditions = new Dictionary<string, string>();
if(TempData["SearchConditions"]!=null)
{
searchConditions = TempData["SearchConditions"] as Dictionary<string, string>;
}
this.TempData["SearchConditions"]=searchConditions;
string studentName = searchConditions.Keys.Contains("StudentName")?searchConditions["StudentName"]:string.Empty;
string nricPassport = searchConditions.Keys.Contains("nricPassport")?searchConditions["nricPassport"]:string.Empty;
<div>
@Html.Encode("Student Name: ")
</div>
@Html.TextBox("StudentName",@studentName)
<div>
@Html.Encode("NRIC/Passport No.: ")
</div>
@Html.TextBox("nricPassport",@nricPassport)
<br/>
<input type="Submit" Text="Search"/>
var grid = new WebGrid(source:Model,
fieldNamePrefix:"grid_",
defaultSort: "StudentName",
canPage:true,
canSort:true,
ajaxUpdateContainerId:"DivGrid",
pageFieldName:"paging",
sortFieldName:"sortField",
rowsPerPage:10);
<div id="DivGrid">
@grid.GetHtml(
columns:grid.Columns(
grid.Column("StudentID", "Student ID"),
grid.Column("StudentName", "Student Name"),
grid.Column("StudentCode", "Student Code"),
grid.Column("Sex", "Sex"),
grid.Column("NRICPassport", "NRIC/Passport No.")
)
)
</div>
<h2>
Page Count:
@Html.Encode(grid.PageCount)
<br/>
Total Record:
@Html.Encode(grid.TotalRowCount)
</h2>
@Html.Encode(grid.FieldNamePrefix)
}
@model List<T_STUDENT>
@{
View.Title = "Gridview";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using(Ajax.BeginForm("Gridview","Home",new AjaxOptions{ UpdateTargetId="DivGrid"}) )
{
IDictionary<string, string> searchConditions = new Dictionary<string, string>();
if(TempData["SearchConditions"]!=null)
{
searchConditions = TempData["SearchConditions"] as Dictionary<string, string>;
}
this.TempData["SearchConditions"]=searchConditions;
string studentName = searchConditions.Keys.Contains("StudentName")?searchConditions["StudentName"]:string.Empty;
string nricPassport = searchConditions.Keys.Contains("nricPassport")?searchConditions["nricPassport"]:string.Empty;
<div>
@Html.Encode("Student Name: ")
</div>
@Html.TextBox("StudentName",@studentName)
<div>
@Html.Encode("NRIC/Passport No.: ")
</div>
@Html.TextBox("nricPassport",@nricPassport)
<br/>
<input type="Submit" Text="Search"/>
var grid = new WebGrid(source:Model,
fieldNamePrefix:"grid_",
defaultSort: "StudentName",
canPage:true,
canSort:true,
ajaxUpdateContainerId:"DivGrid",
pageFieldName:"paging",
sortFieldName:"sortField",
rowsPerPage:10);
<div id="DivGrid">
@grid.GetHtml(
columns:grid.Columns(
grid.Column("StudentID", "Student ID"),
grid.Column("StudentName", "Student Name"),
grid.Column("StudentCode", "Student Code"),
grid.Column("Sex", "Sex"),
grid.Column("NRICPassport", "NRIC/Passport No.")
)
)
</div>
<h2>
Page Count:
@Html.Encode(grid.PageCount)
<br/>
Total Record:
@Html.Encode(grid.TotalRowCount)
</h2>
@Html.Encode(grid.FieldNamePrefix)
}
