Question

我正在尝试在jquery / javascript中执行以下操作，但是遇到了Url.Action位的问题。

通过我的模型的IEnumerable进行交互的旧样式

>     > <div class="listview small" id="results"> @foreach (var item in Model)
>     > {   <a href="#" class="list shadow">   <div class="list-content">  
>     > <img src="@Url.Action("GetPhotoThumbnail", new { sname =
>     > item.SamAccountName, width = 75, height = 75 })" alt="meek"
>     > class="icon" />   <div class="data">   <span
>     > class="list-title">@item.DisplayName</span>   <span
>     > class="list-subtitle">Information Technology Dept</span>   <span
>     > class="list-remark">Don't smack the pony!</span>   </div>   </div>  
>     > </a>}   </div>

我现在通过jquery / ajax获取结果以获取自动完成输入数据的新想法。

$personsLists.prepend('<li><a href="' + url + '" class="list shadow">'
 + '<div class="list-content">'
 + '<img class="icon" alt="' + displayname + '" src="@Url.Action("GetPhotoThumbnail", new { sname = samaccountname, width = 75, height = 75 })">'
 + '<div class="data">'
 + '<span class="list-title">' + url + '</span>'
 + '<span class="list-subtitle">Information Technology Dept</span>'
 + '<span class="list-remark">Don\'t smack the pony!</span>'
 + '</div></a></li>');

问题在于理解@ Url.Action如何在DOM上真正起作用。有人可以指出我正确的方向。

[编辑] 我想我不能这样做，因为我正在尝试执行服务器端代码，同时处理html以加载DOM。这个Url.Action的重点是加载该人的缩略图。接下来的道路是在数据加载时通过另一个函数来操作GetPhotoThumbnail吗？

[编辑] 所以我采取了这种方法。在我正在构建img标签的行上，我正在调用一个名为getThumbnail的函数。

+ '<img class="icon" alt="' + displayname + '" src="data:image/png;base64,' + getThumbnail(samaccountname) + '">'

function getThumbnail(query) {
            if (query.length > 0) {
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("GetThumb", "Person")',
                    data: { sname: query, width: 75, height: 75 },
                    contentType: "image/png",
                    success: function (data) {
                        if (data != "")
                            $('#tempimg').html(
                            $('<img/>', {
                                src: data,
                                alt: 'this is a super chart'
                            })
                        );
                    },
                    error: function (error, txtStatus) {
                        console.log(txtStatus);
                        console.log('error');
                    }
                });
            }
        }

这导致我现在头疼，因为（数据）没有正确返回？！？控制器通过FileContentResult，所以我猜。

由于

Answer 1

您可能需要创建一个客户端代码可以重用的URL模板。类似的东西：

在您看来：

<script language="javascript">
  var thumbnailTemplate = "@Url.Action("GetPhotoThumbnail", new { sname = "_sname_", width = 75, height = 75 })";
  function getThumbnail(name) {
     return thumbnailTemplate.replace("_sname_", name);
  }
</script>

请注意URI编码 - 如果名称中包含URI保留字符，则需要将其转义。

Answer 2

最终解决了这个问题。完整代码enter link description here。

基本上在控制器中设置图像以返回字节数组的Json，然后从返回的json str中设置一个变量。

function a(){
  var r = {
    placeholder: null,
    img : null,
    image: function { my ajax call -> r.img = jsonresult },
    imageThumbnail: function () {
       r.image();
       r.placeholder = "<img class='p-icon' id='pid' src='data:image/png;base64," + r.img + "' />"
      }      
    }

   return r;
 }

使用上面类似的代码，我能够将[r]推到我选择的div，即$（'＃mydiv'）。append（r）

无论如何，请查看链接以获取更多详细信息。我已将此发布到代码审查中以获取想法和评论。

Url.Action内置于jquery

2 个答案: