HTML element within an ActionLink

5

Hello, I would like to know if you can create an HTML element within a ActionLink , for example:

To create a link on a menu with ActionLink :

@Html.ActionLink("Classificação Financeira", "Index", "ClassificacaoFinanceira")

But I need to create an element to put a figure in the menu and if I do with the tag a it would look like this:

<a href="/ClassificacaoFinanceira"><i class="fa fa-bar-chart"></i> Classificação Financeira</a>

But I would like to do this using ActionLink , can you do that?

    
asked by anonymous 06.10.2015 / 16:34

2 answers

2

You can create an extension method in your HTMLHelper and format your element any way you need!

TagHelper extension

namespace System.Web.Mvc
{
    public static class Methods
    {
        public static String ControllerName(this HtmlHelper HtmlHelper)
        {
            return HtmlHelper.ViewContext.RequestContext.RouteData.Values["controller"].ToString();
        }
        public static String ControllerName(this AjaxHelper AjaxHelper)
        {
            return AjaxHelper.ViewContext.RequestContext.RouteData.Values["controller"].ToString();
        }
        public static String ActionName(this HtmlHelper HtmlHelper)
        {
            return HtmlHelper.ViewContext.RequestContext.RouteData.Values["action"].ToString();
        }
        public static String ActionName(this AjaxHelper AjaxHelper)
        {
            return AjaxHelper.ViewContext.RequestContext.RouteData.Values["action"].ToString();
        }
        public static object GetValue<TModel, TProperty>(HtmlHelper<TModel> htmlHelper, System.Linq.Expressions.Expression<Func<TModel, TProperty>> expression)
            where TModel : class
        {
            TModel model = htmlHelper.ViewData.Model;
            if (model == null)
            {
                return default(string);
            }
            Func<TModel, TProperty> func = expression.Compile();
            return func(model);
        }
        public static IHtmlString ButtonEdit(this HtmlHelper HtmlHelper, String Description, String ActionName, String Title, params object[] routeValues)
        {
            string routes = string.Empty;
            if (routeValues.Length > 0)
            {
                foreach (object route in routeValues)
                {
                    if (routes == string.Empty)
                    {
                        routes += route;
                    }
                    else
                    {
                        routes += "/" + route;
                    }
                }
            }
            string _button = string.Format("<a href=\"{0}\" class=\"btn btn-primary\" target=\"_self\" title=\"{1}\">{2}</a>",
                string.Format("/{0}/{1}/{2}", ControllerName(HtmlHelper), ActionName, routes), Title, Description);
            return new HtmlString(_button);
        }
    }
}

Note that there are several methods to help, and that in the ButtonEdit method and the new tag I created.

How to call in your View:

@Html.ButtonEdit("Cadastro", "Index", "", null)
    
06.10.2015 / 16:55
3

The most interesting way I found to solve the problem is to create my own extensions for HtmlHelper . For your case, you want to use FontAwesome in the link, the code below resolves:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MeuProjeto.Extensions
{
    public static class HtmlHelperExtensions
    {
        public static IHtmlString FontAwesomeActionLink(this HtmlHelper htmlHelper, string linkText,
            string actionName, string fontAwesomeClass, object routeValues = null, object htmlAttributes = null)
        {
            return FontAwesomeActionLink(htmlHelper, linkText, actionName, null, fontAwesomeClass, routeValues,
                htmlAttributes);
        }

        public static IHtmlString FontAwesomeActionLink(this HtmlHelper htmlHelper, string linkText,
            string actionName, string controllerName, string fontAwesomeClass, object routeValues = null, object htmlAttributes = null)
        {
            var targetUrl = UrlHelper.GenerateUrl(null, actionName, controllerName, ObjectToDictionary(routeValues), htmlHelper.RouteCollection, htmlHelper.ViewContext.RequestContext, true);
            return new MvcHtmlString(GenerateLink(linkText, targetUrl, fontAwesomeClass, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)));
        }

        private static string GenerateLink(string linkText,
            string targetUrl,
            string fontAwesomeClass,
            IDictionary<string, object> htmlAttributes
        )
        {
            var a = new TagBuilder("a");

            a.MergeAttributes(htmlAttributes);
            a.MergeAttribute("href", targetUrl);

            var i = new TagBuilder("i");

            i.MergeAttribute("class", "fa " + fontAwesomeClass);
            a.InnerHtml = i.ToString(TagRenderMode.Normal) + " " + linkText;

            return a.ToString(TagRenderMode.Normal);
        }
    }
}

Register the extension at web.config within the Views directory :

<configuration>
  ...
  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.2.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization" />
        <add namespace="System.Web.Routing" />
        <add namespace="System" />
        <add namespace="MeuProjeto.Extensions" /> <!-- Este -->
      </namespaces>
    </pages>
  </system.web.webPages.razor>
  ...
</configuration>

Usage:

@Html.FontAwesomeActionLink("Classificação Financeira", "Indice", "ClassificacaoFinanceira", "fa fa-bar-chart")
    
06.10.2015 / 16:53