使用帶有MVC 4的Knockout.js填充選擇選項

Question

我是kickout.js的初學者。 我無法獲取在MVC 4視圖中填充的select選項。 這是我的代碼。

（控制器中的斷點顯示正確填充了視圖包的數據。該列表每個項目僅包含兩個字段：在控制器中創建SelectList時顯示。）

控制器：

public ActionResult Index()
{
    List<Brewery> breweries = new List<Brewery>(_commonProvider.GetBreweryList());
    ViewBag.Breweries = new SelectList(breweries.AsEnumerable(), "BreweryCode", "BreweryDescription");
    return View();
}

風景：

/*** html stuff ***/
<select class="ui-select" id="BrewerySelect" name="BrewerySelect" data-bind="options: GetBreweries,
                                                                             optionsText: BreweryDescription,
                                                                             optionsValue BreweryCode,
                                                                             value: selectedBrewery,
                                                                             optionsCaption: Select a Brewery"></select>

/*** javascript stuff ***/
@section footer {
    @Scripts.Render("~/bundles/viewscripts-js")
    <script type="text/javascript">
        var config = {
            GetBrewery: '@Url.Action("GetBrewery")',
            GetLine: '@Url.Action("GetLine")',
            GetUrl: '@Url.Action("GetUrl")'
        };

        var data = {
            Brewery: "@ViewBag.Breweries",
            Date: '@DateTime.Today.ToString("MM/dd/yyyy")'
        };

        var viewModel = DashboardReportViewModel(config, data);
        ko.applyBindings(viewModel);


    </script>
}

ViewModel

var DashboardReportViewModel = function (config, originalData) {
    var self = this;

    self.GetBreweries = ko.observableArray([originalData.Breweries]);
}

我也嘗試過：

var DashboardReportViewModel = function (config, originalData) {
    var self = this;

    self.GetBreweries = ko.observableArray([]);

    var loadBreweries = function () {
        self.GetBreweries(originalData.Brewery);
    }

    loadBreweries();
}

Answer 1

為了澄清起見，ViewBag將保存一個對象或對象數組，但是當您從視圖中調用該ViewBag屬性時，它將在該屬性上調用ToString 。

所以，

"@ViewBag.Breweries"

與寫作相同

"@ViewBag.Breweries.ToString"

並且，除非您重寫SelectList.ToString() ，否則您將獲得的是完全合格的類名稱。

最好的方法（如您現在所完成的）是將Breweries公開為可檢索的數據（JSON，XML 等 ），並以異步方式檢索此數據，但是您還可以添加一個名為SelectList.ToJson()的擴展方法，該方法返回以這樣一種方式格式化的SelectList的內容，您可以輕松地在視圖的<script>標記中輸出它。

Answer 2

發現發送Viewbag只是導致傳遞了一個字符串之后，我將控制器BreweryList構建移到了一個單獨的ActionResult並使用了ajax來調用它。

變化

視圖：

 <select class="ui-select" id="BrewerySelect" name="BrewerySelect" data-bind="options: GetBreweries,
                                                                              optionsText: 'Text',
                                                                              optionsValue: 'Value',
                                                                              optionsCaption: 'Select a Brewery'"></select>

控制器：

    public ActionResult Index()
    { 
        return View();
    }

    [HttpGet]
    public ActionResult GetBreweries()
    {
        List<Brewery> breweries = new List<Brewery>(_commonProvider.GetBreweryList());
        SelectList breweryList = new SelectList(breweries, "BreweryCode", "BreweryDescription");
        return Json(breweryList, JsonRequestBehavior.AllowGet);
    }

ViewModel：

var DashboardReportViewModel = function (config, originalData) {
    var self = this;

    self.GetBreweries = ko.observableArray([]);    

    var loadBreweries = function () {
        $.ajax({
            url: config.GetBreweries,
            type: "GET",
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            },
            success: function (data) {
                self.GetBreweries(data);
            },
            cache: false
        });
    };
    loadBreweries();

};

沒有其他改變。