ASP.NET jQuery的双列表框编辑和保存(ASP.NET jQuery double lis

2019-09-18 14:20发布

站内文章 / 前端开发
19 0 0

好了 - 所以我一直拉出在这一个时间太长了，现在我的头发。 希望你们可以帮忙。

我有一个表单，允许用户将自己公司的输入/编辑数据。 它的大部分是相当直接的表单字段的编辑，但我有一个部分我在哪里，允许用户选择什么状态（或多个）其业务运营中，然后分配一个接触到该状态。 我使用jQuery和2列表框控件其中I允许用户双击状态（多个），他们希望在操作。jQuery的转移到其他列表框以及到一个下拉控制将所选择的状态下，他们可以然后进入他们的国家的具体联系方式。

现在的“头发拉出来”的一部分。 我已经看到了很多关于从2 ListBox控件获取数据，把它变成一个数组并将其放入一个隐藏的表单字段职位 - 但如何做到这一点的例子是少之又少。 少数，我发现我还没有成功地整合。 任何帮助那里会被大加赞赏。

另一块拼图的是，这个网页应该充当页面，用户可以编辑，以及 - 等初始加载我的网页（理想情况下）预加载状态（S）用户已经通过jQuery已经入选第二个列表框......但进入第二个列表框的状态不应该在第一个显示出来。 啊。 任何指针就如何实现这一目标也将不胜感激。

这里是我的代码：

ASPX文件： 

<%@ Page Title="Mappings" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Mapping.aspx.cs" Inherits="Account_Mapping" EnableEventValidation="false" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript">
    $(function () {
        var sourceState = $('#MainContent_sourceState option').clone();

        $('#stateAllA').click(function () {
            $('#MainContent_sourceState option').appendTo('#MainContent_targetState, #MainContent_contactState');
        });

        $('#stateAllR').click(function () {
            $('#MainContent_targetState option').appendTo('#MainContent_sourceState');
            $('#MainContent_contactState option').remove();
        });



        $('#MainContent_sourceState').dblclick(function () {
            $('#MainContent_sourceState option:selected').appendTo('#MainContent_targetState, #MainContent_contactState');
        });


        $('#MainContent_targetState').dblclick(function () {
            var targetList = $('#MainContent_targetState option:selected');
            var targetVal = $('#MainContent_targetState option:selected').val();
            targetList.appendTo('#MainContent_sourceState');
            $('#MainContent_contactState option[value=' + targetVal + ']').remove();
            //$('#contactState option:selected').remove();
            var foption = $('#MainContent_sourceState option:first');
            var soptions = $.makeArray($('#MainContent_sourceState option:not(:first)')).sort(function (a, b) {
                return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
            });
            $('#MainContent_sourceState').html(soptions).prepend(foption);
            foption.attr("selected", true).siblings("option").removeAttr("selected");
        });

    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Admin
    </h2>
    <p>
    Please fill in all the required information and click "submit" when complete.
    </p>
    <div class="formLeft">
        <b>Company Name:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Name" runat="server" CssClass="textEntry"></asp:TextBox>
    </div>
    <div class="formLeft">
        <b>Company Phone:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Phone" runat="server" CssClass="textEntry"></asp:TextBox>
    </div>
    <div class="formLeft">
        <b>Main Contact Person:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Contact" runat="server" CssClass="textEntry"></asp:TextBox>
    </div>
    <div class="formLeft">
        <b>Main Email Address:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Email" runat="server" CssClass="textEntry"></asp:TextBox>
    </div>
    <div class="formLeft">
        <b>Company Website:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Website" runat="server" CssClass="textEntry"></asp:TextBox>
    </div>
    <div class="formLeft">
        <b>Company Description:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Desc" runat="server" CssClass="textAreaEntry" TextMode="MultiLine"></asp:TextBox>
    </div>
    <div class="formLeft">
        <b>Company Access:</b>
    </div>
    <div class="formRight">
        <asp:TextBox ID="comp_Access" runat="server" CssClass="textAreaEntry" TextMode="MultiLine"></asp:TextBox>
    </div>
    <hr />
    <p>
    <b>Which state(s) do you operate in?</b>
    </p>
    <div class="formLeft">
        <b>OPTIONS:</b> <a id="stateAllA" href="#" style="font-size:11px" onclick="return false;">(add all)</a><br />
        <em style="font-size:12px">(double-click an item to add it to your list)</em><br />
        <asp:ListBox ID="sourceState" runat="server" CssClass="selectEntry" SelectionMode="Multiple" DataSourceID="myDSID" DataTextField="state_name" DataValueField="state_ID"></asp:ListBox>
        <asp:SqlDataSource ID="myDSID" runat="server" 
            ConnectionString="<%$ ConnectionStrings:myDatasource %>" 
            SelectCommand="SELECT [state_ID], [state_name] FROM [states]">
        </asp:SqlDataSource>
    </div>
    <div class="formRight">
        <b>YOUR SELECTIONS:</b> <a id="stateAllR" href="#" style="font-size:11px" onclick="return false;">(remove all)</a><br />
        <em style="font-size:12px">(double-click an item to remove it from your list)</em><br />
        <asp:ListBox ID="targetState" runat="server" CssClass="selectEntry" SelectionMode="Multiple"></asp:ListBox>
        <asp:HiddenField ID="hdnStates" runat="server" />
    </div>
    <p>
    <b>Do you wish to assign state-specific contacts? If so, choose the appropriate state and fill out the info below.</b><br>
    </p>
    <p>
    <asp:DropDownList ID="contactState" runat="server"></asp:DropDownList>
    </p>
    <div align="right" style="margin-top:5px;">
        <asp:Button ID="Button1" runat="server" Text="Submit" 
            onclick="Button1_Click" />
    </div>
</asp:Content>

和我隐藏： 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
public partial class Account_Mapping : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //let's get our passed variables
        //the company you're editing comes from a dropdown on prev page
        string passedComp = Session["searchCompany"].ToString();

        if (!IsPostBack)
        {
            //now let's get all the relevant data from the DB

            //first, the easy stuff
            DataTable dt1 = GetBasicCompData(passedComp);

            //let's populate those fields in the form
            comp_Name.Text = dt1.Rows[0][0].ToString();
            comp_Phone.Text = dt1.Rows[0][1].ToString();
            comp_Contact.Text = dt1.Rows[0][2].ToString();
            comp_Email.Text = dt1.Rows[0][3].ToString();
            comp_Website.Text = dt1.Rows[0][4].ToString();
            comp_Desc.Text = dt1.Rows[0][5].ToString();
            comp_Access.Text = dt1.Rows[0][6].ToString();

            //state mapping
            DataTable dt2 = GetStateCompData(passedComp);

            for (int i = 0; i < dt2.Rows.Count; i++)
            {
                //targetState.DataSource = dt2;
                //targetState.DataValueField = "state_ID";
                //targetState.DataTextField = "state_Name";
                //targetState.DataBind();

                //contactState.DataSource = dt2;
                //contactState.DataValueField = "state_ID";
                //contactState.DataTextField = "state_Name";
                //contactState.DataBind();
            }
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        //breakpoint here to try and return my values 
        string myStates = hdnStates.Value;
    }


    public DataTable GetBasicCompData(string strComp)
    {
        //Query DB based on result
        string strConn = ConfigurationManager.ConnectionStrings["myConn"].ConnectionString;
        SqlConnection con = new SqlConnection(strConn);
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.Parameters.AddWithValue("@Comp", strComp);
        cmd.CommandText = "SELECT companies.comp_Name, companies.comp_Phone, companies.comp_Contact, companies.comp_Email, companies.comp_Website, companies.comp_Desc, companies.comp_Access FROM companies WHERE comp_ID =  ''+ @Comp +''";
        DataSet objDs = new DataSet();
        SqlDataAdapter dAdapter = new SqlDataAdapter();
        dAdapter.SelectCommand = cmd;
        con.Open();
        dAdapter.Fill(objDs);
        con.Close();
        return objDs.Tables[0];
    }

    public DataTable GetStateCompData(string strComp)
    {
        //Query DB based on result
        string strConn = ConfigurationManager.ConnectionStrings["myConn"].ConnectionString;
        SqlConnection con = new SqlConnection(strConn);
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.Parameters.AddWithValue("@Comp", strComp);
        cmd.CommandText = "SELECT states.state_ID, states.state_Name, contact_Name, contact_Phone, contact_Email FROM states INNER JOIN companies_states ON states.state_ID = companies_states.state_ID WHERE comp_ID = ''+ @Comp +''";
        DataSet objDs = new DataSet();
        SqlDataAdapter dAdapter = new SqlDataAdapter();
        dAdapter.SelectCommand = cmd;
        con.Open();
        dAdapter.Fill(objDs);
        con.Close();
        return objDs.Tables[0];
    }
}

所以你有它。 这是一个很大的消化，我知道了。 我喜欢在正确的方向踢。 :)

Answer 1:

这是为了做到这一点，我使用的一种方式：

  • jQuery的 ， 掘金
  • json.net ， 掘金
  • knockoutjs ， 掘金

这是一个完整的工作示例，输出为：

正如你所看到的，ViewState是模拟的每个岗位，所以你可以在服务器代码列表项目访问

这是代码：

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>

后面的代码

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


文章来源: ASP.NET jQuery double listbox edit and save
标签： jquery asp.net listbox
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~