在MVC ActionLink中使用Knockout绑定-Java 学习之路

我正在尝试使用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>

（ tables 是一个可观察的数组，因此是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调用来检索数据，但上面的代码也演示了这个问题） .

无论我用 ??? 取代什么，我都无法将 TableId 字段的值插入到href中 .

任何帮助将不胜感激 .

谢谢 .

2 回答

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

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

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

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

淘汰模板定义：（ change to the binding of the href attribute ） .

<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#1"},{"TableId":1002, "TableName":"Table#2"}]'));
    }
}

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

你实际上并不需要 RootValueDictionary 但是我已经把它包括在内以便人们可以看到如何更改请求发送到的控制器 .

回复于 2024-05-15T02:30:09+08:00

Knockout完全绑定在客户端，这是在MVC为您的页面呈现HTML并将其发送回原始浏览器之后 .

如果您希望Knockout模板能够使用在服务器上生成的URL，那么您将必须采用类似于以下内容的一些聪明策略：

CSHTML：

@{
    // create a dummy URL that you can use as a template
    string hrefFormat = Url.Action("Details", "DMUTableCategory", new { id = "{ID}" });
}

<script type="javascript">
    // a global string (but you can put it where ever you need to)
    var _hrefFormat = @Html.Raw(hrefFormat)
<script>

JS：

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


    // loop through the 'tables' and add a new 'href' property to each for binding
    ko.utils.arrayForEach(self.tables(), function(table){
         table.href = _hrefFormat.replace("{ID}", table.TableId);
    });
}

你的KO Tmpl，你将每个表对象的'href'属性绑定到 a 标记的href属性：

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td><a data-bind="attr: { 'href': href }">Details</a></td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>

回复于 2024-05-15T02:30:09+08:00

在MVC ActionLink中使用Knockout绑定

2 回答

相关问题