问题描述:1、用JS操作ListBox (runat="server")后,在界面上有值,而在提交后,后台处理时发现居然没有一个值;2、里面有一个对 在线编辑器操作的“添加注释”按钮,有时候管用,有时候不管用,在刚开始添加管用,如果操作过了上传图片和添加图片之后就不管用了,不知道啥问题;3、在“删除注释“ 按钮点击的时候 我已经实现了再线编译器选定的图片的删除,可是删除不掉对应ListBox中的选项,不知道怎样遍历在线编辑器的内容和listbox的匹配以下是前台代码和后台代码
前台: 第一部分
<%@ Page Language="C#" AutoEventWireup="true"  EnableEventValidation="false"  CodeFile="SubjectPassAdd.aspx.cs" Inherits="Subject_SubjectPassAdd" %>
<%@ Register TagPrefix="ftb" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %><!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>无标题页</title>
    <link href="../css/sso.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Expires" content="0" /> 
    <meta http-equiv="Cache-Control" content="no-cache" /> 
    <meta http-equiv="Pragma" content="no-cache" /> 
    <script type="text/javascript">
             function OpenWin()
             { 
              var arrReturn = window.showModalDialog("windows.htm","","dialogHeight:200px;dialogWidth:200px"); 
              if(arrReturn==null)
                 return false; 
              var listbox = document.getElementById("lstName");
              var customOptions;
              customOptions = document.createElement("OPTION");
              if(arrReturn=="")
               return false;
              customOptions.text = arrReturn.split("$$")[1];
              customOptions.value    = arrReturn.split("$$")[0];
              listbox.add(customOptions,0);                              
              return false; 
             } 
             //注释的产生
             function OpenBtnWin(editor)
             { 
             
              var arrReturn = window.showModalDialog("btnWindows.htm","","dialogHeight:360px;dialogWidth:320px");  
              //如果 没有返回值 返回
                if(arrReturn==null)
                 return false;
              var listbox = document.getElementById("lstBtn");
              var customOptions;
              //var myAre = document.getElementById("myA");
              customOptions = document.createElement("OPTION");
              customOptions.text = arrReturn.split("$$")[0];
              customOptions.value = arrReturn.split("$$")[1];
              listbox.add(customOptions,0);
              //AddOnPos(myAre,"[$$"+customOptions.text+"$$]");
              //以下是 如何插入标签的东西
              editor.focus();
              obj = FTB_GetRangeReference(editor);
              var tagN =  obj.tagName;
              if(tagN == "BODY")
              {
                editor.document.execCommand("InsertInputImage",1,"name=[$$"+customOptions.text+"$$] src=../images/btnSimple.JPG");
              }
              return false; 
             } 
             
             function SelecteText(content_editor)
             {
              editor.focus();
              obj = FTB_GetRangeReference(editor);
              
              var tagN =  obj.tagName;
              if(tagN == "BODY")
              {
                var sText = document.selection.createRange(); 
                alert(sText.text);
              }
             }
             
             function ShowWin()
             { 
              var listbox = document.getElementById("lstName");
              if(listbox.selectedIndex>-1)
              {
               var strValue = listbox.options[listbox.selectedIndex].value+"$$"+listbox.options[listbox.selectedIndex].text;
               var arrReturn = window.showModalDialog("ShowWindow.htm",strValue,"dialogHeight:340px;dialogWidth:330px");      
              }                 
              return false; 
             } 
             //删除指定选项
             function DeleItem()
             {
               var listbox = document.getElementById("lstName");
               if(listbox.selectedIndex>-1)
                  listbox.remove(listbox.selectedIndex);
               return false;
             }
             
             function EditItem()
             {
             
                  var listbox = document.getElementById("lstName");
                  var sIndex = listbox.selectedIndex;
                  var myReturn;
                  if(sIndex==-1)
                  {
                      return false;       
                  }
                  var strValue = listbox.options[sIndex].value+"$$"+listbox.options[sIndex].text;
                  myReturn = window.showModalDialog("EditWindow.htm",strValue,"dialogHeight:340px;dialogWidth:330px");  
                  if(myReturn==null)
                   return false; 
                  var customOptions; 
                  customOptions = document.createElement("OPTION");
                  customOptions.text = myReturn.split("$$")[1];
                  customOptions.value    = myReturn.split("$$")[0];
                  var flag = myReturn.split("$$")[2];
                  //如果是修改标记的话 先删除然后再添加
                  if(flag=="Y")
                  {
                    listbox.remove(sIndex);
                    listbox.add(customOptions,0);   
                  }                     
                  return false; 
             }
             ///删除注释部分
             function DeleBtn(editor)
             {
              editor.focus();
              
              
              editor.document.execCommand("Delete",1,"");
              var listBtn = document.getElementById("lstBtn");
              var strHtml = editor.document.body.innerHTML;
              RemoveListText(listBtn,strHtml);
              return false;
             }
             //如果 在strText中不存在的话,直接删除
             function RemoveListText(obj,strText)
             {
               //其实这里就是一个循环 这个循环负责 OPTION中在Iframe中不存在的选项 删除掉之后即可
               //此方法暂时不会写
             }
             
             //在光标处插入一个字符
             function AddOnPos(obj, charvalue)
             {
                //obj代表要插入字符的输入框
                //value代表要插入的字符                obj.focus();
                var r = document.selection.createRange();
                var ctr = obj.createTextRange();
                var i;
                var s = obj.value;
                //取到光标位置----Start----
                var ivalue = "&^asdjfls2FFFF325%$^&"; 
                r.text = ivalue;
                i = obj.value.indexOf(ivalue);
                r.moveStart("character", -ivalue.length);
                r.text = "";
                //取到光标位置----End----
                //插入字符 
                obj.value = s.substr(0,i) + charvalue + s.substr(i,s.length);
                ctr.collapse(true);
                ctr.moveStart("character", i + charvalue.length);
                ctr.select();
             }
             function Mark(editor)
             {
          
             }
</script> 
</head>

解决方案 »

  1.   

    第二部分:
    <body>
        <form id="form1" runat="server">
        <div id="dControl" style="width:600px;height:120px;" >
           
        </div>
        
        <div id="dftb" style="width:600px;height:400px;" >
        <ftb:FreeTextBox id="content" runat="server" AutoConfigure="Default" ButtonPath="../images/ftb/officeXP/"
    ImageGalleryPath="images/upload/" ButtonType="Image" HelperFilesPath="../HelperScripts" Width="100%" Height="90%"></ftb:FreeTextBox>
                
        </div>
        <div id="dOperate" style="width:600px;height:200px;">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="width: 10px">
                    </td>
                    <td  style="width: 80px">
            <input id="Button1" type="button" onclick="javascript:OpenWin()" value="添加解释" /></td>
                    <td  style="width: 103px" rowspan="6">
            <asp:ListBox ID="lstName" Width="150px" Height="192px" runat="server" AppendDataBoundItems="True"></asp:ListBox></td>
                    <td  style="width: 10px">
                    </td>
                    <td  style="width: 80px">
            <input id="btnAddBtn" type="button" onclick="javascript:OpenBtnWin(content_editor)" value="添加注释" /></td>
                    <td  style="width: 170px" rowspan="6">
            <asp:ListBox ID="lstBtn" Width="150px" Height="192px" runat="server"></asp:ListBox></td>
                    <td  >
                    </td>
                </tr>
                <tr>
                    <td  >
                    </td>
                    <td  >
            <input id="Button2" type="button" onclick="javascript:EditItem()" value="修改解释" /></td>
                    <td  >
                    </td>
                    <td  >
            <input id="btnDelBtn" type="button" onclick="javascript:DeleBtn(content_editor)" value="删除注释" /></td>
                    <td  >
                    </td>
                </tr>
                <tr>
                    <td  >
                    </td>
                    <td  >
            <input id="btnDelete" type="button" onclick="javascript:DeleItem()" value="删除解释" /></td>
                    <td  >
                    </td>
                    <td  >
                    </td>
                    <td  >
                    </td>
                </tr>
                
            </table>
        
        </div>
        <div id="dSubmit">
            <table border="0" cellpadding="0" cellspacing="0" style="width: 500px">
                <tr>
                    <td style="width: 100px">
                    </td>
                    <td >
                    </td>
                    <td >
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                 <tr>
                    <td style="width: 100px">
                    </td>
                    <td  style="width: 150px">
                        <asp:Button ID="btnSubjectSub" runat="server" Text="生成副本数据" OnClick="btnSubjectSub_Click" /></td>
                    <td style="width: 150px">
                        <input id="btnCancelOperate" type="button"  value="放弃操作" /></td>
                    <td></td>
                    <td>
                    </td>
                </tr>
                
                
            </table>
           
        </div>
        </form>
    </body>
    </html>
      

  2.   

    后台主要代码-----------private SUBPASS_SPAN [] BuildSubPassSpan()
        {
            SUBPASS_SPAN [] spanList = new SUBPASS_SPAN [lstName.Items.Count+lstBtn.Items.Count];
            int iIndex = 0;
            foreach (ListItem li in lstName.Items)
            {
                SUBPASS_SPAN subSpan = new SUBPASS_SPAN();
                subSpan.SUBPASS_ID = new CommReadSystem().GetMaxId("SUBPASS_SPAN", "SUBPASS_ID");
                subSpan.IN_USE = AllInUse.IN_USE;
                subSpan.SUBPASS_TYPE = SubPassSpanType.SPAN;
                subSpan.OBJECT_VALUE = li.Value;
                subSpan.LOCAL_VALUE = li.Text;
                spanList[iIndex] = subSpan;
            }
            foreach (ListItem li in lstBtn.Items)
            {
                SUBPASS_SPAN subSpan = new SUBPASS_SPAN();
                subSpan.SUBPASS_ID = new CommReadSystem().GetMaxId("SUBPASS_SPAN", "SUBPASS_ID");
                subSpan.IN_USE = AllInUse.IN_USE;
                subSpan.SUBPASS_TYPE = SubPassSpanType.BTN;
                subSpan.OBJECT_VALUE = li.Value;
                subSpan.LOCAL_VALUE = li.Text;
                spanList[iIndex] = subSpan;
            }
            return spanList;
        }
    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                lstName.Attributes.Add("onDblClick", "javascript:ShowWin()");
                InitDropDownList();
            }
        }
      

  3.   

    1、用JS操作ListBox (runat="server")后,在界面上有值,而在提交后,后台处理时发现居然没有一个值;这个比较正常,JS修改的很多东西后台有可能取不到,顺便问下,你的form的Enctype是不是multipart/form-data你可以使用Request.form来取ListBox的值
      

  4.   

    看页面源代码,把 var listbox = document.getElementById("lstName");
    改为相应的ID
      

  5.   

    1、用JS操作ListBox (runat="server")后,在界面上有值,而在提交后,后台处理时发现居然没有一个值;这个比较正常,JS修改的很多东西后台有可能取不到,顺便问下,你的form的Enctype是不是multipart/form-data你可以使用Request.form来取ListBox的值-----------------------------------------OK 我晚上回去试,    结题后结贴阿 顺便说说第二个问题和第三个问题吧  第二个问题不好弄,第三个问题应该差不多吧,大家帮帮忙啊,JS如何比较一个字符串和一个listbox中项目的文本值,如果字符串中不存在就把listbox里面的删除掉, 谢谢阿
      

  6.   

    1. 代码太长
    2. 没有FreeTextBoxControls
      

  7.   

    用JS操作ListBox (runat="server")后,在界面上有值,而在提交后,后台处理时发现居然没有一个值
    =====================
    1.用Request.Form()看能不能得到
    2.写到Html服务器控件hidden元素中,再在服务器端得到hidden元素的Value
      

  8.   

    JS如何比较一个字符串和一个listbox中项目的文本值,如果字符串中不存在就把listbox里面的删除掉, 谢谢阿
    ------------------------------------
    <script language="javascript">
           obj = document.getElementById("listbox1");
           var str = "2007"
           var hasItem = false;
           for(var i=0;i<obj.options.length;i++)
           {
              // 如果下拉列表中有2007,则选中2007
              if (obj.options[i].value == str)
              {
                  obj.options[i].setAttribute("selected","true");
                  hasItem = true;
                  break;
              }
           }
           if (!hasItem)
           {
                // 下拉列表中不存在2007,在这里执行你想要做的操作
           }
     </script>
      

  9.   

    JS如何比较一个字符串和一个listbox中项目的文本值,如果字符串中不存在就把listbox里面的删除掉
    ============================
    蛮奇怪的需求,难道找不到就把listbox清空?我下面这个是如果字符串存在就删除的
    <HTML>
    <HEAD>
    <title>WebForm2</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <script type="text/javascript">
    function compare()
    {
    for(i = 0; i < document.getElementById("sel").length; i++)
    {
    var str = document.getElementById("sel").options[i].value;
    if (str == document.getElementById("txt").value)
    {
    document.getElementById("sel").options.remove(i);
    }
    }
    }
    </script>
    </HEAD>
    <body>
    <form id="Form1" method="post" runat="server">
    <SELECT size="2" id="sel">
    <OPTION value="aa">aa</OPTION>
    <OPTION value="bb">bb</OPTION>
    <OPTION value="cc">cc</OPTION>
    </SELECT>
    <INPUT type="text" id="txt"> <INPUT type="button" value="Button" id="btn" onclick="compare()">
    </form>
    </body>
    </HTML>
      

  10.   

    <ftb:FreeTextBox id="content" runat="server" AutoConfigure="Default" ButtonPath="../images/ftb/officeXP/"
    ImageGalleryPath="images/upload/" ButtonType="Image" HelperFilesPath="../HelperScripts" Width="100%" Height="90%"></ftb:FreeTextBox>
    就是一个在线编辑器 ,  劳烦大哥们抽空看看, 第一个和第三个问题,我估计都可以弄了,就差第二个问题:
    2、里面有一个对 在线编辑器操作的“添加注释”按钮,有时候管用,有时候不管用,在刚开始添加管用,如果操作过了上传图片和添加图片之后就不管用了,不知道啥问题;估计问题出在这个函数里面  大家帮忙看一下啊:
    function OpenBtnWin(editor)
                 { 
                 
                  var arrReturn = window.showModalDialog("btnWindows.htm","","dialogHeight:360px;dialogWidth:320px");  
                  //如果 没有返回值 返回
                    if(arrReturn==null)
                     return false;
                  var listbox = document.getElementById("lstBtn");
                  var customOptions;
                  //var myAre = document.getElementById("myA");
                  customOptions = document.createElement("OPTION");
                  customOptions.text = arrReturn.split("$$")[0];
                  customOptions.value = arrReturn.split("$$")[1];
                  listbox.add(customOptions,0);
                  //AddOnPos(myAre,"[$$"+customOptions.text+"$$]");
                  //以下是 如何插入标签的东西
                  editor.focus();
                  obj = FTB_GetRangeReference(editor);
                  var tagN =  obj.tagName;
                  if(tagN == "BODY")
                  {
                    editor.document.execCommand("InsertInputImage",1,"name=[$$"+customOptions.text+"$$] src=../images/btnSimple.JPG");
                  }
                  return false; 
                 } 
      

  11.   

    你的代码忒长了,呵呵,我没有仔细看,单就第一个问题谈谈我的看法。
    通过Js脚本对listbox或者其他列表进行处理时,你可以在界面上看到效果,但是对于其后台的服务器控件而言,你在js脚本中添加或者删除的项目不会反应到服务器控件的Items集合中,所以Items集合不会因为你js脚本而改变,也就是说,如果Items集合原来是空的,即使你通过js脚本为客户端控件添加了项目,则PostBack后,Items集合仍然是空的。
      

  12.   

    建议楼主在firefox中使用firebug插件看看,这个插件能检测出运行的时候那些JS代码出错了!!!
      

  13.   

    你的代码忒长了,呵呵,我没有仔细看,单就第一个问题谈谈我的看法。
    通过Js脚本对listbox或者其他列表进行处理时,你可以在界面上看到效果,但是对于其后台的服务器控件而言,你在js脚本中添加或者删除的项目不会反应到服务器控件的Items集合中,所以Items集合不会因为你js脚本而改变,也就是说,如果Items集合原来是空的,即使你通过js脚本为客户端控件添加了项目,则PostBack后,Items集合仍然是空的。
    -----------------------------------------
    按照你的说法: 一个空的TextBox被发送到客户端之后,通过JS负值, 无论如何 PostBack 服务器都取不道值了?
    把貌似Hidden都是使用JS副职的阿,为啥服务器都可以取到阿?莫非 ListItem和TextBox以及Hidden的视图状态保存的模式都不一样?
      

  14.   

    建议楼主在firefox中使用firebug插件看看,这个插件能检测出运行的时候那些JS代码出错了!!!---------------好的 好的,我好好试一试,JS代码真是难调阿
      

  15.   

    listbox 和 textbox不一样,我也一直没有说明textbox会怎么样,lz有一点偏见了,textbox的值可以通过form集合带回,在postback后首先会被根据新的客户端的值更新Text属性,这样才会产生TextChanged事件。而listbox(也就是select)只能带回当前选中的项目的值,而不是带回整个所有select的options集合!当然,如果你有能力,可以在客户端把__VIEWSTATE重构,可以实现在客户端将options集合改变后,反馈给服务器控件的ListBox控件的Items集合。
      

  16.   

    listbox 和 textbox不一样,我也一直没有说明textbox会怎么样,lz有一点偏见了,textbox的值可以通过form集合带回,在postback后首先会被根据新的客户端的值更新Text属性,这样才会产生TextChanged事件。而listbox(也就是select)只能带回当前选中的项目的值,而不是带回整个所有select的options集合!当然,如果你有能力,可以在客户端把__VIEWSTATE重构,可以实现在客户端将options集合改变后,反馈给服务器控件的ListBox控件的Items集合。
    ---------------------------------------------------
    搞定了,谢谢阿,
    还有一个问题: 为啥我通过以下方法:
    function AddOnPos(obj, charvalue)
                 {
                    //obj代表要插入字符的输入框
                    //value代表要插入的字符                obj.focus();
                    var r = document.selection.createRange();
                    var ctr = obj.createTextRange();
                    var i;
                    var s = obj.value;
                    //取到光标位置----Start----
                    var ivalue = "&^asdjfls2FFFF325%$^&"; 
                    r.text = ivalue;
                    i = obj.value.indexOf(ivalue);
                    r.moveStart("character", -ivalue.length);
                    r.text = "";
                    //取到光标位置----End----
                    //插入字符 
                    obj.value = s.substr(0,i) + charvalue + s.substr(i,s.length);
                    ctr.collapse(true);
                    ctr.moveStart("character", i + charvalue.length);
                    ctr.select();
                 }
    用JS向在线编辑器插入一个图片的话,只要里面存在回车键  插入图片的命令都会失效, 昨天调试的时候发现的,如果没有回车,怎么样都没有问题,大家发言啊,请大家帮忙解决问题啊
      

  17.   

    对了 重要的脚本操作没有加上 editor.document.execCommand("InsertInputImage",1,"name=[$$"+customOptions.text+"$$] src=../images/btnSimple.JPG");此句话执行了没有效果阿?
      

  18.   

    listbox   和   textbox不一样,我也一直没有说明textbox会怎么样,lz有一点偏见了,textbox的值可以通过form集合带回,在postback后首先会被根据新的客户端的值更新Text属性,这样才会产生TextChanged事件。而listbox(也就是select)只能带回当前选中的项目的值,而不是带回整个所有select的options集合!当然,如果你有能力,可以在客户端把__VIEWSTATE重构,可以实现在客户端将options集合改变后,反馈给服务器控件的ListBox控件的Items集合。 
    --------------------------------------------------- 
    搞定了,谢谢阿, 搞定了,把代码告诉一下大家啊.谢谢了.