MVC3 ActionLink画像の有無にかかわらず

Question

私は別の投稿を見て、次のように画像をリンクとして追加するAction Link Helperを作成する拡張機能を見つけました。

「オブジェクトはこのプロパティまたはメソッドをサポートしていますdoesntの」、私は「私は必要だと思う」しかし、私はそれを実行すると、私はエラーを取得する適切なHTMLを生成

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> 

助けていただければ幸いです。前もって感謝します。

Answer 1

が、これは、エラーが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);