asp.net-mvc – 在MVC ActionLink中使用Knockout绑定

发布时间：2020-12-15 20:28:35 所属栏目：asp.Net 来源：网络整理

导读：我正在尝试使用KnockoutJS和MVC 4,以便在表的第一列中显示包含ActionLink定义的表.显示数据本身非常简单,我在那里没有任何问题.我遇到的问题是ActionLink的生成. 我已经看了Use MVC helpers inside jquery.tmpl templates,但是那里的解决方案没有使用淘汰模

我正在尝试使用KnockoutJS和MVC 4,以便在表的第一列中显示包含ActionLink定义的表.显示数据本身非常简单,我在那里没有任何问题.我遇到的问题是ActionLink的生成.

我已经看了Use MVC helpers inside jquery.tmpl templates,但是那里的解决方案没有使用淘汰模板并且将Url插入到模型对象中是不可行的(用于创建视图模型的app域模型对象将在整个应用程序中广泛使用).

表定义：

<table>
    <tbody data-bind="template: { name: 'dmuTableDetail',foreach: tables() }"></tbody>
</table>

(表是一个可观察的数组,因此是parens).

淘汰赛模板定义：

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td>@Html.ActionLink("Details","Details","DMUTableCategory",new { @Id = ??? } )</td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>?

视图模型定义：

var PageViewModel = function () {
    self = this;

    self.tables = ko.observableArray([]);

    self.readItems = function () {
        self.tables(jQuery.parseJSON('[{"TableId":1001,"TableName":"Table#1"},{"TableId":1002,"TableName":"Table#2"}]'));
    }
}

$(document).ready(function () {
    vm = new PageViewModel();
    self.readItems('');
    ko.applyBindings(vm);
});

(实际代码执行Ajax调用来检索数据,但上面的代码也演示了这个问题).

无论我更换什么??? with,我无法获取要插入href的TableId字段的值.

任何帮助将不胜感激.

谢谢.

解决方法

谢谢Eric,你让我想到了一个锚元素并绑定了href属性.

似乎答案比预期的要容易一些(通常是！).

表定义:(与原始问题相同)

<table>
    <tbody data-bind="template: { name: 'dmuTableDetail',foreach: tables() }"></tbody>
</table>

淘汰模板定义:(更改为href属性的绑定).

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td><a data-bind="attr: { 'href': '@Url.Action("Details",new RouteValueDictionary() { { "Controller","DMUTableCategory" } } )/' + TableId }">Details</a></td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>?

视图模型定义:(与原始问题相同)

var PageViewModel = function () {
    self = this;

    self.tables = ko.observableArray([]);

    self.readItems = function () {
        self.tables(jQuery.parseJSON('[{"TableId":1001,"TableName":"Table#2"}]'));
    }
}

$(document).ready(function () {
    vm = new PageViewModel();
    self.readItems('');
    ko.applyBindings(vm);
});

你实际上并不需要RootValueDictionary但我已经包含它,所以人们可以看到如何更改发送请求的控制器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!