Question

在这个项目中，我们的一位程序员编写了这段代码。

.
.
.
<script type="text/javascript">
 $(document).ready(function () {
     var dataSource = new kendo.data.DataSource({
         schema: {
             data: "Data",
             total: "Total"
         },
         transport: {
             read: {
                 url: '@Url.Action("List", "Customer")',
                 dataType: "json",
                 type: "POST"
             }
         },
         pageSize: 10,
         serverPaging: true,
         serverFiltering: true,
         serverSorting: true
     });
     $("#listView").kendoListView({
         dataSource: dataSource,
         pageable: true,
         template: kendo.template($("#customerTemplate").html())
     });
     $(".pager").kendoPager({
         dataSource: dataSource
     });
 });

<script type="text/x-kendo-tmpl" id="customerTemplate">
<article>
    **<h3>${CustomerNumber} <a href="Customer/Details/${CustomerNumber}">${FullName}</a></h3>
    ***<h3>${CustomerNumber} @Html.ActionLink(${CustomerNumber}, "Details", "Customer", new {id=${CustomerNumber}}, null)</h3>
    <div class="details">
        <span class="phone" itemprop="telephone"><a href="tel:${Phone}">${Phone}</a></span>
        <span class="email">${Email}</span>
    </div>
    <div class="clearfix"></div>
</article>

如果你看一下两颗星的位置，那就是原始代码。我现在的任务是将那些代码翻译成一个工作代码，就像三颗星一样。但是，无论我如何尝试，我都无法从jquery事物（$ {CustomerNumber}，$ {FullName}）获取值并进入actionlink。我几乎听不懂这个（新手，MVC只有三个月），所以如果可以的话，请尽量保持简单。

我实际上试图将此代码放在article标签所在的位置，并将其称为@fullname无效。

@string fullname = ${FullName}

我试图搜索SO和Google，但说实话，我甚至不知道如何提出这个问题。这与jquery或kendo有关吗？甚至有可能实现我想要的目标吗？问候，S

Answer 1

缺点是你无法做你想做的事。要记住的一件事是在视图中编写的所有代码都在服务器上处理。

您正在使用在客户端上处理的javascript。它没有显示的原因是你的模板不知道@Html.ActionLink(${CustomerNumber}, "Details", "Customer", new {id=${CustomerNumber}}, null)是什么。所以你有点不匹配。

我要提出的问题是，如果这是有效的，你为什么要改变呢？

根据评论更新

我会建议这个

<script type="text/javascript">

$(document).ready(function () {

    var url = @Html.Action("Details", "Customer");

    ...
});

然后在你的模板中

<h3>${CustomerNumber} <a href="url + '/' + ${CustomerNumber}">${FullName}</a></h3>

Answer 2

Razor代码呈现在服务器端，因此一旦页面加载，任何通过JavaScript提取的新剃刀代码将无法正确呈现。

有很多方法可以解决这个问题，一种方法是从服务器中提取模板，这样你就可以在视图出现之前预先渲染视图，然后让Kendo进行映射。

但是，如果你想把它全部保留在客户端，你可以有一个JS辅助方法，它在页面加载期间呈现，你可以在其中运行剃刀代码，例如。

<script type="text/javascript">

    $(document).ready(function () {

        function getCustomerUrl(linkText, customerNumber) {
            var urlTemplate = '@Html.ActionLink("linkText", "Details", "Customer", new { id="customerNumber" }, null)';
            return urlTemplate.replace('linkText', linkText).replace('customerNumber', customerNumber);
        }

        ...
    });
</script>

然后在你的模板中简单地用相关参数调用该方法，即

<script type="text/x-kendo-tmpl" id="customerTemplate">
<article>
    <h3>#= getCustomerUrl(FullName, CustomerNumber) #</h3>
    <div class="details">
        <span class="phone" itemprop="telephone"><a href="tel:${Phone}">${Phone}</a></span>
        <span class="email">${Email}</span>
    </div>
<div class="clearfix"></div>

从$ {xxx}获取价值到actionlink

2 个答案: