Pass list of strings from Javascript to asp.net code-behind

Question

I have problems with javascript in ASP.NET.
I modify a listBox, with add and remove command using javascript.
Now I have to use the data of the list in the code behind. How can I pass this data to the server? Can I use json?

Here is the code. I can't use hiddenField because of the remove.

<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>

Brian Mains · Accepted Answer · 2013-01-16 18:42:57Z

1

Why can't you use hidden? You can easily store the ID's of the records of items added or removed from the listbox, and update the server. Your other options are web service, or stream the data to a handler instead.

Either option, any client-side changes are not persisted, so on every postback, you'd have to reload the ListBox control with the updated data.

answered Jan 16, 2013 at 18:42

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pegatron · Accepted Answer · 2013-01-16 20:44:24Z

You can simply create a web service and add a method e.g. DeleteSelectedOptions and change the removeOptions function like below:

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);
       }
    });  
  }

Sample WebService Remove.asmx

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

tam tam · Accepted Answer · 2013-01-16 18:41:33Z

Mark you would need to make an AJAX request to the server. See my example below.

It utilizes POST in which you could send the fields from your form to your server method. Also POST gives a success function for instance if your method is returning a value and you need to show it on the page, so in this success function you could handle it.

Assuming you have the following method on server-side code behidn file:

 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");
    }
}

Collectives™ on Stack Overflow

Pass list of strings from Javascript to asp.net code-behind

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related