將字符串列表從Javascript傳遞給asp.net-behind

Question

我在ASP.NET中遇到JavaScript問題。
我使用JavaScript使用add和remove命令修改listBox。
現在，我必須在后面的代碼中使用列表的數據。 如何將這些數據傳遞到服務器？ 我可以使用json嗎？

這是代碼。 由於刪除，我無法使用hiddenField。

<asp:listbox ID="SubCat" runat="server" ></asp:listbox>
<input type=button onClick="addOption(SubCat)"; value='Add'> 
<input type=button onClick="removeOptions(SubCat)"; value='Remove Selected'>
<input type=button onClick="removeAllOptions(SubCat)"; value='Remove All'>


<script type="text/javascript">


 function removeAllOptions(selectbox) {
    var i;
    for (i = selectbox.options.length - 1; i >= 0; i--) {
        selectbox.remove(i);
    }
 } 

 function removeOptions(selectbox) {
    var i;
    for (i = selectbox.options.length - 1; i >= 0; i--) {
        if (selectbox.options[i].selected)
           selectbox.remove(i);
    }
 }

 function addOption(selectbox) {
    var txtBox1 = document.getElementById('txForn')
    var optn = document.createElement("OPTION");
    var t = txtBox1.value;
    optn.text = t;
    optn.value = t;
    selectbox.options.add(optn);
 }

</ script>

Answer 1

為什么不能使用隱藏？ 您可以輕松地存儲從列表框中添加或刪除的項目記錄的ID，並更新服務器。 您的其他選項是Web服務，或將數據流傳輸到處理程序。

無論哪種選擇，任何客戶端更改都不會保留，因此在每次回發中，您都必須使用更新的數據重新加載ListBox控件。

Answer 2

您可以簡單地創建一個Web服務並添加一個方法，例如DeleteSelectedOptions並更改如下所示的removeOptions函數：

function removeOptions(selectbox) {
   $.ajax({
       type: 'POST',
       url: 'yourservice.asmx/DeleteSelectedOptions',
       data: "{ids: '" + yourIds + "'}", // yourIds like : "1,6,9,34" 
       contentType: "application/json; charset=utf-8",
       dataType: 'json',
       success: function (result) {
          //if success, remove option on page
          var i;
          for (i = selectbox.options.length - 1; i >= 0; i--) {
            if (selectbox.options[i].selected)
               selectbox.remove(i);
          }
       },
       failure: function(errMsg) {
        alert(errMsg);
       }
    });  
  }

樣本WebService Remove.asmx

 [WebMethod]
 public string DeleteSelectedOptions(string ids)
 {
     string[] idsArray = ids.Split(',')
     // your delete codes 
     return result;
 }

Answer 3

標記您需要向服務器發出AJAX請求。 請參閱下面的示例。

它利用POST，您可以在其中將字段從表單發送到服務器方法。 另外，例如，如果您的方法正在返回一個值並且您需要在頁面上顯示它，則POST提供了一個成功函數，因此可以在此成功函數中進行處理。

假設您在服務器端代碼behidn文件上具有以下方法：

 public static bool AddNewItem(string name, string surname, int age)
    {


      return true;      
    }

buttons:
{
    "Add": function () {
        var name = $("#<%= txtName.ClientID  %>").val();
        var surname = $("#<%= txtSurname.ClientID %>").val();
        var age = $("#<%= txtAge.ClientID %>").val();

        $.ajax({
            type: 'POST',
            url: 'MyWebPage.aspx/AddNewItem',
            data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d) {
                    alert("Successfully added new item");                                    
                }
            },
            error: function () {
                alert("Error! Try again...");
            }
        });
    },
    "Cancel": function () {
        $(this).dialog("close");
    }
}