在Asp.net MVC中使用Repeater
1. Repeater需要手動去綁定數據。 意思是說我們要在View當中寫 服務端代碼,先從ViewData中取得數據,再去綁定到Repeater。
2. 如果一個頁面用到n+1個Repeater,那會不會瘋掉? 而且要給每一個Repeater指定 Id,必去綁數據,頭痛啊!!!
那麼~~ 可不可以讓Repeater用起來簡單點呢? 來對Repeater進行一下改造,達到目的。
在Mvc當中,使用 ViewData 來傳遞數據,那可不可以直接讓Repeater 綁定 ViewData 中的數據呢? 當然可以
看改造後的 Repeater 源碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.Mvc;
namespace RepeaterInMvc.Codes
{
public class MvcRepeater : Repeater
{
/// <summary>
/// ViewData中的鍵名
/// </summary>
public string Key { get; set; }
/// <summary>
/// 得到ViewPage對象
/// </summary>
protected ViewPage ViewPage
{
get { return base.Page as ViewPage; }
}
/// <summary>
/// 重寫Onload事件 用於綁定數據
/// </summary>
/// <param name="e"></param>
protected override void OnLoad(EventArgs e)
{
this.DataSource = this.ViewPage.ViewData[this.Key]; //得到數據源
this.DataBind(); //綁定 這樣就不用手動寫N個綁定了
base.OnLoad(e);
}
}
}
上面的代碼做了什麼:
1. 添加了一個公共屬性 Key ,表示這個Repeater要綁定 ViewData 中哪一項數據。
2. 添加了一個保護屬性 ViewPage ,指向了當前的 Page 對象 並強制轉換成 Mvc 的 ViewPage對象 (因爲我們要得到ViewData或其它Mvc相關的上下文信息)
3. 重寫了 OnLoad 事件,重寫這個事件,用來綁定數據,免得我們需要在View中手動綁定每一個Repeater,那多煩啊。
現在我們的目的已經達到了。看看怎麼使用吧:
控制器代碼:
public ActionResult Index()
{
//來點測試數據
List<Models.TestInfo> entities = new List<RepeaterInMvc.Models.TestInfo>();
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 1, Name = "Kagilo1", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 2, Name = "Kagilo2", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 3, Name = "Kagilo3", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 4, Name = "Kagilo4", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 5, Name = "Kagilo5", Email = "[email protected]" });
ViewData["TestList"] = entities;
return View();
}
再看看頁面代碼:
<%@ Register Assembly="RepeaterInMvc" Namespace="RepeaterInMvc.Codes" TagPrefix="mvc" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Repeater示例</h2>
<p>
<mvc:MvcRepeater Key="TestList" runat="server">
<ItemTemplate>
<div style="height:30px; line-height:30px;"><%# Eval("Id") %>, <%# Eval("Name") %>, <%# Eval("Email") %></div>
</ItemTemplate>
<AlternatingItemTemplate>
<div style="height:30px; line-height:30px; background:#eeeeee;"><%# Eval("Id") %>, <%# Eval("Name") %>, <%# Eval("Email") %></div>
</AlternatingItemTemplate>
</mvc:MvcRepeater>
</p>
</asp:Content>
TPS :<%@ Register Assembly="RepeaterInMvc" Namespace="RepeaterInMvc.Codes" TagPrefix="mvc" %>
在當前頁面註冊控件!!! 當然,你也可以在 web.config 中的 page/controls 節點中爲所有頁面註冊。
2. 如果一個頁面用到n+1個Repeater,那會不會瘋掉? 而且要給每一個Repeater指定 Id,必去綁數據,頭痛啊!!!
那麼~~ 可不可以讓Repeater用起來簡單點呢? 來對Repeater進行一下改造,達到目的。
在Mvc當中,使用 ViewData 來傳遞數據,那可不可以直接讓Repeater 綁定 ViewData 中的數據呢? 當然可以
看改造後的 Repeater 源碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.Mvc;
namespace RepeaterInMvc.Codes
{
public class MvcRepeater : Repeater
{
/// <summary>
/// ViewData中的鍵名
/// </summary>
public string Key { get; set; }
/// <summary>
/// 得到ViewPage對象
/// </summary>
protected ViewPage ViewPage
{
get { return base.Page as ViewPage; }
}
/// <summary>
/// 重寫Onload事件 用於綁定數據
/// </summary>
/// <param name="e"></param>
protected override void OnLoad(EventArgs e)
{
this.DataSource = this.ViewPage.ViewData[this.Key]; //得到數據源
this.DataBind(); //綁定 這樣就不用手動寫N個綁定了
base.OnLoad(e);
}
}
}
上面的代碼做了什麼:
1. 添加了一個公共屬性 Key ,表示這個Repeater要綁定 ViewData 中哪一項數據。
2. 添加了一個保護屬性 ViewPage ,指向了當前的 Page 對象 並強制轉換成 Mvc 的 ViewPage對象 (因爲我們要得到ViewData或其它Mvc相關的上下文信息)
3. 重寫了 OnLoad 事件,重寫這個事件,用來綁定數據,免得我們需要在View中手動綁定每一個Repeater,那多煩啊。
現在我們的目的已經達到了。看看怎麼使用吧:
控制器代碼:
public ActionResult Index()
{
//來點測試數據
List<Models.TestInfo> entities = new List<RepeaterInMvc.Models.TestInfo>();
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 1, Name = "Kagilo1", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 2, Name = "Kagilo2", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 3, Name = "Kagilo3", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 4, Name = "Kagilo4", Email = "[email protected]" });
entities.Add(new RepeaterInMvc.Models.TestInfo { Id = 5, Name = "Kagilo5", Email = "[email protected]" });
ViewData["TestList"] = entities;
return View();
}
再看看頁面代碼:
<%@ Register Assembly="RepeaterInMvc" Namespace="RepeaterInMvc.Codes" TagPrefix="mvc" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Repeater示例</h2>
<p>
<mvc:MvcRepeater Key="TestList" runat="server">
<ItemTemplate>
<div style="height:30px; line-height:30px;"><%# Eval("Id") %>, <%# Eval("Name") %>, <%# Eval("Email") %></div>
</ItemTemplate>
<AlternatingItemTemplate>
<div style="height:30px; line-height:30px; background:#eeeeee;"><%# Eval("Id") %>, <%# Eval("Name") %>, <%# Eval("Email") %></div>
</AlternatingItemTemplate>
</mvc:MvcRepeater>
</p>
</asp:Content>
TPS :<%@ Register Assembly="RepeaterInMvc" Namespace="RepeaterInMvc.Codes" TagPrefix="mvc" %>
在當前頁面註冊控件!!! 當然,你也可以在 web.config 中的 page/controls 節點中爲所有頁面註冊。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.