Question

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

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链接创建基本相同的东西它确实有效。我认为问题是它嵌套的事实，我将不得不改变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);

MVC3 ActionLink带/不带图像差异

1 个答案: