自定义选择控件引出的笔记

A、选择页的弹出及返回值

ListPage.htm：

<script type="text/javascript">
    function ShowDialog()
    {
        var obj = new Object();  //传递多个值
        obj.id = 1000;
        obj.name = 'testname';
        var returnValue = window.showModalDialog("SelectPage.htm",obj,"dialogWidth=500px;dialogHeight=300px");
        document.getElementById("lbReturnValue").innerHTML = returnValue.one + "," + returnValue.two + "," + returnValue.three;
    }
</script>
<a href="javascript:void(0);" onclick="ShowDialog()">ShowWindow</a>
<span id="lbReturnValue"></span>

SelectPage.htm：

<script type="text/javascript">
 var para;
 window.onload = function GetPara()
 {
  para = window.dialogArguments;
  document.getElementById("lbPara").innerHTML = para.name + "," + para.id;
 }
 function ReturnValue()
 {
  var obj = new Object();  //返回多个值
  obj.one = para.name + "one";  //对数据加工处理
  obj.two = para.id + 2;
  obj.three = Date();
  window.returnValue=obj;
  window.close();
 }
</script>
传过来的参数:<span id="lbPara"></span>
<a href="javascript:void(0);" onclick="ReturnValue()">ReturnValue</a>

 

B、Request.Form的用法：

WebForm1.aspx
<form id="form1" action="WebForm2.aspx" method="post">
    <input type="text" name="tb" />
    <input type="submit" />
</form>

WebForm2.aspx-Page_Load：
Response.Write(Request.Form["tb"]);  //得到Page1提交的输入框内容

 

C、关于控件状态的保存测试：

TestPage.aspx：
<input type="text" />
<asp:TextBox ID="tb" runat="server"></asp:TextBox>
<asp:Button ID="btn" runat="server" Text="Sumbit"/>
//输入值后提交，HTML控件值丢失，TextBox值还在。

 

D、选择控件生成的HTML代码：

ListPage.aspx:
<input type='text' name='MySelectCtl' id='MySelectCtl' value='' />
<input type='hidden' name='MySelectCtl_IdValue' id='MySelectCtl_IdValue' value='' />
<a href='javascript:void(0);' onclick="var rtnValue = window.showModalDialog('SelectPage.aspx'); document.getElementById('MySelectCtl_IdValue').value = rtnValue.rtnId; document.getElementById('MySelectCtl').value = rtnValue.rtnText;">
    选择</a>
   
SelectPage.aspx:
<script type="text/javascript">
    function GetRtn()
    {
        var obj = new Object();
        obj.rtnId = "100,101,102";
        obj.rtnText ="值A,值B,值C";
        window.returnValue= obj; 
        window.close();
    }
</script>
<a href="javascript:void(0);" onclick="GetRtn()">Select</a>

 

E、编写自定义控件类的Render：
public class MySelectCtl : WebControl, INamingContainer
{
    public string SelectPage { set; get; }
    public string SelectText { set; get; }
   
 protected override void Render(HtmlTextWriter writer)
 {
  string js = "var rtnValue = window.showModalDialog('" + this.SelectPage + "');"
      + " document.getElementById('" + this.ID + "_IdValue').value = rtnValue.rtnId;"
      + " document.getElementById('" + this.ID + "').value = rtnValue.rtnText;";
  string text = string.IsNullOrEmpty(this.SelectText) ? "选择" : this.SelectText;
  writer.Write("<input type='text' name='" + this.ID + "' id ='" + this.ID + "' />"
                            + " <input type='hidden' name='" + this.ID + "_IdValue' id='" + this.ID + "_IdValue'  />"
                            + " <a href='javascript:void(0);' onclick=\"" + js + "\">" + text + "</a>");
 }
}

 

F、为控件加上显示值和ID值：
 //添加属性
 public string TextValue { set; get; }
    public string IdValue { set; get; }
   
    //Render时加上输入框的value显示：
 writer.Write("<input type='text' name='" + this.ID + "' id ='" + this.ID + "' value='" + this.TextValue + "' />"
    + " <input type='hidden' name='" + this.ID + "_IdValue' id='" + this.ID + "_IdValue' value='" + this.IdValue + "' />"
    + " <a href='javascript:void(0);' onclick=\"" + js + "\">" + text + "</a>");
   
G、存取控件的值状态：
 //在Page_Load和Btn_Click之后触发此事件
 //只有改变了数据结构，在页面提交后才会触发LoadViewState事件，才能设置控件值
 protected override object SaveViewState()
 {
  object[] aryObj = new object[1];
        aryObj[0] = base.SaveViewState();
        return aryObj;
 }

 //页面点击查询按钮时在页面Page_Load和Btn_Click之前触发此事件
 //在恢复视图状态时设置控件值，这样在Page_Load和Btn_Click中就可以取到控件的值，对页面进行初始化
 protected override void LoadViewState(object savedState)  
 {
     base.LoadViewState(savedState);
     this.TextValue = Page.Request.Form[this.ID];  //PostBack向页面本身提交
     this.IdValue = Page.Request.Form[this.ID + "_IdValue"];
 }

 

H、页面事件执行顺序：
 第一次打开：Page_Load-SaveViewState-Render
 提交页面后：LoadViewState-Page_Load-btn_Click-SaveViewState-Render

 

PS:附控件完整代码（错误甚多，只供本人学习）：

 

public class MySelectCtl : WebControl, INamingContainer
    {
        public string TextValue { set; get; }
        public string IdValue { set; get; }
        public string SelectPage { set; get; }
        public string SelectText { set; get; }
        protected override object SaveViewState()  //2,6  --> Render
        {
            object[] aryObj = new object[1];
            aryObj[0] = base.SaveViewState();
            return aryObj;
        }
        protected override void LoadViewState(object savedState)  //4-第2次click
        {
            object[] aryObj = (object[])savedState;
            if (aryObj[0] != null) base.LoadViewState(savedState);
            this.TextValue = Page.Request.Form[this.ID];
            this.IdValue = Page.Request.Form[this.ID + "_IdValue"];
        }
        protected override void Render(HtmlTextWriter writer)  //3,7
        {
            string js = "var rtnValue = window.showModalDialog('" + this.SelectPage + "');"
                            + " document.getElementById('" + this.ID + "_IdValue').value = rtnValue.rtnId;"
                            + " document.getElementById('" + this.ID + "').value = rtnValue.rtnText;";
            string text = string.IsNullOrEmpty(this.SelectText) ? "选择" : this.SelectText;
            writer.Write("<input type='text' name='" + this.ID + "' id ='" + this.ID + "' value='" + this.TextValue + "' />"
                            + " <input type='hidden' name='" + this.ID + "_IdValue' id='" + this.ID + "_IdValue' value='" + this.IdValue + "' />"
                            + " <a href='javascript:void(0);' onclick=\"" + js + "\">" + text + "</a>");
            
        }
    }

 

ListPage.aspx:

<cc1:MySelectCtl ID="MySelectCtl1" runat="server" SelectPage="SelectPage.aspx" />

SelectPage.aspx: 

function GetRtn(rtnId,rtnText)
{
    var obj = new Object();
    obj.rtnId = rtnId;
    obj.rtnText = rtnText;
    window.returnValue= obj; 
    window.close();
}