MVC3 ActionLink с / без различий в изображениях - PullRequest
Новая
       7

MVC3 ActionLink с / без различий в изображениях

0 голосов
/ 04 января 2012

Я просмотрел различные посты и нашел расширение для создания помощника по ссылкам действий, который добавит изображение в виде ссылки следующим образом. 

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>

Любая помощь будет оценена. Заранее спасибо.

1 Ответ

0 голосов
/ 04 января 2012

Попробуйте, убедитесь, что в строке 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);
...