zay826

 

在服务器端获取客户端对ListBox的操作（转）

在上一篇文章中，我们实现了ListBox控件的客户端的常用操作，但是我们可能会发现一个问题，在客户端对ListBox进行的操作，在服务器端代码中无法获得。如对一个ListBox插入了一个项目，在服务器端去获取它的项目时却获取不到那个新插入的项目，对于其它的操作，也有类似的问题。如果这个问题不能得到解决，我们探讨在客户端操作ListBox的意义就大打折扣。下面是我对这个问题的一种解决方案，虽然仍感不够理想，但先放到这里，希望能起个抛砖引玉的作用。如果哪位朋友能有更好的方案，希望能告诉我。

为了便于比较，还是利用上一篇文章中用到的例子。只是在那个例子代码的基础上，增加了一个保存按钮，一个文本框和服务器端的一些代码。全部代码如下：

1、页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListBox.aspx.cs" Inherits="ListBox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ListBox脚本操作</title>
    
    <script language ="javascript" >
    <!--
    function SelectItem(listbox1,listbox2)
    {
       var leftList = document.getElementById(listbox1);
       var rightList = document.getElementById(listbox2);
       //未在左列表中选择项目
       if(leftList.selectedIndex==-1)
       {
          return false;
       }
       else//在左侧选择了项目
       {
           for(var i=0;i<leftList.length;i++)
           {
              if(leftList.options[i].selected)
              {
                var value = leftList.options[i].value;
                var text = leftList.options[i].text;
                
                //验证右侧是否已经存在所选的项目
                var isExist = false;
                for(var j=0;j<rightList.length;j++)
                {
                   if(value == rightList.options[j].value && text == rightList.options[j].text)
                   {
                       isExist = true;
                       break;
                   }
                }
                //不存在则添加
                if(!isExist)
                {
                   rightList.options[rightList.length] = new Option(text,value);
                }
              }
           }
        }
       
       return false;
    }
    
    function Up(listbox)
    {
       var rightList = document.getElementById(listbox);
       if(rightList.selectedIndex == -1 || rightList.selectedIndex == 0)
       {
          return false;
       }
       else
       {
          var text = rightList.options[rightList.selectedIndex-1].text;
          var value = rightList.options[rightList.selectedIndex-1].value;
          rightList.options[rightList.selectedIndex-1].text = rightList.options[rightList.selectedIndex].text;
          rightList.options[rightList.selectedIndex-1].value = rightList.options[rightList.selectedIndex].value;
          rightList.options[rightList.selectedIndex].text = text;
          rightList.options[rightList.selectedIndex].value = value;
          rightList.selectedIndex--;
          return false;
       }
    }
    
    function Down(listbox)
    {
       var rightList = document.getElementById(listbox);
       if(rightList.selectedIndex == -1 || rightList.selectedIndex == rightList.length-1)
       {
          return false;
       }
       else
       {
          var text = rightList.options[rightList.selectedIndex+1].text;
          var value = rightList.options[rightList.selectedIndex+1].value;
          rightList.options[rightList.selectedIndex+1].text = rightList.options[rightList.selectedIndex].text;
          rightList.options[rightList.selectedIndex+1].value = rightList.options[rightList.selectedIndex].value;
          rightList.options[rightList.selectedIndex].text = text;
          rightList.options[rightList.selectedIndex].value = value;
          rightList.selectedIndex++;
          return false;
       }
    }
    
    function Delete(listbox)
    {
       var rightList = document.getElementById(listbox);
       if(rightList.selectedIndex == -1)
       {
          return false;
       }
       else
       {
          rightList.remove(rightList.selectedIndex);
          return false;
       }
    }
    
    function Save(listbox,hidden)
    {
       var list = document.getElementById(listbox);
       var hid = document.getElementById(hidden);
       var str = "";
       for( var i=0;i<list.length;i++)
       {
          str+=list.options[i].value + "," + list.options[i].text + ";";
       }
       str = str + list.selectedIndex.toString();
       hid.value =str;
       return true;
    }
    //-->
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListBox ID="ListBox1" runat="server" Height="192px" SelectionMode="Multiple"
            Width="108px">
            <asp:ListItem Value="1">项目一</asp:ListItem>
            <asp:ListItem Value="2">项目二</asp:ListItem>
            <asp:ListItem Value="3">项目三</asp:ListItem>
            <asp:ListItem Value="4">项目四</asp:ListItem>
            <asp:ListItem Value="5">项目五</asp:ListItem>
            <asp:ListItem Value="6">项目六</asp:ListItem>
            <asp:ListItem Value="7">项目七</asp:ListItem>
            <asp:ListItem Value="8">项目八</asp:ListItem>
            <asp:ListItem Value="9">项目九</asp:ListItem>
            <asp:ListItem Value="10">项目十</asp:ListItem>
        </asp:ListBox>
        &nbsp; &nbsp;<asp:Button ID="btnSelect" runat="server" Text="==>>" />
        &nbsp;&nbsp; &nbsp;<asp:ListBox ID="ListBox2" runat="server" Height="192px" Width="108px">
        </asp:ListBox>&nbsp;
        <asp:Button ID="btnUp" runat="server" Text="上移" />&nbsp;
        <asp:Button ID="btnDown" runat="server" Text="下移" />&nbsp;
        <asp:Button ID="btnDelete" runat="server" Text="删除" />
        <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="保存" />
        <asp:TextBox ID="txtHidden" runat="server"></asp:TextBox></div>
    </form>
</body>
</html>

2、后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ListBox : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.btnSelect.Attributes.Add("onclick", "javascript:return SelectItem('" + this.ListBox1.ClientID + "','" +
                this.ListBox2.ClientID + "');");

            this.btnUp.Attributes.Add("onclick", "javascript:return Up('" + this.ListBox2.ClientID + "');");

            this.btnDown.Attributes.Add("onclick", "javascript:return Down('" + this.ListBox2.ClientID + "');");

            this.btnDelete.Attributes.Add("onclick", "javascript:return Delete('" + this.ListBox2.ClientID + "');");

            this.btnSave.Attributes.Add("onclick", "javascript:return Save('" + this.ListBox2.ClientID + "','" +
                this.txtHidden.ClientID + "');");

            //隐藏文本框，注意不能用Visible=False隐藏，这样在客户端脚本就不能对其进行操作；
            //通过css隐藏
            this.txtHidden.Attributes.Add("style", "display : none");
        }
    }

    //ASP.net2.0 添加了"event validation"的功能, ASP.NET会检查 POST方法中的所带的参数,如果
    //认为不合法,就会抛出异常，所以重写Render方法。
    protected override void Render(HtmlTextWriter writer)
    {
        for (int i = 0; i < ListBox1.Items.Count; i++)
        {
            ClientScript.RegisterForEventValidation(this.ListBox2.UniqueID, ListBox1.Items[i].Value);
        }
        base.Render(writer);
    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        //服务器端获取所选的项目
        string selctItem = this.txtHidden.Text;
        if (selctItem.Length == 0 || selctItem == "-1")
        {
            return;
        }
        else
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("value", typeof(string));
            dt.Columns.Add("text", typeof(string));
            string[] items = selctItem.Split(';');
            //分割后的字符串数组最后一项是被选中项目的索引;
            for (int i = 0; i < items.Length - 1; i++)
            {
                DataRow row = dt.NewRow();
                row[0] = items[i].Split(',')[0];
                row[1] = items[i].Split(',')[1];
                dt.Rows.Add(row);
            }

            this.ListBox2.DataSource = dt;
            this.ListBox2.DataValueField = "value";
            this.ListBox2.DataTextField = "text";
            this.ListBox2.DataBind();
            this.ListBox2.SelectedIndex = Convert.ToInt32(items[items.Length - 1]);
        }
        
        //下面添加服务器的其它操作代码
    }
}

      以上是参考别人的解决方法，我在应用时根据需要采取了将客户端保留下的记录ListBox的项的字符串数据，通过XMLHTTP对象将其传送到了服务器端，通过处理这个数组，再保存到数据库，感觉也挺不错的！

posted on 2007-11-01 09:55  顽皮的鱼  阅读(285)  评论(0)    收藏  举报

导航