曾经的代码系列——AJAX和JSON生成下拉列表框
曾经的代码系列——AJAX和JSON生成下拉列表框
木宛城主 发表于3年前
曾经的代码系列——AJAX和JSON生成下拉列表框
  • 发表于 3年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

代码测试使用

前台页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetGradeClassInfo.aspx.cs" Inherits="Eyes.Web.GetGradeClassInfo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax and Json</title>
    <script src="Scripts/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        var xhr; window.onload = function () { xhr = new XMLHttpRequest(); GetDataByAjax(); showMsg(); } function showMsg() { document.getElementById("msgDiv").style.display = "block"; document.getElementById("msgImg").src = "Images/load.gif"; } function GetDataByAjax() { xhr.open("GET", "GetGradeClassInfo.aspx?isAjax=1", true); xhr.setRequestHeader("If-Modified-Since", "0"); //不使用缓存
            xhr.onreadystatechange = watching; xhr.send(null); } //存储服务器返回的年级/班级信息
        var jsonResult; function watching() { if (xhr.readyState==4) { if (xhr.status==200) { var resStr = xhr.responseText; jsonResult = eval("(" + resStr + ")"); AddGradesToSelectControl(jsonResult.grades); AddClassesToSelectControl(jsonResult.grades[0].id); document.getElementById("msgDiv").style.display = "none"; } else { alert("服务器错误"+xhr.status); } } } //将包含年级信息的数组--->生成年级下拉列表选项
        function AddGradesToSelectControl(gradeArr) { var selGrades = document.getElementById("grades"); for (var i = 0; i < gradeArr.length; i++) { var option = new Option(gradeArr[i].name, gradeArr[i].id); selGrades.options.add(option); } } //将包含班级信息的数组--->生成班级下拉列表选项
        function AddClassesToSelectControl(gradeId) { var selClasses = document.getElementById("classes"); ClearSel(selClasses); for (var i = 0; i < jsonResult.classes.length; i++) { if (gradeId == jsonResult.classes[i].cgId) { var option = new Option(jsonResult.classes[i].name, jsonResult.classes[i].id); selClasses.options.add(option); } } } //清空下拉列表框
        function ClearSel(selObj) { for (var i = selObj.options.length - 1; i > -1; i--) { selObj.options[i] = null; } } </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="display:none" id="msgDiv">
        <img id="msgImg" />
    </div>
    
    <div >
        <select id="grades" onchange="AddClassesToSelectControl(this.value)"></select>
        <select id="classes">
           
        </select>
    </div>
    </form>
</body>
</html>

后台页面——手动拼接Json字符串

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; namespace Eyes.Web { public partial class GetGradeClassInfo : System.Web.UI.Page { BLL.GradeManager gradeManager = new BLL.GradeManager(); BLL.ClassManager classManager = new BLL.ClassManager(); //存放年纪信息
        List<Model.Grades> listGrades = null; List<Model.Classes> listClasses = null; protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrWhiteSpace(Request.QueryString["isAjax"])) { System.Threading.Thread.Sleep(5000); LoadData(); string gradeArrStr = GetGradeDataString(); string classArrStr = GetClassDataString(); Response.Write("{grades:"+gradeArrStr+",classes:"+classArrStr+"}"); Response.End(); } } /// <summary>
        /// 获得年级数据字符串 /// </summary>
        /// <returns>[{id:1,name:"eyes"},{}]</returns>
        public string GetGradeDataString() { StringBuilder sbStr = new StringBuilder("["); foreach (Model.Grades  model in listGrades) { sbStr.Append("{id:"); sbStr.Append(model.GID); sbStr.Append(",name:\""); sbStr.Append(model.GName); sbStr.Append("\"},"); } return sbStr.ToString().Substring(0, sbStr.Length - 1) + "]"; } /// <summary>
        /// 获得班级数据字符串 /// </summary>
        /// <returns></returns>
        public string GetClassDataString() { StringBuilder sbStr = new StringBuilder("["); foreach (Model.Classes model in listClasses) { sbStr.Append("{id:"); sbStr.Append(model.CID); sbStr.Append(",name:\""); sbStr.Append(model.CName); sbStr.Append("\",cgId:"); sbStr.Append(model.CGID); sbStr.Append("},"); } return sbStr.ToString().Trim(',') + "]"; } public void LoadData() { listGrades = gradeManager.GetAllGrades(); listClasses = classManager.GetAllClasses(); } } }
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 222
码字总数 199010
×
木宛城主
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: