我之前做了一个用于打标签的用户控件,结合ASP.NET的ScriptManager,可以实现页面部分更新的AJAX效果。这段时间忙着网站改版,这个用户控件不想就那么丢掉,所以想稍加改进,然后继续使用。
现在有个问题:用户点击“添加标签”,弹出这个打标签控件。很自然,这个控件应该在点击位置附近,点击位置不同,弹出位置也应该跟着变化。
怎么样才能实现这种效果?
不能在c#代码里面设置这个弹出位置,比如将点击坐标传给后台代码,然后在后台代码里设置CSS,不起效果的。
只能依靠JS了。但是这个JS该怎么触发呢?象jquery,有回调函数。但ASP.NET的AJAX,有这个东西吗?
有的。
【用户控件页面代码 】
<div id="pt_divPasteTag" style="position:absolute;width:400px;">
<div class="pt_t" style="width:100px;">打标签</div>
</div>
<div>
<script type="text/javascript" language="javascript">
var _pt_x = 0;
var _pt_y = 0;
function pt_ShowBox(btn) {//此函数供调用页面激发按钮调用
triger = $("#" + btn.id);
_pt_x = triger.position().left;
_pt_y = triger.position().top;
$("#" + pt_pastebtn).click();
}
function pt_OffsetBox() {//此函数供调用页面委托程序使用
var box = $("#pt_divPasteTag");
box.css("left",_pt_x);
box.css("top",_pt_y);
}
</script>
</div>
【用户控件后台代码】
public delegate void ClickEventHandler(object sender, EventArgs e);
public event ClickEventHandler ShowClick;
protected void btnPaste_Click(object sender, EventArgs e)
{
if (ShowClick != null)
{//执行受委托的方法
ShowClick(this, e);
}
this.Show();
}
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" EnableViewState="false">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
</Triggers>
<ContentTemplate>
<div>
<div id="divPaste" οnclick="pt_ShowBox(this)"><a id="lnkPaste" href="javascript:;">添加</a></div>
</div>
<uc1:PasteTag ID="PasteTag1" runat="server" OnShowClick="PasteTag1_ShowClick"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
【调用页面的后台代码】
protected void PasteTag1_ShowClick(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(
this.UpdatePanel1
, this.GetType()
, "pt_OffsetBox"
, "pt_OffsetBox()"
, true);
}
最为关键的地方,就是【调用页面的后台代码】里,
ScriptManager.RegisterStartupScript(
this.UpdatePanel1
, this.GetType()
, "pt_OffsetBox"
, "pt_OffsetBox()"
, true);
使得打标签控件弹出以后,随之调用JS函数 pt_OffsetBox,对位置进行修正。