5

Olá, gostaria de saber se é possível criar um elemento HTML dentro de um ActionLink, por exemplo:

Para criar um link em um menu com ActionLink:

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

Mas eu preciso criar um elemento para colocar uma figura no menu e se eu for fazer com a tag a ficaria assim:

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

Mas eu gostaria de fazer isso usando o ActionLink, tem como fazer isso?

1
  • Isso não te ajudaria: <a href="@Url.Action("Index", "ClassificacaoFinanceira")"><i class="fa fa-bar-chart"></i></a> 6/10/2015 às 16:38

2 Respostas 2

3

A maneira mais interessante que achei pra resolver o problema é criando minhas próprias extensões para o HtmlHelper. Pro seu caso, que você quer usar o FontAwesome no link, o código abaixo resolve:

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

Registre a extensão no web.config dentro do diretório Views:

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

Uso:

@Html.FontAwesomeActionLink("Classificação Financeira", "Indice", "ClassificacaoFinanceira", "fa fa-bar-chart")
2

Você pode criar um método de extensão no seu HTMLHelper e formatar o seu elemento da forma que precisar!

Como seria um extensão da TagHelper:

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

Observe que existe vários métodos para auxilio e que no método ButtonEdit e a nova tag que eu criei.

Como chamar na sua View:

@Html.ButtonEdit("Cadastro", "Index", "", null)
5
  • O problema é aquela classe fixa ali. 6/10/2015 às 15:07
  • Não entendi @CiganoMorrisonMendez ?
    – Cezar
    6/10/2015 às 15:08
  • Falo disto: class=\"btn btn-primary\". Se eu quiser usar outra classe, não posso. Vamos supor que meu link não seja um botão. 6/10/2015 às 15:12
  • 1
    @CiganoMorrisonMendez no meu sistema foi aplicado essa CSS como padrão, e isso não é um problema é a forma como eu vi o meu sistema de botões e padronização. Só lembrando que isso é um exemplo e deve ser alterado para adequar ao que ele precisa fazer no sistema dele! Isso não é um problema é uma customização minha que pra você possa ser diferente.
    – Cezar
    6/10/2015 às 15:15
  • Só reafirmando @CiganoMorrisonMendez o meu botão em todo o sistema ficará com esse CSS para identificação e normativas, utilizado pela equipe de desenvolvimento (Foi decidido que esse botão tem essa cor, tamanho e estilo).
    – Cezar
    6/10/2015 às 15:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .