ASP.net MVC 3.0 中使用jQuery Ajax 实现下拉框动态加载数据
通过jQuery 中 $.ajax 方法获取 List<object> 数据填充到cshmtl中select中，实例中使用 JSON格式传递数据。
1. cshtml页面片段：
1 <div class="editor-field">
2 @Html.RadioButtonFor(m => m.Kind, "0", new { @id = "radio1", @name = "kind", @onclick = "Utils.getTallyClassList(0, 0, '');" })
3 支出
4 @Html.RadioButtonFor(m => m.Kind, "1", new { @id = "radio2", @name = "kind", @onclick = "Utils.getTallyClassList(0, 1,'');" })
5 收入
6 @Html.ValidationMessageFor(m => m.Kind)
7 </div>
8 <div class="editor-label">
9 @Html.LabelFor(m => m.ClassId)
10 </div>
11 <div class="editor-field">
12 <select id="tallyclasslist" name="ClassId" style="width: 200px;">
13 <option value="">请选择</option>
14 </select>
2 @Html.RadioButtonFor(m => m.Kind, "0", new { @id = "radio1", @name = "kind", @onclick = "Utils.getTallyClassList(0, 0, '');" })
3 支出
4 @Html.RadioButtonFor(m => m.Kind, "1", new { @id = "radio2", @name = "kind", @onclick = "Utils.getTallyClassList(0, 1,'');" })
5 收入
6 @Html.ValidationMessageFor(m => m.Kind)
7 </div>
8 <div class="editor-label">
9 @Html.LabelFor(m => m.ClassId)
10 </div>
11 <div class="editor-field">
12 <select id="tallyclasslist" name="ClassId" style="width: 200px;">
13 <option value="">请选择</option>
14 </select>
15 </div>
2. javascript 代码部分：
1 var Utils = {
2
3 // 取账目分类列表
4 getTallyClassList: function (userid, kind, classId) {
5 $("#tallyclasslist").empty();
6 $("<option value=\"0\">请选择</option>").appendTo($("#tallyclasslist"));
7 if ($.trim(kind) == "") return false;
8 $.ajax({
9 url: '/Tally/GetTallyClassList',
10 dataType: 'json',
11 data: { userid: userid, kind: kind },
12 error: function (err) {
13 alert("网络连接失败，请检查网络状态，或稍后访问，谢谢！");
14 },
15 success: function (data) {
16 $.each(data, function (i, item) {
17 $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#tallyclasslist"));
18 });
19
20 if ($.trim(classId) != "") $("#tallyclasslist").val(classId);
21 }
22 });
23 }
24 }
2
3 // 取账目分类列表
4 getTallyClassList: function (userid, kind, classId) {
5 $("#tallyclasslist").empty();
6 $("<option value=\"0\">请选择</option>").appendTo($("#tallyclasslist"));
7 if ($.trim(kind) == "") return false;
8 $.ajax({
9 url: '/Tally/GetTallyClassList',
10 dataType: 'json',
11 data: { userid: userid, kind: kind },
12 error: function (err) {
13 alert("网络连接失败，请检查网络状态，或稍后访问，谢谢！");
14 },
15 success: function (data) {
16 $.each(data, function (i, item) {
17 $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#tallyclasslist"));
18 });
19
20 if ($.trim(classId) != "") $("#tallyclasslist").val(classId);
21 }
22 });
23 }
24 }
3. ActionResult 获取动态数据
1 /// <summary>
2 /// 取账目分类列表
3 /// </summary>
4 /// <param name="kind">类型（收入&支出）</param>
5 /// <returns></returns>
6 public JsonResult GetTallyClassList(int userid, int kind)
7 {
8 var list = Database.GetInstance().GetTallyClassList(userid, kind);
9 var selectList = new SelectList(list, "ClassId", "ClassName");
10 return this.Json(selectList, JsonRequestBehavior.AllowGet);
11 }
3 /// </summary>
4 /// <param name="kind">类型（收入&支出）</param>
5 /// <returns></returns>
6 public JsonResult GetTallyClassList(int userid, int kind)
7 {
8 var list = Database.GetInstance().GetTallyClassList(userid, kind);
9 var selectList = new SelectList(list, "ClassId", "ClassName");
10 return this.Json(selectList, JsonRequestBehavior.AllowGet);
11 }
注： GetTallyClassList(userid, kind) 方法取到的是List<TallyClassInfo> 的数据， 其中包含 ClassId, 和 ClassName 属性。
