Asp.net 基础4（自定义控件的使用之客户端脚本生成）

在自定义控件时，会比较常见的有写客户端的脚本。

也就是在重写Control的Render方法时，可以直接输出客户端的脚本。但是这样有两点不好的地方，

1，在生成多个用户控件的实例是，会生成多个脚本，造成脚本之间调用的混淆

2，在一个控件调用脚本，会在另一个脚本文件中叶调用。产生差异。

下面的这个方法是最好的方法：

编写了一个类似于下棋的控件，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace OwnControl
{
    public class ChessControl:Control
    {
        protected override void Render(HtmlTextWriter writer)
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Border, "5px");
            writer.RenderBeginTag(HtmlTextWriterTag.Table);
            writer.AddAttribute(HtmlTextWriterAttribute.Border, "5px");
            for (int row = 0; row < 3; row++)
            {
                writer.RenderBeginTag(HtmlTextWriterTag.Tr);
                for (int col = 0; col < 3; col++)
                {
                    string clk = string.Format(
                        "OnClickCell(this,'{0}')", ClientID);
                    writer.AddAttribute(HtmlTextWriterAttribute.Border, "5px");
                    writer.AddAttribute(HtmlTextWriterAttribute.Width, "20px");
                    writer.AddAttribute(HtmlTextWriterAttribute.Onclick, clk);
                    writer.RenderBeginTag(HtmlTextWriterTag.Td);
                    writer.Write("&nbsp;");
                    writer.RenderEndTag();
                }
                writer.RenderEndTag();
            }
            writer.RenderEndTag();
        }

        protected override void OnInit(EventArgs e)
        {
            string sCode ="<script language=javascript> var g_grWentLast=new Object(); function OnClickCell(cell,idx) { if(cell.innerText==\" \"){ if(g_grWentLast[idx]) cell.innerText='O'; else cell.innerText='X'; g_grWentLast[idx]=!g_grWentLast[idx]; } else cell.innerText=' ';}; </script>";
            //
            //由于此方法使用键来识别脚本块，
            //所以不需要在每次不同的服务器控件实例请求脚本块时都向输出流发出脚本块。
            //使用键还可以降低不同控件的脚本块相互干扰的可能性。
            Page.RegisterClientScriptBlock("CellCode", sCode);
        }
    }
}

 

 

 界面的使用：

<useown:ChessControl ID="user3" runat="server"></useown:ChessControl>