如何在mvc中填充下拉列表

时间:2014-04-29 08:13:38

标签: jquery asp.net-mvc asp.net-mvc-4 html.dropdownlistfor

我有一个下拉列表,我正在尝试使用数据库中的数据填充我的dorpdown列表,为此我使用的是mvc,所以我如何在控制器中编写方法以及如何为此编写jquery: 这是我在我看来实现的内容;

@Html.DropDownListFor("")

这是我可以找到的jquery:

$(document).ready(function() 
{ 
    $('#id_trial').click(function() {

alert("entered in trial button code");

$.ajax({
    type: "GET",
    source: "/ClassName/MethodName",
    dataType: "json",
    success: function (data) {
        $.each(data.aaData,function(i,data)
        {
         alert(data.value+":"+data.text);
         var div_data="<option value="+data.value+">"+data.text+"</option>";
        alert(div_data);
        $(div_data).appendTo('#ch_user1'); 
        });  
        }
  });
});
});

我认为这可能是控制器中的一种方法:

public virtual JsonResult MethodName()
    {
        IList<Fund> funds = _fundManager.Search();
        var list = from x in funds
        select new { Id = x.Code, Name = x.Name };  
        return Json(list);
    }

我不知道如何将所有这些链接起来并使其正常工作,蚂蚁帮助将不胜感激。

4 个答案:

答案 0 :(得分:2)

可以参考以下链接中的以下代码剪辑或详细信息

Dynamically populate the drop-down using jQuery in ASP.Net MVC3

在您的控制器中:

[HttpGet]
public virtual JsonResult LoadInfo()
{
    var query = _repository.GetInformation(); //Here you return the data. 
    return Json(query, JsonRequestBehavior.AllowGet);
}

然后在你看来:

然后使用jQuery

加载下拉列表
function LoadInfo() {

    $.getJSON("@Url.Action(MVC.ControllerName.MethodName())", null,
        function (data) {

             $("#info").empty();

            $.each(data, function () {
                 $("#info").append($("<option />").val(this.Id).text(this.Name));
            });

    });
}

答案 1 :(得分:0)

您展示的代码应该只需更改一下 -

@Html.DropDownList("ch_user1");

答案 2 :(得分:0)

试试下面。见Darin Dimitrov给出的this example

@model App.Models.staff

@Html.DropDownListFor(
    x => x.staffName, 
    Enumerable.Empty<SelectListItem>(), 
    "-- Loading Values --",
    new { id = "foo" }) 

 $(function () {
        $.getJSON('/ClassName/MethodName', function (result) {
            var ddl = $('#foo');
            ddl.empty();
            $(result).each(function () {
                $(document.createElement('option'))
                    .attr('value', this.stafdid)
                    .text(this.staffName)
                    .appendTo(ddl);
            });
        });
    });

答案 3 :(得分:0)

尝试做这样的事情:

$.ajax({
type: "GET",
source: "/ClassName/MethodName",
dataType: "json",
success: function (data) {
   var div_data="";
    $(data).each(function(){
     div_data +="<option value="+$(this).value+">"+$(this).text+"</option>";
    });
    $('#ch_user1').html(div_data);
   }
 });