使用 KODataTable MVC 在表中选择项目时触发控制器操作

Question

我通过 AJAX 调用调用 Action（返回 Json 中的列表）在表格中呈现数据。

输出： http://imageshack.com/a/img673/3484/zxZIqy.png

我想做的是让每个用户（表中的行）可链接到编辑页面（Admin/Edit/Id）。只需单击它们，或者在每行末尾都有一个编辑链接。 我不知道如何实现这一点。使用普通的剃刀语法会很容易。但是这个模板很适合用来实现这种动态数据表。

我正在使用一个名为 KODataTable 的模板来制作具有搜索和排序功能的表格。

查看..

<div id="kodt">
    <div>
        <input type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown'" />
        <select data-bind="value: selectedColumn, options: columns"></select>
        <button data-bind="click: search">Search</button>
    </div>
    <div>
        <table class="table table-striped table-hover">
            <thead>
                <tr data-bind="foreach: columns">
                    <th data-bind="text: $data, click: function() { $parent.sort($index()) }" style="cursor: pointer"></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: currentRows">
                <tr data-bind="foreach: $parent.columns, click: function () { $root.selectRow($data); }, css: { 'success': $root.selectedRow() == $data }">
                    <td data-bind="text: $parent[$data]" style="cursor: pointer; text-align: center"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <button data-bind="click: firstPage">First</button>
        <button data-bind="click: prevPage">Prev</button>
        Page <span data-bind="text: currentPage() + 1"></span> of <span data-bind="text: pageCount"></span>
        <button data-bind="click: nextPage">Next</button>
        <button data-bind="click: lastPage">Last</button>
    </div>
</div>

脚本..

<script>
    var users = new Object();
    $.getJSON("/Admin/GetUsers", function (data) {
        users = data;
        var TableDataVM = new KODataTable({
            columns: ["Id", "Username", "RoleId", "CompanyId", ""],
            rows: users,
        });
        ko.applyBindings(TableDataVM, document.getElementById("kodt"));
    });
</script>

Answer 1

现在，看起来当用户单击一行时，$root.selectRow($data); 被调用，它将行对象的数据传递给 ViewModel 中名为 selectRow() 的某个函数。如果这个函数存在，你可以在这个函数中将$.post行（代表user对象）传给MVC控制器，并使用响应重定向到Edit视图。

var vm = function() {
    var self = this;
    var selectRow = function(rowClicked) {

        var data = {
           Id = rowClicked.Id,
           Username = rowCicked.Username,
           // etc.
        };

        // post the data to some MVC controller - something remotely like this
        $.ajax({
            url: '/Admin/Edit/' + rowClicked.Id,
            data: ko.toJSON(data),
            type: 'POST',
            success: function (result) {
                window.location.href = result.url;
            }
        });
    };
};