.Net/C#（1）——select控件实现“多选”(涉及了：单选的select、ajax、forEach in、JS中for of/in,foreach,for,$.each(),$().each)

最新推荐文章于 2024-05-10 15:31:30 发布

Yvette_QIU

最新推荐文章于 2024-05-10 15:31:30 发布

阅读量3.5k

点赞数 2

分类专栏： # .Net

本文链接：https://blog.csdn.net/qq_41042595/article/details/100008719

版权

.Net 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

VS2015+.Net+Bootable

【此文目录】

身为小白的我，要在.Net报表的查询条件里加上select控件实现“多选”；select单选的话，加上属性“runat=server”就可以调用Page_Load()动态获取值，简单的哦~ 看图————》

若select单选且值为指定的，更简单了：【在JS中赋值给Select，点击提交，至后台，用“ Request["txtAnnual"]”获取值】

一：

<select>标签用上的话，就要用上ajax了，它的option值从后台“.aspx.cs”获取，然后返回，在回调函数用for循环或者$.each()拼起来，我觉得我这逻辑没有问题_(:з」∠)_，学习Java的我，在Java项目的JSP中获取select控件值，就是这样做的呀！！！屡试不爽，好吧？！但，我纳闷，URL到底怎么传呢?

我百度C#的ajax：

我收获到的:

c# mvc ajax后端获取data：

aspx：ajax【url: '@Href("~/dataStandard/Insert")',// 控制器/方法名 data: { "id": id, "code": code, "name": name, "typeid": typeid },//构建json字符串】----》aspx.cs中函数【//通过Request["value"] 获取json中的数据
string id = Request["id"].ToString();】（用@Href？？？我个小白看不懂呀 T.T）

C#中使用Ajax访问后台方法【一个Demo，正是我想要的！不过用上之后，回调函数的data没有值 T.T】：

aspx：ajax【在$(function() { 里

url: "xxx.aspx/addMethod", data: JSON.stringify({ name: $(".name").val() }),】----》aspx.cs中函数【

using System.Web.Services; 。。。。。。。

[WebMethod]
        public static String addMethod(String name)
{
return name+" back";
}

】(不需要自己手动添加web.config的配置)

C#前台js里面使用ajax调用后台aspx.cs方法：

aspx：ajax【window.onload = function(){ 里

url: "comment.aspx/show",//方法所在页面和方法名   data: "{'aaa':'" + inputText + "'}",//aaa是方法show()的入参】----》aspx.cs中函数【[WebMethod] //一定要加该标识，才能从客户端调用该方法。引用命名空间 using System.Web.Services;
  public static string show(string aaa)   //必须是公共的静态方法 static
        {
            return aaa;
        }
】

仅用aspx文件实现Ajax调用后台cs程序。（实例）：

aspx：ajax【url: 'Test442.aspx?method=Send2', // 【调用后台的事件】（对，没有data）】----》aspx.cs中函数【protected void Page_Load(object sender, EventArgs e)
{
string result = "";
if (!IsPostBack)
{。。。。if (Request["method"] != null)
{。。。switch (Request.QueryString["method"])
{
case "Send2":

result = Send2(); <span style="font-family: Arial, Helvetica, sans-serif;">// 【执行的事件send2】</span>

break;
}
}。。。。。。
Response.Clear();
Response.ContentType = "text/plain";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Write(result);
Response.End();

}
}
}

】

针对select的ajax，也百度了：

asp.net c# select 动态加载数据【

就是 “$.post("Login/GetUser", function (data) {”的"Login/GetUser"不太懂呀_(:з」∠)_，配置配好了的？？？加注解？？？

】

ASP.NET MVC 下拉列表使用小结【

文章举的例子用到：@Html.DropDownList控件？？？

】

ASP.NET，通过select下拉列表框使文本框显示数据库数据【

ajax：url: 'handler.ashx',data: { action: "getDrop" }----》用的是ashx页面？？？

】

知道ajax的url写什么了，如：B.aspx的JS里写ajax，就从A.aspx.cs获取数据而不是自己的B.aspx.cs里面获取数据，即“ url : "A.aspx" ”，接着又遇到问题，返回的数据没有出现在success里的回调函数，而是到了error里的！

后面，还是请教.Net开发的同事发现问题，并解决了我那“单纯(蠢)的”问题T.T：

.Net/C#（4）——Ajax至后台获取值并返回前台的问题解决

解决了上面那个问题后，就是将data遍历放入select里的option中：

因为Zxxx.aspx（xxx指的是忽略的部分）不能传至自己的.aspx.cs中，所以添加了“Ajax.aspx”窗体，URL值为“Ajax.aspx”

还是先提供代码：

Ajax.aspx：【附加：.Net/C#（3）——基本的页面操作与认识（aspx与aspx.cs、Page_Load()、Page_Init()、Page.IsPostBack）】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="YJ_Ajax" %>

Ajax.aspx.cs：(将Service获取的记录值赋值于list,通过foreach...in...讲list的值适当改改,然后赋值于arrlist里,再转json类型返回页面)

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 EPReport.Core;
using EPReport.Entity;
using EPReport.BLL;

public partial class YJ_Ajax : System.Web.UI.Page
{
    
    protected void Page_Load(object sender, EventArgs e)
    {
        List<B_XD_Entity> list = CommonService.SELECT_B_XD("WFLX");
        List<B_XD_Entity> arrlist = new List<B_XD_Entity>();
        foreach (B_XD_Entity b in list)
        {
            b.ZDMC=string.Format( b.SJZ + "|" + b.ZDMC);
            arrlist.Add(b);
        }

        string json = QueryJson.Serializable(arrlist);
        Response.Write(json); 

    }

}

B_XD_Entity.cs：(Bean/Entity实体)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace EPReport.Entity
{
    /// <summary>
    /// 数据字典
    /// </summary>
    public class B_XD_Entity
    {

        public string ZDMC { set; get; }

        public string SJZ { set; get; }
    }
}

CommonService的Select_B_XD方法：(根据SQL语句,向数据库获取相应的值)

using EPReport.Core;
using EPReport.DAL;
using EPReport.Entity;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace EPReport.BLL
{
    public class CommonService
    {

        public static List<B_XD_Entity> SELECT_B_XD(string lx)
        {
            string sql = string.Format(@"SELECT ZDMC,SJZ FROM B_XD WHERE FZBH='{0}' AND ZT=1 ORDER BY SJZ", lx);

            DataProvider.PopulateDelegate<B_XD_Entity> pd = new DataProvider.PopulateDelegate<B_XD_Entity>(delegate (IDataReader dr, Dictionary<string, string> feilds)
            {
                return new B_XD_Entity
                {
                    ZDMC = Generals.Convert(dr["ZDMC"], ""),
                    SJZ = Generals.Convert(dr["SJZ"], "")
                };
            });

            return DataProvider.Instance().ExecDataReader<B_XD_Entity>(pd, sql, CommandType.Text, null);//CommandType是System.Data包里的
        }
}

DataProvider.cs：

using System;
using System.Collections.Generic;
using System.Data;
using System.Text;
using EPReport.Core;

namespace EPReport.DAL
{
    public abstract class DataProvider : IDisposable
    {
        /// <summary>
        /// 委托将DataReader转为实体类
        /// </summary>    
        /// <param name="dr">记录集</param>
        /// <param name="fileds">字段集合</param>
        /// <returns></returns>
        public delegate T PopulateDelegate<out T>(IDataReader dr, Dictionary<string, string> fileds);
        public static DataProvider Instance()
        {
            return Instance(DatabaseType.Oracle, "");
        }
        /// <summary>
        /// 根据SQL语句或者存储过程查询结果
        /// </summary>
        /// <typeparam name="T">查询的模型类型</typeparam>
        /// <param name="pd">查询条件</param>
        /// <param name="qry">SQL语句或者存储过程</param>
        /// <param name="ctype">查询语句的类型</param>
        /// <param name="args">参数列表</param>
        /// <returns></returns>
        public abstract List<T> ExecDataReader<T>(PopulateDelegate<T> pd, string qry, CommandType ctype, params DataParameter[] args);

}

QueryJson.cs：

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace EPReport.Core
{
    public class QueryJson
    {
        /// <summary>
        /// 序列化数据（泛型）
        /// </summary>
        /// <typeparam name="T">类型</typeparam>
        /// <param name="data">数据</param>
        /// <returns></returns>
        public static String Serializable<T>(T data) where T : class
        {
            if (null == data)
                return string.Empty;
            return JsonConvert.SerializeObject(data);//这个JSON包（Newtonsoft.Json[若没有,可下载安装]）里有的类、方法
        }
    }
}

Zxxx.aspx里css代码（放在<style>里）、控件代码【multiple="multiple"属性是多选样式的关键，但是有这个属性就不能有runat="server"属性，否则出现代码规范错误】及JS的ajax：（给多选的下拉框赋值；与“JSP”里的ajax是一样的————》知识是相通的）

.select2 {           
            margin-left: -15px;
            min-width: 273px;
            width: 100px;
        }

<select id="ddlWFLX" class ="select2" name="ddlWFLX" multiple="multiple"></select>

function BindSelect() {
            $.ajax({
                type: 'post',
                dataType: "json",
                url: "Ajax.aspx",
                //data: {},
                async: true,
                success: function (data) {
                    $("#ddlWFLX").empty(); //首先清空select现在有的内容
                                        
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        $("#ddlWFLX").select2({closeOnSelect: false}).append("<option  value=" + item.SJZ + ">" + item.ZDMC + "</option>");
                    }               
                    
                   
                },
                error: function (e) {                    
                }
            });
        }

在aspx页面的<head>里要加上这几个，矩形框内的是必须加上的【我的css、js在Java项目里，若要link引用，则“/项目名/src的main的webapps下的文件夹名assets/css/xxx.css或xxx.min.css”】：

    <!--Basic Styles-->
    <link href="/Xxxx/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/Xxxx/assets/css/weather-icons.min.css" rel="stylesheet" />
    <link href="/Xxxx/assets/css/font-awesome.min.css" rel="stylesheet"/>

    <!--Fonts Beyond styles-->
    <link href="/Xxxx/assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
    <link href="/Xxxx/assets/css/demo.min.css" rel="stylesheet" />
    <link href="/Xxxx/assets/css/animate.min.css" rel="stylesheet" />
    <link href="/Xxxx/assets/css/toastr.min.css" rel="stylesheet" />
    <link href="/Xxxx/lst/css/main.css" rel="stylesheet" />
    <link href="/Xxxx/assets/css/select2.css" rel="stylesheet" />
    <link href="/Xxxx/assets/css/select2-bootstrap.min.css" rel="stylesheet" />

页面中多选下拉框的效果：

补充：

①jquery的$().each和$.each的区别【有示例，更易理解，但是讲的用法，只是其中部分】

②Jquery的 each的使用 $.each()【有五种方法，其中包含了$().each的用法】《若该篇，感觉没看到你想要的，可以再看看这篇：jquery中each的全面用法【通过示例讲解了四种用法，遍历：数组、字符串对象、json对象、dom对象，用上了for()，也讲到了$().each】Or $.each循环【$.each()遍历：一维二维数组、json对象、dom对象】》

③jquery.each（）源码、jQuery之.each( function(index, Element) )方法详解+练习

④jquery中的for循环与each循环【有了对each用法的理解，看这篇（还是大幅度讲each的用法，学习Java必会for()循环,因为知识是想通的,所以没讲的细,但是举了例子,反正for()是JS的,each()是JQuery的），so easy更加巩固，若知道两者区别，可忽略~《$.each()与for()在JavaScript中的区别》《javascript中for、each以及foreach的效率对比》《forEach()与each()方法的区别【简单版】》】

⑤论js里面的for循环【JS中的for()与forEach()】

⑥js中forEach，for in，for of循环的用法【JS中的forEach、for、for( in )、for( of )【对Map,Set类型对象进行循环】、map使用，讲得细《js中for循环（原生js）【简单版“JS中的forEach、for、for( in )、for( of )、map使用”】》《forEach、for in 、 for of三者的区别【forEach、for、for( in )、for( of )使用，for( of )循环多种类型的值】》《 js中for-in的坑【forEach、for、for( in )、for( of )各个的优缺点】》《 js中for-in的坑【以个人经历谈：for与for( in )的对比】》】

⑦forEach()和map()的区别和理解【forEach()、map()、$.each()比较，提出共同点、不同点，举例讲解函数结构】

⑧C#中foreach命令的使用【foreach用法】《.NET学习之Foreach……【扯到“IEnumerator”的 “IEnumerable.GetEnumerator()”这个方法，以及yield关键字】》

⑨C# IEnumerable、IEnumerator和yield关键字详解

二：

在换成这个控件<select multiple="multiple"></select>前，使用的是：【css代码及控件代码】

Zxxx.aspx：

 .bootstrap-select > select {
            left: 0%;
            width: 155px;
            height: 100% !important;
        }

        .form-group .bootstrap-select {
            margin-bottom: 0;
            margin-left: -15px;
        }

        .dropdown-menu {
            min-width: 273px;
            width: 100px;
            /*overflow-y: auto;
               将底部的滚动条放在内容里的最底部了,而不是像右侧滚动条一直在内容的右侧*/
        
       }


<asp:DropDownList ID="ddlWFLX" CssClass="form-control selectpicker" multiple="multiple"
                                                    data-live-search="true" runat="server" data-width="100%" data-size="5" AutoPostBack="false" OnTextChanged="ddlWFLX_TextChanged" />

<!--OnTextChanged="ddlWFLX_TextChanged"属性,让"多选下拉框"默认选择第一个-->

Zxxx.aspx.cs：

//页面加载方法
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindWFLX();
        }
    }
//获取下拉框的option值
 private void BindWFLX()
    {
        //与<一:>里 给予的代码是一样的
        List<B_XTXG_SJZD_Entity> list = CommonService.SELECT_B_XTXG_SJZD("WFLX");
        var arr = (from x in list
                   select new B_XTXG_SJZD_Entity
                   {
                       ZDMC = string.Format("{0}|{1}", x.SJZ, x.ZDMC),
                       SJZ = x.SJZ
                   }).ToList();

        //arr.Insert(0, new B_XTXG_SJZD_Entity { ZDMC = "", SJZ = "" });//请选择违法类型

        ddlWFLX.DataTextField = "ZDMC";
        ddlWFLX.DataValueField = "SJZ";
        ddlWFLX.DataSource = arr;
        ddlWFLX.DataBind();
    }
//变量
public string Get_WFLX
    {
        get
        {
            try
            {
                

                return ddlWFLX.SelectedItem.Value;
            }
            catch { return ""; }
        }
    }
//OnTextChanged="ddlWFLX_TextChanged"对应后台方法
protected void ddlWFLX_TextChanged(object sender, EventArgs e)
    {
        BindCFDM(Get_WFLX);
    }

下拉框可以实现多选效果了，但是，在后台获取不了Select里的值；获取Select控件里的值，在JS里的function xxx() 里测试，发现能够获取Select勾选的value，但是点击“提交”，不要指望Select能够传后台传得完全，我用“ddlWFLX.SelectedItem.Value”只能获取“勾选中的第一个”，我若写SelectedItems，报错。。。我太难了！！！

所以，在使用控件<select multiple="multiple"></select>后，如何获取控件值呢：

【未完善】

Yvette_QIU

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
.Net/C#（1）——select控件实现“多选”(涉及了：单选的select、ajax、forEach in、JS中for of/in,foreach,for,$.each(),$().each)

VS2015+.Net+Bootable【此文目录】吐槽下拉框动态向后台获取option值获取下拉框选择的项并传至后台身为小白的我，要在.Net报表的查询条件里加上select控件实现“多选”；select单选的话，加上属性“runat=server”就可以调用Page_Load()动态获取值，简单的哦~ 看图————》若sele...
复制链接

扫一扫