使用GridView做出列选择效果(获取动态生成的控件.鼠标点选GridView.Ajax控件)
先看效果图:
其实就是个一览定制的效果,只不过由于项目的需要,需要使用GridView进行设计,至于为什么不直接使用Html+JQuery,还是因为项目需要,不然维护起来会很麻烦,在制作的过程中会遇到以下几点,记录一下:
1.使用鼠标选择GridView行
要想实现GridView相应鼠标事件,明显是需要Js支持的,为了操作简便和提高可维护行,在这里使用ASP.net的ScriptManager在页面绘制的时候把Js事件给加进去:
代码:
foreach (GridViewRow row in this.gvAllProcessItem.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
//对整行添加Js事件onclick
//事件被激发后自动回传,回传的参数为需要激发事件的GridView和事件发生的行的ClientID
row.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this.gvAllProcessItem, "Select$" + row.RowIndex.ToString(), true);
row.Attributes["style"] = "cursor:pointer";
}
}
foreach (GridViewRow row in this.gvSelectedProcess.Rows)
{
//不能对整行添加事件
//如果对整行添加事件,则下拉列表和Textbox的onclick也会被不会并引发回传
if (row.RowType == DataControlRowType.DataRow)
{
row.Cells[0].Attributes["onclick"] = ClientScript.GetPostBackEventReference(this.gvSelectedProcess, "Select$" + row.RowIndex.ToString(), true);
row.Cells[1].Attributes["onclick"] = ClientScript.GetPostBackEventReference(this.gvSelectedProcess, "Select$" + row.RowIndex.ToString(), true);
row.Attributes["style"] = "cursor:pointer";
}
}
//调用基类继续进行页面的绘制
base.Render(writer);
通过上面的处理,在用户使用鼠标点击对应的单元格或行后回激发相应GridView的SelectIndexChange事件,在捕获到该事件后只需进行
protected void gvAllProcessItem_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
gvAllProcessItem.SelectedIndex = e.NewSelectedIndex;
//setGvAllProcessItem();
}
2.在GridView中使用代码动态绘制控件
如例子所示,在用户选择特定的下拉列表值后,会在后面出现Textbox,这些Textbox是使用代码在行绑定上绘制上去的,这里牵涉到动态绘制的代码的获取问题,在GridView中绘制的控件在页面回传之后会丢失,需要重新进行绘制,所以在页面回传之后是无法获得这些动态绘制的控件的,想要取得用户在控件中输入的值需要使用Request.Form来获得表单数据,浏览器在回传表单数据时使用的ID是由Asp.net转成Html之后生成的clientId ,获得ClientID的方法是:如果不是嵌套控件,也就是说在使用服务器控件时ID不能重复的控件,可以直接使用ID.ClientID 来获取,如果是可以嵌套的控件,如:GridView行里面的控件,则其对应的ClientID是和行有关的需要首先获取行的ClientID,具体方法是:gvRow.UniqueID + "$"+ID;即可获得该ID对应的ClientID,
由上可见还是多用HTML控件吧.....
3.UpDatePanel控件
其实很多人都看的出,如果不用Ajax,只用上面的方法,页面早就被刷的受不了了,使用Ajax的时候个人倾向于使用JQuery手工传递Ajax信息,感觉这样比较灵活,便于掌控,同样是由于项目维护的原因....还是使用UpDatePanel...第一次使用这个东西,发现微软确实把什么都弄的很简单,只需要把想要异步回传的控件放在UpdatePanel中里面就好了,在使用之前需要加入<ScriptManager>控件,但是使用这些控件运行时候会大量报错,所以一般需要注意一下几点:
1.<ScriptManager>最好直接放在<Form>的声明下面
2.<system.webServer>下的<handlers>里面需要配置上:
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
3.如果还不行,发布的时候记得把Debug给关掉