Question

我从动作链接调用控制器/动作，以在引导模式对话框中的局部视图中显示结果。所有这些都按预期工作，直到用户请求操作链接不是文本而是图像。

我认为最好的解决方案是创建一个actionlinkimage扩展帮助程序，它基于Basheer发布的一个问题Html.ActionLink as a button or an image, not a link的解决方案，它的工作非常出色：

 public static class ActionImageHelper
    {

        public static IHtmlString ImageActionLink(this HtmlHelper htmlHelper, string linkText, string action, string controller, object routeValues, object htmlAttributes, string imageSrc)
        {
            var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
            var img = new TagBuilder("img");
            img.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
            var anchor = new TagBuilder("a") { InnerHtml = img.ToString(TagRenderMode.SelfClosing) };
            anchor.Attributes["href"] = urlHelper.Action(action, controller, routeValues);
            anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));
            return MvcHtmlString.Create(anchor.ToString());

        }

    }

然而，将标准的@HtmlAction链接切换到此扩展帮助程序我现在无法访问javascript中链接的text属性，因此当我尝试提取文本以显示为我的对话框标题时，它显示为空白，请参阅此处的javascript：

<script type="text/javascript">

    $(document).ready(function () {
        $("body").on("click", "a.dialog-window", null, function (e) {

            e.preventDefault();

            var $link = $(this);        
            var title = $link.text();   //***Using the text prop for the title 
            $('#myModal .modal-title').html(title);

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#myModal').modal('show');
            }
            else {

                $.get(url, function (data) {
                    $('#myModal .te').html(data);
                    $('#myModal').modal();
                });

            }

        });
    });

</script>

正如您在第6行所见，我试图从链接中获取文本。现在又回来了。我试图在扩展方法中添加text属性，但没有运气。任何帮助将不胜感激。

是： jquery3.1.1 Bootstrap v3.3.7 .NET 4.5

Answer 1

我最后通过将Extension帮助器更改为以下内容来实现此功能：

   public static class ActionImageHelper
{

    public static IHtmlString ImageActionLink(this HtmlHelper htmlHelper, string dialogTitle, string linkText, string action,
        string controller, object routeValues, object htmlAttributes, string imageSrc)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var img = new TagBuilder("img");
        img.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
        TagBuilder builder = new TagBuilder("a") { InnerHtml = img.ToString(TagRenderMode.SelfClosing) };
        builder.Attributes["href"] = urlHelper.Action(action, controller, routeValues);
        builder.Attributes["title"] = dialogTitle;
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        return MvcHtmlString.Create(builder.ToString());

    }

}

我添加了一个额外的参数 dialogTitle ，我在其中传递标题，然后在扩展方法中设置标题属性来设置标题。

并更改了javascript函数，然后从该属性中读取：

<script type="text/javascript">

    $(document).ready(function () {
        $("body").on("click", "a.dialog-window", null, function (e) {

            e.preventDefault();
            var $link = $(this);
            //var title = $link.text();   // Using the text prop for the title
            var title = $(this).attr('title') //Now use the title attribute 
            $('#myModal .modal-title').html(title);

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#myModal').modal('show');
            }
            else {

                $.get(url, function (data) {
                    $('#myModal .contents').html(data);
                    $('#myModal').modal();
                });

            }

        });
    });

</script>

也许这不是最优雅的解决方案，也许有人有更好的解决方案，但至少它意味着扩展menthod和javascript可重复使用和通用（即没有硬编码标题）并且在调用时控制标题ImageActionLink控件。

以下是我调用ImageActionLink的方法：

  @Html.ImageActionLink("Edit Client:", "Edit", "Edit", "Client", new { id = item.i_client_id },
               new
               {

                   @class = "dialog-window",
               }, "~/Content/images/icons/open-icon-green-16.png")

行动链接扩展方法MVC4

1 个答案: