asp.net-mvc - 如何将 ID 作为 GET 函数的参数从 View 传递到 ViewModel？

Question

我正在使用 MVC、knockoutJS、Web API、Bootstrap 等创建一个项目，使用的数据库是 MSSQL Server 2012。一切运行良好， Controller 已正确创建 CRUD 操作。来自数据库的数据显示在 UI 中的网格表中，每一行都可以单击，并打开一个模式，其中显示有关该确切元素的数据。我遇到的问题是无法将行的特定值(在本例中为 ID)传递给 ViewModel 作为参数以获取模式中的单个结果。我可以手动执行此操作，并在 ViewModel 中放入一些值，数据将显示，但我无法从 View 发送值。

这是 ViewModel 的代码:

 var regionsModel = {
    regionId: ko.observable(),
    companyId: ko.observable(),
    name: ko.observable(),
    companyName: ko.observable()    
};

var regionsListModel = {
    regions: ko.observable()
};

function getRegions() {
    get(apiUrl + "Regions/GetRegions", {}, function (data) {
        regionsListModel.regions(data);
    });
}

function getRegion() {
    get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) {
        regionsModel.regionId(data.RegionID);
        regionsModel.companyName(data.CompanyName);
        regionsModel.companyId(data.CompanyID);
        regionsModel.name(data.Name);
    });
}

function viewRegion() {
    $("#ViewRegionModal").modal('show');
    //regionsModel.regionId($('#ViewRegion').val());
    getRegion();
    return false;
}

这是 View 的代码:

<table class="table table-striped table-bordered responsive" id="dtable">
                            <thead>
                                <tr>
                                    <th style="width: 20px;">ID</th>
                                    <th>Region Name</th>
                                    <th>Company Name</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: regionsListModel.regions">
                                <tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID">
                                    <td data-bind="text: RegionID"></td>
                                    <td data-bind="text: Name"></td>
                                    <td data-bind="text: CompanyName"></td>
                                </tr>
                            </tbody>
                        </table>

aiId参数用于Controller中的GetRegion方法。

这是 View 的代码，其中显示特定元素的数据:

<table class="table table-striped" data-bind="with: regionsModel">
        <tbody>
            <tr>
                <th>Region ID:</th>
                <td><span data-bind="text: regionsModel.regionId"></span></td>
            </tr>
            <tr>
                <th>Region Name:</th>
                <td><span data-bind="text: regionsModel.name"></span></td>
            </tr>
            <tr>
                <th>Company Name:</th>
                <td><span data-bind="text: regionsModel.companyName"></span></td>
            </tr>
        </tbody>
    </table>

如有任何帮助，我们将不胜感激!

Answer 1

Knockout 在调用事件处理程序时将当前绑定(bind)对象添加为第一个参数。第二个参数是事件对象。

因此，您唯一需要做的就是向 viewRegion 函数添加一个参数。

function viewRegion(region) {
    var regionID = region.RegionID;
    // get data
    return false;
}

希望对您有所帮助。