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

1、说明通过 asp.net，利用jQuery ，c#语言给 select控件动态加载数据。前端页面使用的是.aspx类型的HTML页面，后台使用MVC上的controller控制器

2、webconfig 设置连接字符串

3、获取连接字符串

public class DBHelper
    {
        /// <summary>
        /// 获取数据库连接字符串
        /// </summary>
        /// <returns></returns>
        public static string getConnStr()
        {
            return WebConfigurationManager.ConnectionStrings["connStr"].ToString();
        }
    }

4、用到的数据表

我这里的数据表是Oracle中的，大家也可以用sql数据库

CREATE TABLE "DMKJ_SYSINFO_TS"."T_USER"
   (   "ID" NUMBER(10,0),
   "NAME" VARCHAR2(255 BYTE),
   "DESCRIBE" VARCHAR2(255 BYTE)
   }

5、前端页面代码

说明：需要自己引用jQuery的库文件

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="xx.aspx.cs" Inherits="xx.LoginPage" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <title></title>
 8   //在这里引入jQuery的库文件
 9 
10 </head>
11 <body>
12  <div >                                                                
13                                 
14                                         
15 <select id="tt01"  style=" width: 150px; height: 40px;font-size:17px;line-height: 40px;padding-left: 60px;" >
16   </select>
17  </div>
18 <script type="text/javascript">
19         $(function () {
20 GetUserList();
21 
22 });
23  function GetUserList() {
24             $.post("Login/GetUser", function (data) {
25                 var table = data;           
26                 $("#tt01").empty(); //首先清空select现在有的内容
27                 $("#tt01").append("<option selected='selected'  value=0>请选择用户..</option>");
28                 for (var i = 0; i < table.length; i++) {
29                     var item = table[i];
30                     $("#tt01").append("<option  value=" + item.id + ">" + item.text + "</option>");
31                 }
32                 //返回的是json格式的数据
33             }, "json");
34         }
35 
36    </script>
37 </body>
38 </html>

View Code