实现一个多变的Link的全过程

在一个页面中有一个Link需要有不同表现形式和处理方式，这给Web开发带来一些不好解决的问题。在上一个JobXxx项目中就有一个类似的需求，在这里小结写出来。

描述问题：
要求从一个数据表中读取一组数据然后绘制一个表格，表格中的一个特定列根据取得的数据不同而不同。取得的数据表有多个列，其中的Column4，是Int型可能取值有0 1 2 3 。根据这个列内容的不同，需要显示的结果也不同。当值为0时，显示一行不可以点击的普通文字如: 已经处理完成。当为1时显示一个调用Javascript的Link如：你没有权限。点击后弹出一个设定的ModuleDialog，要用户输入信息，这个ModuleDialog关闭后可能引发Postback，也可能不引发PostBack。当值为2时显示一个PostBack的Link如：删除，需要执行类似删除本行的操作。当值为3时显示两个Postback的Link如修改和提交，修改操作，需要UI上弹出一个ModuleDialog显示修改对话框，并修改数据表中本行的一个列中的值，表明本行在修改状态。提交操作，执行类似修改本表和其他表相关信息的操作。如下图：

真实的数据内容：

实际要显示的样子：

分析问题：
  根据问题的描述，需要实现4种不同行为的Link。1.简单文字，不响应用户的点击。2.Javascript Link调用本地Javascript弹出权限内容的ModuleDialog。3.PostBack的Link并需要带回两个参数(1)用户的操作类型，确定是删除还是提交，(2)当前行的ID，确定用户操作的数据内容。4.Ajax+Javascript Link 用Javascript调用本地Javascript 弹出数据修改的ModuleDialog，让用户修改相关数据，Ajax Send回来修改本行的状态为正在修改。
  问题 1只需要Render一行静态文字，问题2 和4都是Render固定的Javascript。这里最难实现的可能就是问题3动态Render出不同的PostBack Link，并且PostBack时要带回两个参数的问题。需要带回两个参数，就需要两个HiddenField，在PostBack之前先调用Javascript填写两个参数，然后PostBack。
求解问题：

第一回尝试——DataView
  看到这个问题描述，我第一个想到的是使用DataView控件来做，因为需要实现的大部分内容和数据绑定有关。可以利用DataView的数据绑定来实现。托一个DataView上来就开始了Coding。当数据绑定完成，数据基本上显示出来了。开始写动态RenderLink部分的代码时我发现无从下手了，找不到一个合适的机会去修改DataView数据绑定后的数据内容。挂上DataView的RowCreated事件和RowDataBound事件虽然都可以拿到e.Row.DataItem当前行的所有信息，但数据内容都是Readonly的。因为已经DataBinding了，所以Readonly不能改了。看来只有在DataBinding之前下手，在数据绑定前先修改数据源然后再绑定。在取得数据后，再遍历修改一次数据修改成想要显示的内容。可是Column4的数据类型是Int的不能修改为一串Javascript或html。只好先把数据表中除Column4的其它的内容Copy到一个新的DataTable然后重填Column4的列类型和数据。然后数据绑定。这里把Html和Javascript当成数据写入Column4，对页面的HtmlDecode有一定影响，不过可以解决。但是从头到尾看这个方法都是很别扭。
  这个方法的好处：利用了DataView的DataBinding，可以直接用DataView的AutoGenerateEditColumn PageSize等属性，实现Row的强大功能。
  这个方法的坏处：这是个比较别扭的做法。首先，重新Copy并修改DataTable是一个非常低效的做法。当大数据时可能会出现超时的问题。可以把这种重新填数据的工作放在DA层直接写在SQL中可能会提高效率，不过这种做法，严重违反了分层的原则，把UI控制和业务逻辑直接写入了DA层。其次，Javascript Html要写入到行的内容中。非常不易维护。（本文事例代码中BuildTestData. BuildData()方法模拟BR层向UI层提供数据的方法。）

第二回尝试——DataList
  由于DataView不能在DataBinding后修改数据内容，打算用DataList试试看看是否有办法解决问题。拖上一个DataList，并为这个DataList设计一个ItemTemplate，配置一下DataBinding的DataSource，这个DataList基本上就可以工作了，DataList显示了所有的数据信息和刚才的DataView的显示结果差不多。修改Column4的显示方法，自己动态Render可以实现了需要的显示结果。
<asp:DataList ID="DataList1" runat="server" CellPadding="4" DataSourceID="ObjectDataSource1"
ForeColor="#333333" BorderColor="PaleVioletRed" BorderWidth="1px">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#E3EAEB" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<table>
<tr>
<td width="150px">
<%# DataBinder.Eval(Container.DataItem, "Column0")%>
</td>
<td width="150px">
<%# DataBinder.Eval(Container.DataItem, "Column1")%>
</td>
<td width="150px">
<%# DataBinder.Eval(Container.DataItem, "Column2")%>
</td>
<td width="150px">
<%# DataBinder.Eval(Container.DataItem, "Column3") %>
</td>
<td width="100px">
<%# DrawFourRow(Container.DataItem)%>
</td>
<td width="150px">
<%# DataBinder.Eval(Container.DataItem, "Column5")%>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
是这个DrawFourRow给出了一个重新定义Render的口子。DrawFour：
protected string DrawFourRow(object dataItem)
{
DataRowView row = dataItem as DataRowView;
if (null == row)
{
return string.Empty;
}
int? i = row[4] as int?;
if(!i.HasValue)
{
return string.Empty;
}
switch (i.Value)
{
case 0:
return "已经处理完成";
case 1:
return "<a href=\"#\" onclick=\"" + string.Format(JavascriptNoAuthorizationFunction,row[0].ToString()) + JavascriptReturnFalse + "\">你没有权限</a>";
case 2:
return "<a href=\"#\" onclick=\"" + string.Format(JavascriptAssignParameterFunction, ViewDeleteLinkMark, row[0].ToString()) + JavascriptSubmitFunction + "\">删除</a>";
case 3:
return "<a href=\"#\" onclick=\"" + string.Format(JavascriptModifyFunction, row[0].ToString()) + JavascriptReturnFalse + "\">修改</a> <a href=\"#\" onclick=\"" + string.Format(JavascriptAssignParameterFunction, ViewApplyLinkMark, row[0].ToString()) + JavascriptSubmitFunction + "\">提交</a>";
default:
return string.Empty;
}
}
为了配合DrawFour 需要一些Javascript,和两个HiddenFiled来记录操作类型和当前行信息。（详细内容在事例代码中）
这个方法的好处：从性能上比用DataView要好得多，一次Render解决问题。给自己定义Render留出了很大的空间。
这个方法的坏处：需要为每一个可以PostBack的行为，在PostBack之前调用Javascript设置一个与自己操作类型独一无二的 ProcessType，以保证PostBack后可以找到指定的处理方法。所以当界面上可以PostBack的控件多起来的时候，这不是一个好做法。同时需要在客户端写一个Javascript PostBack的方法，调用Forms[0].submit();这种做法有点野蛮，不够美观。

第三回尝试—— IPostBackEventHandler （去掉那两个HiddenField）
在当前的Page会提供this.Page.ClientScript.GetPostBackClientHyperlink这样一个方法。
ClientScriptManager.GetPostBackClientHyperlink (Control, String) ClientScriptManager.GetPostBackClientHyperlink (Control, String, Boolean)
GetPostBackClientHyperlink会产生javascript:__doPostBack(para1,para2)这样一个客户端的Javascript 来PostBack，当客户端没有PostBack对应的__doPostBack方法时会添加一个客户端PostBack的Javascript方法。
<script type="text/javascript">

</script>
观察这个方法，发现服务器端会通过__EVENTTARGET和__EVENTARGUMENT这两个Asp.Net引擎自己的HiddenField来传递PostBack的参数，__EVENTTARGET来确定Raise的Event和回调的方法，__EVENTARGUMENT来确定argument。是否可以利用这两个东东来代替原来自己的添加的HiddenField并完成任务。
经过测试和查看MSDN发现，GetPostBackClientHyperlink送入的两个参数一个是Control，一个是String参数。被Render成客户端的Javascript后， __doPostBack的前一个参数是Control的ClientID，后一个是自己送的String参数。经过几次尝试用一个LinkButton，并重写Page的RaisePostBackEvent方法实现了去掉那两个HiddenField的想法。
(1)  先加一个可以触发PostBack的Asp Server端的Control，设置这个Control的Visible为False，这个Control没有真正的界面用处，只是告诉Asp引擎有一个PostBack的Control: <asp:LinkButton ID="helpButton" runat="server" Visible="false" OnClick="helpButton_Click">LinkButton</asp:LinkButton>
(2)  在要Post的Link处调用GetPostBackClientHyperlink方法写入调用Postback要Render的客户端代码： HyperLink link = container.FindControl("hlnkFourColumn") as HyperLink;if (link != null){
link.Text = "删除";
link.NavigateUrl = this.Page.ClientScript.GetPostBackClientHyperlink(helpButton, ViewDeleteLinkMark + ParameterSeparator + row[0].ToString()); ;
link.Visible = true;
} 第二个参数写想要传回来的参数。
(3)  Override Page的RaisePostBackEvent 方法
base.RaisePostBackEvent(sourceControl, eventArgument);
//Now the eventArgument will be the director.
WebControl control = sourceControl as WebControl;
if (control != null && control == this.helpButton)
{
if (!string.IsNullOrEmpty(eventArgument))
{
string[] para = eventArgument.Split(new string[] { ParameterSeparator }, StringSplitOptions.RemoveEmptyEntries);
if (para[0] == ViewDeleteLinkMark)
{
ViewDelete_Click(para[1]);
}
if (para[0] == ViewApplyLinkMark)
{
ViewApply_Click(para[1]);
}
}
}
拆解参数，指定调用方法。

这个方法的好处：去掉了自己添加的HiddenField，不用维护HiddenField，也不用担心界面上有再多的PostBack控件。
这个方法的坏处：需要添加一个占位子的不显示的可以PostBack的Server端控件。

第四回尝试——Page + IPostBackEventHandler （去掉那个占位子的Server端控件）
用HttpLook观察上一种方法的Request的内容，在名值串中__EVENTTARGET，__EVENTARGUMENT中都有值，所以可以直接在PageLoad中使用this.Request["__EVENTTARGET"]，拿到值。所以想到了让page直接来当这个占位子的Server端Control，所以代码变为了 link.NavigateUrl = this.Page.ClientScript.GetPostBackClientHyperlink(this, ViewDeleteLinkMark + ParameterSeparator + row[0].ToString()); 同时Page 继承IPostBackEventHandler这个接口，实现public void RaisePostBackEvent(string eventArgument)方法：
public void RaisePostBackEvent(string eventArgument)
{
if (!string.IsNullOrEmpty(eventArgument))
{
string[] para = eventArgument.Split(new string[] { ParameterSeparator }, StringSplitOptions.RemoveEmptyEntries);
if (para[0] == ViewDeleteLinkMark)
{
ViewDelete_Click(para[1]);
}
if (para[0] == ViewApplyLinkMark)
{
ViewApply_Click(para[1]);
}
}
}
最终实现要求。通过上面的一次次变化，可以抽出一个种Link可以带回一个参数并且不用HiddenField:
public delegate void BackLinkWithParameterEventHandler(object sender, BackLinkWithParameterEventArgs e);
public class BackLinkWithParameterEventArgs : EventArgs
{
public string PostBackParameter;
public BackLinkWithParameterEventArgs(string eventArgument)
{
this.PostBackParameter = eventArgument;
}
}

/// <summary>
/// Summary description for T5BackLinkWithParameter
/// </summary>
public class T5BackLinkWithParameter : HtmlAnchor
{
public bool IsNeedPostBack;
public event BackLinkWithParameterEventHandler ClickPostBack;
public string PostBackParameter;

public T5BackLinkWithParameter()
{

}

protected override void RenderAttributes(HtmlTextWriter writer)
{
if (IsNeedPostBack)
{
this.HRef = this.Page.ClientScript.GetPostBackClientHyperlink(this, this.PostBackParameter);
}
base.RenderAttributes(writer);
}

protected override void RaisePostBackEvent(string eventArgument)
{
base.RaisePostBackEvent(eventArgument);
this.OnClickPostBack(eventArgument);
}

private void OnClickPostBack(string eventArgument)
{
if (this.ClickPostBack != null)
ClickPostBack(this, new BackLinkWithParameterEventArgs(eventArgument));
}
}
使用这个Control的代码：
protected void Page_Load(object sender, EventArgs e)
{
T5BackLinkWithParameter link = new T5BackLinkWithParameter();
link.IsNeedPostBack = true;
link.PostBackParameter = "Test";
link.ClickPostBack += new BackLinkWithParameterEventHandler(link_ClickPostBack);
link.InnerText = "Test";
this.pHolder.Controls.Add(link);
}

void link_ClickPostBack(object sender, BackLinkWithParameterEventArgs e)
{
this.Title = e.PostBackParameter;
}

详细内容在示例代码中。

File: Click to Download