asp.net中在前臺用js增刪ListBox的items

2019-11-18 17:05:17

字體：大中小

來源：轉載

供稿：網友

現在的項目中,有個搜索部分,需要對搜索結果Grid顯示字段讓用戶選擇

于是用2個ListBox分別列示所有可顯示字段和已選擇顯示字段

并在前臺用js控制2個Listbox之間項目的增刪和移動
(沒辦法,測試mm說后臺事件有刷新的看著不舒服...)

于是搞2個html button
事件如下:(先別管Hidden1)

function Test( lbFieldsSelect,value)
            {
                for (j = 0;j<lbFieldsSelect.length; j++)
                {
                    if (lbFieldsSelect.options[j].value == value) return true;
                }
                return false;
            }

            function SelectField()
            {
                var lbFields = document.getElementById("lbFields");
                var lbFieldsSelect = document.getElementById("lbFieldsSelect");
                var Hidden1 = document.getElementById("Hidden1");

                for (i = 0;i<lbFields.length; i++)
                {
                    if (lbFields.options[i].selected)
                    {
                        if (Test(lbFieldsSelect,lbFields.options[i].value))
                        {
                            //已經選擇該字段
                            continue;
                        }

                        lbFieldsSelect.options.add(document.createElement("OPTION"));
                        lbFieldsSelect.options[lbFieldsSelect.length-1].text=lbFields.options[i].text;
                        lbFieldsSelect.options[lbFieldsSelect.length-1].value=lbFields.options[i].value;
                        Hidden1.value = Hidden1.value + "#" + lbFields.options[i].text + "@" + lbFields.options[i].value;
                    }
                }
            }

            function UnSelectField()
            {
                var lbFields = document.getElementById("lbFields");
                var lbFieldsSelect = document.getElementById("lbFieldsSelect");
                var Hidden1 = document.getElementById("Hidden1");

                for (i = 0;i<lbFieldsSelect.length; i++)
                {
                    if (lbFieldsSelect.options[i].selected)
                    {
                        lbFieldsSelect.options.add(document.createElement("OPTION"));
                        lbFieldsSelect.options[lbFieldsSelect.length-1].text=lbFields.options[i].text;
                        lbFieldsSelect.options[lbFieldsSelect.length-1].value=lbFields.options[i].value;
                        Hidden1.value = Hidden1.value + "#" + lbFields.options[i].text + "@" + lbFields.options[i].value;
                    }
                }

            }
不料提交到后臺時,前臺增加的ListItem都沒有了
仔細想想,肯定是 asp.net沒有在回發時加上ListBox客戶端改變后的ViewState
其實也不能怪ms,連Table都沒有ViewState(按照ms的說法，table只是個容器，table里面的控件才有必要維持ViewState)
ListBox這種客戶端難得改變一次的東西顯然是更不需要了
沒辦法,只好自己弄一個可以維持viewstate的東西來放listBox的Item了
于是有了上面的Hidden1

服務器端相應代碼:

        PRivate void RestorelbFieldsSelect()
        {
            string[] sField =Hidden1.Value.Split('#');

            //lstShowField.Items.Clear();
            DataTable dtField = new DataTable();
            dtField.Columns.Add("sDisplayName","".GetType());
            dtField.Columns.Add("sFieldName","".GetType());
            for (int i = 0 ; i < sField.Length ; i ++)
            {
                if (sField[i] == null || sField[i] =="") continue;
                DataRow row = dtField.NewRow();
                row[0] = sField[i].Split('@')[0];
                row[1] = sField[i].Split('@')[1];
                dtField.Rows.Add(row);
            }

            lbFieldsSelect.DataSource = dtField;
            lbFieldsSelect.DataTextField = "sDisplayName";
            lbFieldsSelect.DataValueField = "sFieldName";
            lbFieldsSelect.DataBind();
        }
這樣的話,每次pageload時都根據hidden的狀態更新ListBox
我們項目的目標達到了(只需要ListBox的Item，不需要考慮選定等)
如果需要處理選定項，可能需要再多一個Hidden吧。