2014-02-14 61 views
0

我想在jquery/javascript中做以下事情,但得到Url.Action位的問題。Url.Action內置於jquery

它通過我的模型

>  > <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> 

的IEnumerable interates新的想法,我通過我的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。

感謝

+0

這真的讓你想要做的事變得困惑。你正在使用ajax請求來獲取圖像 - 這是返回的二進制數據,對吧?然後你將它設置爲你的'src'屬性 - 永遠不會工作。 –

+0

是的,我認爲蒂姆。如果說誠實,我就會因爲這個愚蠢而失去我的深度。要實現的目標是自動完成,其中從控制器返回的數據是個人數據(即照片和名稱)。在我介紹img之前,我的作品非常精彩。 $ personsLists.prepend是數據帶回的位置,重建要加載的div數組。所以當你輸入html時,它會立即改變。 –

回答

0

最終解決了這個問題。完整代碼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]我的選擇,即$(「#mydiv」)的股利。追加(R)

反正檢查出的鏈接瞭解更多細節。我已經發布了這個代碼審查的想法和意見。

0

你可能需要創建您的客戶端代碼可以重用一個網址模板。喜歡的東西:

在你看來:

<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保留字符,你需要躲避他們的。