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>

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 }

 

 

 

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         }

 

注: GetTallyClassList(userid, kind) 方法取到的是List<TallyClassInfo> 的数据, 其中包含 ClassId, 和 ClassName 属性。

 

posted @ 2011-07-19 17:26  祝金峰  阅读(1588)  评论(0编辑  收藏  举报