如何使用JSon填充@html.dropdownlist mvc帮助器

时间:2011-03-09 13:39:32

标签: json asp.net-mvc-3 razor

我有一个<select>由JSon加载。但我想用“@html.dropdownlist helper”代替。我的Json是:

function LoadSites() {
$("SelectSite").html("");
$.getJSON("/Pedido/GetSite", null, function (data) {
    $("#SelectSite").append("<option value=0>Selecione...</option>");
    $.each(data.Result, function (index, site) {
        $("#SelectSite").append("<option value='" + site.Id + "'>" + site.Nome + "</option>");
    });
});

这个Json填充了这个......

<select id="SelectSite"></select>

我的控制器:

        [HttpGet]
    public JsonResult GetSite()
    {
        Repository<Site> siteRepo = new Repository<Site>( unitOfWork.Session );
        return this.Json( new { Result = siteRepo.All() }, JsonRequestBehavior.AllowGet );
    }

我希望我的代码更具可重用性和自我记录功能。 如何使用下拉列表将对象“site”从JSon发送到“cshtml”以执行@html.dropdownlist(site.id, site.Nome) ???

之类的操作

有办法吗?

Tks家伙。

1 个答案:

答案 0 :(得分:18)

在您看来:

@Html.DropDownListFor(x => x.SiteId, new SelectList(Enumerable.Empty<SelectListItem>()))

其中SiteId是您的视图模型的属性,它将在提交表单时收到所选的网站ID。

然后你可以使用AJAX填充这个下拉列表:

$(function() {
    $.getJSON('@Url.Action("GetSite", "Pedido")', function(result) {
        var ddl = $('#SiteId');
        ddl.empty();
        $(result).each(function() {
            ddl.append(
                $('<option/>', {
                    value: this.Id
                }).html(this.Nome)
            );
        });
    });
});

以及将返回JSON数据的控制器操作:

public ActionResult GetSite()
{
    var sites = new[]
    {
        new { Id = "1", Nome = "site 1" },
        new { Id = "2", Nome = "site 3" },
        new { Id = "3", Nome = "site 3" },
    };
    return Json(sites, JsonRequestBehavior.AllowGet);
}