使用带有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();

};

没有其他改变。