2012-01-04 4 views
0

다른 게시물을 살펴본 후 확장 프로그램에서 이미지 링크를 추가하는 Action Link Helper를 만들었습니다. 나는, '오지 않아요가이 속성 또는 메서드를 지원 객체'그러나 나는 그것을 실행할 때 오류가 발생하는 "나는 필요가 있다고 생각"적절한 HTML을 생성MVC3 ActionLink 이미지의 유무에 관계없이

public static MvcHtmlString ImageLink(this HtmlHelper helper, string actioNName, string imgUrl, string alt, object routeValues, object linkHtmlAttributes, object imageHtmlAttributes) 
    { 
     var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); 
     var url = urlHelper.Action(actioNName, routeValues); 

    //Create the link 
    var linkTagBuilder = new TagBuilder("a"); 
    linkTagBuilder.MergeAttribute("href", url); 
    linkTagBuilder.MergeAttributes(new RouteValueDictionary(linkHtmlAttributes)); 

    //Create image 
    var imageTagBuilder = new TagBuilder("img"); 
    imageTagBuilder.MergeAttribute("src", urlHelper.Content(imgUrl)); 
    imageTagBuilder.MergeAttribute("alt", urlHelper.Content(alt)); 
    imageTagBuilder.MergeAttributes(new RouteValueDictionary(imageHtmlAttributes)); 

    //Add image to link 
    linkTagBuilder.InnerHtml = imageTagBuilder.ToString(TagRenderMode.SelfClosing); 

    //return linkTagBuilder.ToString(); 
    return MvcHtmlString.Create(linkTagBuilder.ToString()); 
} 

. 그러나 MVC HtmlAction Link를 사용하면 기본적으로 동일한 작업이 수행됩니다. 나는이 문제가 중첩 된 것으로 생각하고 대화 상자를 시작하기 위해 jQuery 코드를 변경해야한다고 생각한다. 여기에 대한 코드가 있습니다.

<script type="text/javascript"> 

    $.ajaxSetup({ cache: false }); 

    $(document).ready(function() { 
     $(".openDialog").live("click", function (e) { 
      e.preventDefault(); 

      $("<div></div>") 
        .addClass("dialog") 
        .attr("id", $(this).attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         title: $(this).attr("data-dialog-title"), 
         close: function() { $(this).remove() }, 
         modal: true 
        }) 
        .load(this.href); 
     }); 

     $(".close").live("click", function (e) { 
      e.preventDefault(); 
      $(this).closest(".dialog").dialog("close"); 
     }); 
    }); 
</script> 

이것은 이미지와 함께 생성되는 HTML입니다. 하나는 작동하지 않습니다.

//Without the Image and it works fine 
     <a class="openDialog" data-dialog-id="emailDialog" data-dialog-title="Contact Us" href="/Home/ContactUs">Contact Us</a> 

//With the Image that produces an Error 
       <a class="openDialog" data_dialog_id="emailDialog" data_dialog_title="Contact Us" href="/Home/ContactUs"><img alt="Contact us" src="Content/images/common_en/subnavi_contact.png" /></a> 

어떤 도움을 주시면 감사하겠습니다. 미리 감사드립니다.

+0

어디서 오류가 있습니까? jquery 또는 도우미에서? 디버그 했니? –

+0

실제로 jQuery 호출에서 오류가 발생합니다. .AppendTo ("body")는 "이 메소드 또는 속성을 지원하지 않습니다."라는 메시지를 생성합니다. 작동하는 버전과 나던과 캔트 사이의 차이점을 찾는 것처럼 보입니다. –

+0

전체 오류를 표시 할 수 있습니까? –

답변

0

이이 오류가 appendTo 라인에 무슨 일이 일어나고 있는지 확인하십시오 : 또한

var newDiv = $("<div></div>"); 
newDiv.addClass("dialog"); 
newDiv.attr("id", $(this).data("dialog-id")); 
newDiv.appendTo($('body')); // is error really here? 
newDiv.dialog({ 
    title: $(this).data("dialog-title"), 
    close: function() { $(this).remove() }, 
    modal: true 
}).load(this.href); 

, 당신은 jQuery를 어떤 버전을 사용하고 있습니까? attr() 함수 대신에 data() 함수를 사용하여 코드를 조금 줄여서 사용할 수 있습니다.

업데이트 코멘트 후

내 나쁜! 나는 깨닫지 못했다. 대화의 내부에서 $ (더 이상)는 .openDialog 링크를 참조하지 않는다. 대신 다음을 시도하십시오.

var newDiv = $("<div></div>"); 
newDiv.addClass("dialog"); 
newDiv.attr("id", $(this).data("dialog-id")); 
newDiv.appendTo($('body')); // is error really here? 
var anchor = $(this); 
newDiv.dialog({ 
    title: anchor.data("dialog-title"), 
    close: function() { $(this).remove() }, 
    modal: true 
}).load(this.href); 
+0

이 버전은 정상적으로 작동합니다. 대화방 제목이 더 이상 이미지 버전과 함께 나타나지 않지만 텍스트 링크 버전은 여전히 ​​제목을 표시합니다. 거기에 도착하면 도와 줘서 고마워. 제목에 대한 아이디어가 나오나요? –

+0

나는 아직도 대화 상자에 제목을 가져 오지 않은 업데이트 된 버전을 시도했다. 감시 창을 통해 데이터를 함수로 표시하고 anchor.data ("dialog-title")는 정의되지 않은 값을 반환합니다. –

+0

그러면 앵커는 다음과 같이 표시되어야합니다. ' danludwig

관련 문제