Link Text attribute not available in javascript from Action Link extension method MVC4

Question

I am calling a controller/action from an action link to display the results in a partial view within bootstrap modal dialog. All is working as expected until the user requested the action link not to be text but to be an image.

I thought the best solution would be to create an actionlinkimage extension helper, which was based on the one Basheer posted as a solution on this question Html.ActionLink as a button or an image, not a link and it works brilliantly :

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

        }

    }

However switching the standard @HtmlAction link to this extension helper i now cannot access the text attribute of the link in javascript , so when I attempt to extract the text to display as my dialog title it comes in blank , see javascript here :

<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>

As you can see on the 6th line , where I attempt to get the text from the link. This now comes back as empty. I have attempted to add the text property in the extension method but with no luck. Any help would be appreciated.

Using: jquery3.1.1 Bootstrap v3.3.7 .NET 4.5

score 0 · Accepted Answer · answered Jan 16 '17 at 11:44

I got this working in the end by changing my Extension helper to the following :

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

    }

}

I added an extra parameter dialogTitle in which I pass in the title , and then set the title attributes within the extension method to set the title.

And changed the javascript function to then read from this attribute :

<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>

Perhaps this is not the most elegant solution, maybe someone has a better solution, but at least it means that the Extension menthod and javascript are re-usable and generic (i.e. no hard coded title) and the title is controlled when calling the ImageActionLink control.

Here is how I call the 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")

Link Text attribute not available in javascript from Action Link extension method MVC4

1 Answers1