绑定下拉框的两种写法

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe JavaScript

作者：陈钰桃

撰写时间：2020年9月6日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

成果图

绑定下拉框的两种写法

案例：

第一种方法、

页面代码

HTML代码、

</select>

</div>

SCRIPT代码

1.1 POST提交方法

var xhr = new XMLHttpRequest();

xhr.open("POST", "@Url.Content("~/BaseInfoManage/Specialty/selectAcademeFoselect")");

//onload事件

xhr.onload = function () {

//获取回调值

var jsonData = JSON.parse(xhr.responseText);

//获取下拉框ID

var searchAcademeID = document.getElementById("searchAcademeID");

//绑定下拉框

for (var i = 0; i < jsonData.length; i++) {

//需要拼接下拉框

//写法1 原生JS 内容innerHtml去处理

//写法2.原生JS append(DOM对象) 注意：原生JS append方法不支持原生HTML代码直接注入

//searchAcademeID.append('<option value="' + jsonData[i].academeID + '">' + jsonData[i].academeName + '</option>') 不支持这样的写法--原生HTML代码直接注入

//写法2.（1）

//创建option元素

var varOption = document.createElement("option");

varOption.value = jsonData[i].academeID;

//设置内部文本

varOption.innerText = jsonData[i].academeName;

searchAcademeID.append(varOption);

//写法2.（2）

kisearchAcademeID.innerHTML += '<option value="' + jsonData[i].academeID + '">' + jsonData[i].academeName + '</option>';

1.2 调用封装xhr数据方法

ajax("@Url.Content("~/BaseInfoManage/Specialty/selectAcademeFoselect")",

//传参数

{ a: 1, b: 2 },

//回调的方法

function (jsonObj) {

var searchAcademeID = document.getElementById("searchAcademeID");

//变量strHtml

var strHtml = "";

for (var i = 0; i < jsonObj.length; i++) {

//append(DOM对象)

//单个下拉框普通写法写法2.1

var varOption = document.createElement("option");

varOption.value = jsonData[i].academeID;

varOption.innerText = jsonData[i].academeName;

searchAcademeID.append(varOption);

searchAcademeID.innerHTML += '<option value="' + jsonObj[i].academeID + '">' + jsonObj[i].academeName + '</option>';

//多个下拉框的简单写法写法2.2

strHtml += '<option value="' + jsonObj[i].academeID + '">' + jsonObj[i].academeName + '</option>';

}

//搜索学院下拉框

searchAcademeID.innerHTML += strHtml;

//表单(模态框) 学院下拉框

document.getElementById("academeID").innerHTML += strHtml;

//请求方式

//使用get时需要封装判断

}, 'post');

//----------- 封装xhr数据 ----------------

// url 浏览 params 参数列表 callback 回调函数 method 请求方式

function ajax(url, params, callback, method) {

//JS格式

var formData = new FormData();

//处理method

var xhr = new XMLHttpRequest();

if (method == undefined || method == "") {

method = "get";

} else {

//toLowerCase 转为小写

//当method 请求方式不等于"get"或"post"的时候 method 请求方式强制等于"get"

if (method.toLowerCase() != "get" && method.toLowerCase() != "post") {

method = "get";

}

//------ 原生JS中get请求需要手动拼接 -------

if (method.toLowerCase() == "get") {

//get

url += "?";

//遍历params

for (var key in params) {

url += key + "=" + params[key] + "&";

}

//清除最后一个&

if (url.charAt(url.length - 1) == '&') {

url = url.substr(0, url.length - 1);

}

else {

//post

//遍历params

for (var key in params) {

//JS格式转换成formData

formData.append(key, params[key]);

}

//拼接路径

xhr.open(method, url);

xhr.onload = function () {

var jsonData = JSON.parse(xhr.responseText);

//调用回调函数

callback(jsonData);

};

xhr.send(formData);

}

控制器代码

/// <summary>

/// 查询所有学院信息 for 下拉框

/// </summary>

/// <param name="a">参数a</param>

/// <param name="b">参数b</param>

/// <returns></returns>

public ActionResult selectAcademeFoselect(int a,int b)

{

//JS方式创建下拉框

List<SYS_Academe> list = myModel.SYS_Academe.ToList();

return Json(list, JsonRequestBehavior.AllowGet);

}

第二种方法、

控制器代码

/// <summary>

/// 页面

/// </summary>

/// <returns></returns>

public ActionResult Index()

{

//下拉框（通过C#的where引擎绑定）在页面对应的Action里面

//查询出学院信息（全部） listAcademe [变量A]

List<SYS_Academe> listAcademe = myModel.SYS_Academe.ToList();

//这里的发送写法与页面接收无关

//写法一

//注意使用的参数名称是否对应！！！

//.后的名称自定义（符合要求即可）

//在页面接收时使用的是前面的名称 academes [变量B]

//ViewBag.academes = listAcademe;

//写法二

//通过ViewData发送的，页面也可以通过ViewBag来接收控制器发送和页面接收使用ViewData 、ViewBag 无限制

ViewData["academes"] = listAcademe;

隐式转换、显式转换的示例

//int a = 1;

//long b = a;

//b = 1; //隐式转换(程序自动完成) 一般从小范围(类型)到大范围(类型)

//int c = b; //无法将long类型隐式转换为int类型需要显式转换(强制转换) 大范围(类型)到小范围(类型)

return View();

}

页面代码

HTML前Script代码

@using SchoolManageSystem.Models;

Layout = null;

//页面接收写法与控制器发送写法无关

//写法一（自动转换数据类型--隐式转换）

//List<> 自定义名称 = ViewBag.控制器传过来的名称（页面接收数据名称 [变量B]）;

// academeList [变量C] academes [变量B]

// ViewBag ViewData 内存是共通的 ViewData发送的可以用ViewBag来接收 ViewBag发送的也可以用ViewData接收

// ViewBag、ViewData 接收数据的方法不同 ViewBag性能更好一些

//List<SYS_Academe> academeList = ViewBag.academes;

//写法二（强制转换数据类型--显式转换）数据类型相同才能进行强制转换

//类型对不上就强制转换就会出错[无法进行强制转换]（注意类型）

//例如：List<SYS_Class> list = (List<SYS_Class>)ViewData["academes"];

//正常运行

//避免异常

//原因：先强行转换，如果能正常转换，就返回转换后的javascript 如果转换不了就返回一个null 不会报异常，正常运行

//例如：List<SYS_Class> list =ViewData["academes"] as List<SYS_Class>;

//List<SYS_Academe> academeList = (List<SYS_Academe>)ViewData["academes"];

List<SYS_Academe> academeList = ViewData["academes"] as List<SYS_Academe>;】

正常运行

原因：先强行转换，如果能正常转换，就返回转换后的javascript 如果转换不了就返回一个null 不会报异常，正常运行

//例如：List<SYS_Academe> academeList1 = ViewData["academes"] as List<SYS_Academe>;

}

HTML

使用foreach循环、使用变量C、绑定下拉框

@foreach (SYS_Academe item in academeList)

{

<option value="@item.academeID">@item.academeName</option>

}

</select>

</div>