Question

我有这个视图循环集合，这样，使用KO，它可以做非常基本的分页。现在，该表的最后一列只是每行记录的一堆操作。如果这是简单的MVC生成表，它们将在生成的URL中携带正确的Id。

不再。

@using Newtonsoft.Json
@model IEnumerable<SensorSauce.Models.Business>

@{
    ViewBag.Title = "Business Manager";
}

<h2>Business Manager</h2>

<table class="table table-striped table-bordered">

    <thead>
    <tr>
        <td><strong>@Html.DisplayNameFor(model => model.Name)</strong></td>
        <td><strong>@Html.DisplayNameFor(model => model.ServiceType)</strong></td>
        <td><strong>@Html.DisplayNameFor(model => model.Specialties)</strong></td>
        <td><strong>Actions</strong></td>
    </tr>
    </thead>

    <tbody data-bind="foreach:currentBusinesses">
    <tr>
        <td data-bind="text:Name"></td>
        <td data-bind="text:ServiceType"></td>
        <td data-bind="text:Specialties"></td>
        <td >
            <a href="@Url.Action("MapLocation", "Business")" class="glyphicon glyphicon-map-marker"></a> |
            <a href="@Url.Action("Edit", "Business")" class="glyphicon glyphicon-edit"></a> |
            <a href="@Url.Action("Details", "Business")" class="glyphicon glyphicon-search"></a> |
            <a href="@Url.Action("Delete", "Business")" class="glyphicon glyphicon-remove-sign"></a>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td colspan="4">
            &nbsp;<span data-bind="click:previousPage,visible:currentPage() > 1" class="glyphicon glyphicon-circle-arrow-left" style="cursor: pointer"></span>&nbsp;
            Page #: <span data-bind="text:currentPage"></span>&nbsp;
            &nbsp;<span data-bind="click:nextPage,visible:currentPage() < lastPage" class="glyphicon glyphicon-circle-arrow-right" style="cursor: pointer"></span>
        </td>
    </tr>
    <tr>
        <td >
            <a href="@Url.Action("Create", "Business")" class="btn btn-primary btn-sm btn-block"><span class="glyphicon glyphicon-plus-sign"></span> Create Business</a>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    </tfoot>

</table>

这是上表后面的脚本：

<script src="~/Scripts/knockout-3.3.0.js"></script>
<script>

    function BusinessViewModel() {
        var self = this;

        // properties
        self.businesses = @Html.Raw( JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));
        self.pageSize = 10;
        self.currentPage = ko.observable(1);
        self.lastPage = Math.ceil(self.businesses.length / self.pageSize);
        self.currentBusinesses = ko.computed(function() {
            var startIndex = (self.currentPage() - 1) * self.pageSize;
            var endIndex = startIndex + self.pageSize;

            return self.businesses.slice(startIndex, endIndex);
        });

        // methods
        self.nextPage = function() {
            self.currentPage(self.currentPage() + 1);
        };

        self.previousPage = function() {
            self.currentPage(self.currentPage() - 1);
        };
    }

    ko.applyBindings(new BusinessViewModel());
</script>

编辑，删除和详细信息等操作需要将参数传递给控制器的操作。像上面那样渲染表会产生一个问题，即Details等操作永远不会收到ID参数。

我需要将某些东西绑定到Model的Id属性，并将其与Url.Action（）方法生成的Url结合起来。或者我明白了。

有什么建议吗？

Answer 1

您可以使用attr绑定并将URL.Action生成的URL与businessId（我假设您正在调用业务模型的ID）结合起来，就像下面的示例一样......

<a data-bind="attr: { href: '@Url.Action("MapLocation", "Business")'+'?BusinessId='+BusinessId()" class="glyphicon glyphicon-map-marker"></a>

使用KO访问HTML元素内的绑定值

1 个答案: