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 属性。

 

转载于:https://www.cnblogs.com/Yuqui1980/archive/2011/07/19/2110848.html