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)

 </div>

 <div class="editor-field">

     <select id="tallyclasslist" name="ClassId" style="width: 200px;">

        <option value="">请选择</option>

     </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',

             dataType: 'json',

             data: { userid: userid, kind: kind },

             error: function (err) {

                 alert("网络连接失败，请检查网络状态，或稍后访问，谢谢！");

             },

             success: function (data) {

                 $.each(data, function (i, item) {

                     $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#tallyclasslist"));

                 });

 

                 if ($.trim(classId) != "") $("#tallyclasslist").val(classId);

             }

         });

     }

 }

 

 

 

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");

             return this.Json(selectList, JsonRequestBehavior.AllowGet);

         }

 

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