Question

我正在使用ASP.Net MVC 3构建应用程序，其中一个视图有三个按需加载的DropDownLists（国家，州和城市）。 Create视图没问题，但我不知道如何创建Edit视图，因为数据库表只存储CityId。

我的数据库具有以下结构：

CountriesTable = {CountryID, CountryName}
StatesTable = {StateID, StateName, Abbreviation, CountryID}
CitiesTable = {CityID, CityName, StateID}

当用户打开编辑视图时，我需要获取之前选择的CityID来查找StateID，这将帮助我找到CountryID。这必须指导三个DropDowns的负载。

CountriesDropDown =将加载所有国家/地区并选择具有所选城市的CountryID的国家/地区 StatesDropDown =将加载所选国家/地区的所有州 CitiesDropDown =将加载所选州的所有城市

谢谢

Answer 1

我不是100％确定我正确理解你的问题，但我会试一试：）

你写的是：

CountriesDropDown =将加载所有国家/地区......

基于此，当您初始化knockoutJS视图模型时，您可以初始化observable array，其中包含代表国家/地区列表的下拉/ select元素的可能值。

为此，您可以发出AJAX请求以获取填充下拉列表所需的数据，例如：

// Get all countries
$.getJSON("/GetAllCountries", function(data) { 
    // Add the new data to the observable array holding the list of countries
});

最好在viewmodel中使用observable arrays进行数据表示，并在视图中使用options bindings（可观察数组对数组进行任何更改会立即影响UI）。

然后，你可以有三个observable来分别代表三个下拉列表中的每一个的选定值 - 例如：

self.selectedCountry = ko.observable();
self.selectedState = ko.observable();
self.selectedCity = ko.observable();

（请记住，options绑定允许您指定哪个“字段”应包含使用value参数选择的值。）

继续你之前的引述：

CountriesDropDown =将加载所有国家并选择具有所选城市的CountryID的国家

要完成此操作，您可以发出一个AJAX请求，询问Web服务器给定城市对应的国家/地区。使用该结果，您可以使用如下所示的挖空更改国家/地区下拉列表的选定值：

self.selectedCountry(theCountryToBeSelected);

然后你写：

StatesDropDown =将加载所选国家/地区的所有州

为了实现这一目标，您可以利用knockout能够订阅可观察量的变化，并且当所选国家/地区发生变化时，您可以更改州下拉列表的内容 - 例如像这样：

self.selectedCountry.subscribe(function(newSelectedCountry) {
    // Get all states based on the new selected country
    $.getJSON("/GetStatesForCountry/" + newSelectedCountry.id, function(data) { 
        // Add the new data to the observable array holding the list of states
    });
});

最后，你写道：

CitiesDropDown =将加载所选州的所有城市

要实现此目的，您可以应用与上述相同的原则：根据所选状态的ID发出AJAX请求，并使用从服务器返回的数据填充表示城市列表的可观察数组。

如果这不是你想要的，我希望我至少能够激励你或指出你正确的方向：）

在编辑db持久行时，使用knockout加载级联下拉列表

1 个答案: