javascript - 使用 KODataTable MVC 选择表中的项目时触发 Controller 操作

Question

我通过 AJAX 调用调用一个 Action(在 Json 中返回一个列表)来呈现表格中的数据。

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

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

我正在使用一个名为 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 中的某个函数，称为 选择行()。如果这个函数存在，你可以在这个函数中使用它来$.post行(代表user对象)到MVC Controller ，并使用响应重定向到编辑 View 。

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;
            }
        });
    };
};