How do I pass an ID from View to the ViewModel as a parameter for GET function?

Question

I'm creating a project using MVC, knockoutJS, Web API, Bootstrap and so forth, the database in use is MSSQL Server 2012. It's all working very well, the controllers have properly created CRUD operations. The data from DB is show in a grid table in the UI, and every row is clickable, and opens up a modal in which the data about that exact element is shown. The problem I'm experiencing is the inability to pass a certain value of the row, in this case an ID, to ViewModel as a parameter for getting a single result in modal. I can do it manually, and put some value in the ViewModel, and the data will show, but I'm unable to send the value from the View.

Here's the code for 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;
}

Here's the code for the 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 parameter is for the GetRegion method in Controller.

This is the code for the View in which shows the data for a certain element:

<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>

Any help would be appreciated!

Answer 1

Knockout adds the current bound object as first argument when it calls the event handler. The second argument is the event object.

So the only thing you need to do is add a parameter to the viewRegion function.

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

I hope it helps.