Url.Action 내장 jquery

jquery/javascript에서 다음 작업을 수행하려고하지만 Url.Action 비트에 문제가 있습니다. 나는 JQuery와/아약스를 통해 이제 결과를 얻고 어디에 데이터가 내 모델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

올드 스타일 자동 완성 입력 돌아왔다.

$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에서 어떻게 작동하는지 이해하는 것입니다. 누군가 나를 올바른 방향으로 향하게 할 수 있습니까?

[편집] 나는 내가 DOM에로드 할 수있는 HTML을 처리하는 동안 서버 측 코드를 실행하기 위해 노력하고있어 나는이 작업을 수행 할 수없는 것 같아요. 이 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를 통과합니다.

감사

출처

2014-02-14 Scott White

정말 혼란 스럽네요. 이미지를 가져 오기 위해 Ajax 요청을 사용하고 있습니다. 즉, 반환 된 이진 데이터입니다. 그런 다음 그것을'src' 속성으로 설정합니다. 결코 작동하지 않을 것입니다. –

그래, 그 생각. 솔직히 말해서 나는 내 깊이에서 어리 석다. 달성해야 할 목표는 컨트롤러에서 가져온 데이터가 개인 데이터 (예 : 사진 및 이름) 인 자동 완성입니다. img를 소개 할 때까지 훌륭하게 작동합니다. $ personsLists.prepend는 다시 가져온 데이터가로드 할 div 배열을 다시 빌드하는 곳입니다. 그래서 당신이 입력 할 때 html 즉시 변경됩니다. –

결국 해결했습니다. 전체 코드 enter link description here.

기본적으로 컨트롤러의 이미지를 설정하여 바이트 배열의 Json을 반환 한 다음 return json str에서 변수를 설정합니다. 내 즉 $ ('#의 mydiv')을 선택하는 사업부로 [R]을 눌러 할 수 있었다 위의 유사한 코드를 사용

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)

은 어쨌든 더에 대한 링크를 체크 아웃 세부. 생각과 의견을 위해 코드 검토에 게시했습니다.

출처

2014-03-18 13:27:32

당신은 아마 당신의 클라이언트 측 코드는 재사용 할 수있는 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-예약 문자를 포함 할 것이라는 점을 기회가 있다면, 당신이 그들을 탈출해야합니다.

출처

2014-02-14 12:06:51

Url.Action 내장 jquery

답변

관련 문제