2011-03-09 74 views
6

我有一个由JSon加载的<select>。但我想用“@ html.dropdownlist helper”代替。我的JSON是:如何使用JSon填充@ html.dropdownlist mvc帮手

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

我希望我的代码的可重用性和自我记录。 如何使用dropdownlist将对象“site”从JSon发送到“cshtml”,以执行类似@html.dropdownlist(site.id, site.Nome)的操作???

有没有办法?

Tks guys。

回答

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); 
} 
+0

我应该怎么做的情况下,我想,以填补下拉上加载本身? http://stackoverflow.com/questions/5389571/formcollection-not-containing-select-control-added-in-mvc-razor – Vijay 2011-03-22 10:19:14

+0

谢谢你Darin Dimitrov.It帮我 – 2014-03-18 11:29:46

+0

@darin如果有一个模型错误和它返回到视图所选择的选项对我来说已经消失了,我猜是因为它在我搜索时按需加载。你知道如何解决这个问题吗?在搜索要选择的选择之前,我必须键入3个字母 – 2016-05-02 21:54:23