none
Добавление элементов в ListBox на клиенте с последующим их чтением на сервере RRS feed

Ответы

  • Добавляете с помощью jQuery на страницу одновременно с добавлением в ListBox скрытые поля с одинаковым именем

    <input type="text" name="MyListBoxItem" value="MyVal1" />
    Потом на серверной стороне получаете их значения из
    string[] myvals = Request["MyListBoxItem"].Split(',');

    Т.е. все значение объединяются в одну строку, разделенную запятыми и вам нужно ее разбить, чтобы получить обратно свои значения.

    Для связи [mail]

    • Помечено в качестве ответа Boguyang 25 декабря 2012 г. 14:05
    24 декабря 2012 г. 8:02
    Модератор
  • Всё времени не было написать. Вот пример:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="WebApplication.WebForm" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            var listItems = new Array();
            $(function () {
                $("#addItem").click(function () {
                    var text = "Test"
                    var value = "1"
                    $("#myList").append($("<option/>", { value: value, text: text }));
                    listItems.push(Object.create({ Text: text, Value: value }));
                    $("#listValues").val(ParseArrayToJson(listItems));
                });
                $("#delItem").click(function () {
                    $("#myList :selected").remove();
                });
            });
            function ParseArrayToJson(listItems) {
                var jsonString = '[';
                for (i = 0; i < listItems.length; i++) {
                    jsonString = jsonString + "{";
                    for(var key in listItems[i])
                        jsonString = jsonString + '"' + key + '":"' + listItems[i][key] + '",';
                    jsonString = jsonString.substring(0, jsonString.length - 1);
                    if(i+1 == listItems.length)
                        jsonString = jsonString + "}";
                    else
                        jsonString = jsonString + "},";
                }
                jsonString = jsonString + ']';
                return jsonString;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:ListBox ID="myList" runat="server"></asp:ListBox>
        <input id="addItem" type="button" value="Add new item" />
        <asp:HiddenField ID="listValues" runat="server" Value="empty" />
    
            <br />
            <asp:Button ID="saveButton" runat="server" OnClick="saveButton_Click" Text="Save" />
    
        </div>
        </form>
    </body>
    </html>
    

    using System;
    using System.Web.Script.Serialization;
    
    namespace WebApplication
    {
      public partial class WebForm : System.Web.UI.Page
      {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void saveButton_Click(object sender, EventArgs e)
        {
          string selectJson = listValues.Value;
          JavaScriptSerializer serializer = new JavaScriptSerializer();
          //Можете использовать.
          ListItem[] items = serializer.Deserialize<ListItem[]>(selectJson);
        }
      }
      public class ListItem
      {
        public string Text { get; set; }
        public string Value { get; set; }
      }
    }

    • Помечено в качестве ответа Boguyang 25 декабря 2012 г. 14:05
    25 декабря 2012 г. 12:25
    Модератор

Все ответы

  • У меня работает. Код, что привели высше с заменой того, что я показал.

    "При помощи jquery функции append я добавляю в него элементы. Элементы добавляются, но при нажатии на submit (для записи в БД) или обновлении страницы все элементы добавленные в ListBox с помощью jquery пропадают. В чём соль? ViewState включен." - попробуйте его отключить, он только мешает (на уровне элемента). Если не помежет, скажу про обходной вариант, но вроде должен помочь.

    16 декабря 2012 г. 18:18
    Модератор
  • Действительно удаление работает, прощу прощения был невнимателен.

    По поводу добавления записей в ListBox: отключил у этого элемента ViewState. Не помогло. И вот что меня удивило: методом append записи в ListBox добавляются, т.е. я их вижу в ЛистБоксе. Захожу в исходный код страницы - ЛистБокс остался неизмененным.

    16 декабря 2012 г. 19:27
  • А код какой используете, что показали высше или другой?

    17 декабря 2012 г. 17:53
    Модератор
  • код использую вот такой:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
            <script src="jquery-1.8.3.js"></script>
        <script src="jquery-ui-1.9.2.custom.js"></script>
        <script src="jquery-ui-1.9.2.custom.min.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    $("#list").append("<option value=1>элемент списка</option>");
                });
                $("#del").click(function () {
                    $("#list :selected").remove();
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
        </div>
    
        <asp:ListBox ID="list" runat="server"></asp:ListBox>
        <input id="btn" type="button" value="button" /></form>
     <input id="del" type="button" value="del" /></p>
    </body>
    </html>
    

    17 декабря 2012 г. 18:43
  • Дело в том что платформа ASP.NET хранит информацию об элементах на сервере и каждый раз восстанавливает их оттуда. Поэтому изменения на клиенте теряются при каждой обратной отправке. Чтобы обойти это, вам нужно записывать добавляемые элементы в скрытое поле, а потом читать их на сервере. Это не очень удобный, но наиболее правильный выход. Если нужно позже могу показать пример. Но общая идея такая.
    21 декабря 2012 г. 6:20
    Модератор
  • Второй вариант, это выделение всех добавленных элементов при отправке страницы на сервер и там уже использование Request.Form для добавления их в коллекцию. Но скорей всего у вас логика на выделенный элемент уже есть. И этот вариант мало подходит.

    Для связи [mail]

    21 декабря 2012 г. 8:22
    Модератор
  • Покажите пожалуйста пример, буду очень признателен!
    22 декабря 2012 г. 11:02
  • Добавляете с помощью jQuery на страницу одновременно с добавлением в ListBox скрытые поля с одинаковым именем

    <input type="text" name="MyListBoxItem" value="MyVal1" />
    Потом на серверной стороне получаете их значения из
    string[] myvals = Request["MyListBoxItem"].Split(',');

    Т.е. все значение объединяются в одну строку, разделенную запятыми и вам нужно ее разбить, чтобы получить обратно свои значения.

    Для связи [mail]

    • Помечено в качестве ответа Boguyang 25 декабря 2012 г. 14:05
    24 декабря 2012 г. 8:02
    Модератор
  • а можно ли использовать для этих целей ajax control toolkit?
    • Изменено Boguyang 24 декабря 2012 г. 10:43
    24 декабря 2012 г. 10:39
  • Всё времени не было написать. Вот пример:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="WebApplication.WebForm" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            var listItems = new Array();
            $(function () {
                $("#addItem").click(function () {
                    var text = "Test"
                    var value = "1"
                    $("#myList").append($("<option/>", { value: value, text: text }));
                    listItems.push(Object.create({ Text: text, Value: value }));
                    $("#listValues").val(ParseArrayToJson(listItems));
                });
                $("#delItem").click(function () {
                    $("#myList :selected").remove();
                });
            });
            function ParseArrayToJson(listItems) {
                var jsonString = '[';
                for (i = 0; i < listItems.length; i++) {
                    jsonString = jsonString + "{";
                    for(var key in listItems[i])
                        jsonString = jsonString + '"' + key + '":"' + listItems[i][key] + '",';
                    jsonString = jsonString.substring(0, jsonString.length - 1);
                    if(i+1 == listItems.length)
                        jsonString = jsonString + "}";
                    else
                        jsonString = jsonString + "},";
                }
                jsonString = jsonString + ']';
                return jsonString;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:ListBox ID="myList" runat="server"></asp:ListBox>
        <input id="addItem" type="button" value="Add new item" />
        <asp:HiddenField ID="listValues" runat="server" Value="empty" />
    
            <br />
            <asp:Button ID="saveButton" runat="server" OnClick="saveButton_Click" Text="Save" />
    
        </div>
        </form>
    </body>
    </html>
    

    using System;
    using System.Web.Script.Serialization;
    
    namespace WebApplication
    {
      public partial class WebForm : System.Web.UI.Page
      {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void saveButton_Click(object sender, EventArgs e)
        {
          string selectJson = listValues.Value;
          JavaScriptSerializer serializer = new JavaScriptSerializer();
          //Можете использовать.
          ListItem[] items = serializer.Deserialize<ListItem[]>(selectJson);
        }
      }
      public class ListItem
      {
        public string Text { get; set; }
        public string Value { get; set; }
      }
    }

    • Помечено в качестве ответа Boguyang 25 декабря 2012 г. 14:05
    25 декабря 2012 г. 12:25
    Модератор
  • Спасибо большое за помощь! Всё работает. Только ещё дописал удаление:

    $("#delItem").click(function () {
                    listItems.splice($("#myList :selected").index(),1);
                    $("#myList :selected").remove();
                    $("#listValues").val(ParseArrayToJson(listItems));
                });

    • Изменено Boguyang 25 декабря 2012 г. 14:03
    25 декабря 2012 г. 13:55