MVC3 ActionLink 有/没有图像差异

Question

我浏览了不同的帖子，找到了一个扩展来创建一个操作链接助手，它将添加一个图像作为链接，如下所示。

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());
} 

它生成了我“认为我需要”的正确 HTML，但是当我运行它时出现错误，“对象不支持此属性或方法”。然而，当我只使用 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？您可以使用 data() 函数代替 attr() 函数来简化代码。

评论后更新

我的错！我没有意识到：在对话框内部时， $(this) 不再引用 .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);