1. 技术文章
  2. ASP.NET jQuery double listbox edit and save

ASP.NET jQuery double listbox edit and save

由 风格不统一 提交于 2019-12-06 00:29:54

This is one way to do it, I am using:

This is a full working example, the output is:

As you can see, the viewstate is emulated on each post so you can have access in server code to both list items

This is the code:

ASPX

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="KnockoutJS1.aspx.cs" Inherits="WebApplication1.KnockoutJS1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:HiddenField runat="server" ID="list1Values" />
    <asp:HiddenField runat="server" ID="list2Values" />
    <asp:ListBox Rows="10" Width="15%" runat="server" ID="list1" DataTextField="Name" DataValueField="ID">
    </asp:ListBox>
    <asp:ListBox Rows="10" Width="15%" runat="server" ID="list2" DataTextField="Name" DataValueField="ID">
    </asp:ListBox>
    <asp:Button Text="Save" runat="server" OnClick="saveData_Click" />
    <br /><asp:Label ID="lblMessage" runat="server" />
    <script type="text/javascript">
        function state(id, name) {
            return {
                ID: ko.observable(id),
                Name: ko.observable(name)
            };
        }
        $(function () {
            var options1 = ko.observableArray();
            var options2 = ko.observableArray();
            var list1ID = "<%= this.list1.ClientID%>";
            var list2ID = "<%= this.list2.ClientID%>";

            $("#" + list1ID).find("option").each(function () {
                options1.push(new state($(this).val(), $(this).text()));
            });
            $("#" + list2ID).find("option").each(function () {
                options2.push(new state($(this).val(), $(this).text()));
            });
            function serializeArrays(a1, a2) {
                var list1ValuesID = "<%= this.list1Values.ClientID %>";
                var list2ValuesID = "<%= this.list2Values.ClientID %>";

                $("#" + list1ValuesID).val(ko.toJSON(a1));
                $("#" + list2ValuesID).val(ko.toJSON(a2));
            }
            var viewModel = {
                states1: options1,
                states2: options2,
                states1Selected: ko.observable(),
                states2Selected: ko.observable(),
                execute1: function () {
                    this.states2.push(this.states1Selected());
                    this.states1.remove(this.states1Selected());
                    serializeArrays(this.states1(), this.states2());
                },
                execute2: function () {
                    this.states1.push(this.states2Selected());
                    this.states2.remove(this.states2Selected());
                    serializeArrays(this.states1(), this.states2());
                }
            };

            ko.applyBindings(viewModel);
        });
    </script>
</asp:Content>

Code behind

public partial class KnockoutJS1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.list1.Attributes.Add("data-bind", "options: states1, optionsText: 'Name', value: states1Selected, event: { dblclick: execute1 }");
            this.list2.Attributes.Add("data-bind", "options: states2, optionsText: 'Name', value: states2Selected, event: { dblclick: execute2 }");

            var s = Builder<State>.CreateListOfSize(6).Build();

            this.list1.DataSource = s;
            this.list1.DataBind();
        }
        else
        {
            var states1 = JsonConvert.DeserializeObject<IEnumerable<State>>(this.list1Values.Value);
            var states2 = JsonConvert.DeserializeObject<IEnumerable<State>>(this.list2Values.Value);

            this.list1.DataSource = states1;
            this.list1.DataBind();
            this.list2.DataSource = states2;
            this.list2.DataBind();
        }
    }

    protected void saveData_Click(object sender, EventArgs e)
    {
        this.lblMessage.Text = string.Empty;

        var states1 = JsonConvert.DeserializeObject<IEnumerable<State>>(this.list1Values.Value);
        var states2 = JsonConvert.DeserializeObject<IEnumerable<State>>(this.list2Values.Value);

        foreach (var item in states1)
        {
            this.lblMessage.Text += "List1: " + item.Name + " " + item.ID.ToString() + "<br/>";
        }
        this.lblMessage.Text += "<br/><br/>";
        foreach (var item in states2)
        {
            this.lblMessage.Text += "List2: " + item.Name + " " + item.ID.ToString() + "<br/>";
        }
    }
}

public class State
{
    public int ID { get; set; }
    public string Name { get; set; }
}
标签
jquery
ASP.NET
listbox
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!