CODEWITHSUNDEEP
asp.net-mvcasp.net-core
Babar Hussain
Babar Hussain

Reputation: 17

How to use href attribute and asp-controller/asp-action in a anchor tag? [asp.net core mvc]

Anchor tag:

<a class="nav-link active"  href="javascript:void(0);" asp-controller="Home" asp-action="Profile"><i class="bx bx-user me-1"></i> Profile</a>

Following error occurs:

InvalidOperationException: Cannot override the 'href' attribute for . An with a specified 'href' must not have attributes starting with 'asp-route-' or an 'asp-action', 'asp-controller', 'asp-area', 'asp-route', 'asp-protocol', 'asp-host', 'asp-fragment', 'asp-page' or 'asp-page-handler' attribute.

I understand why error occured its because href attribute can not be used with asp-controller/asp-action attributes. i am using a UI template with builtin js functions so i have to use href="javascript:void(0);" for js to perform somr functionality as well as move to another page in MVC using asp-controller/asp-action attributes.

Upvotes: 0

Views: 1512

Answers (2)

Md Farid Uddin Kiron
Md Farid Uddin Kiron

Reputation: 22457

I am using a UI template with builtin js functions so i have to use href="javascript:void(0);" for js to perform somr functionality as well as move to another page in MVC using asp-controller/asp-action attributes.

Well, in asp.net core you would seen @Html.ActionLink within HtmlHelperLinkExtensions class which as action and controller along with htmlAttributes together which would generate an anchor () element. You could have look below reference:

enter image description here

Implementation:

You can using @Html.ActionLink overload method either in following way:

Way: 1

@Html.ActionLink("<a><a/>Anchor Tag Using Action Link  Profile", "ActionName", "ControllerName", new { @href="javascript:void(0);", @onclick = "return Submit()" })

Note: You can directly call javascript function as well. As you can see I am calling by Submit() which is a self define function.

Way: 2

@Html.ActionLink(
    "<a><a/>Anchor Tag Using Action Link  Profile",
    "MemberList",
    "Animal",
    null,
    null,
    null,
    null,
    new { @href="javascript:void(0);", @onclick = "return Submit()" })

Note: You could modify as per your requirement and this would allow you to combine javascript:void(0) along with controller and action what you are trying to achieve.

Output:

enter image description here

Note: If you would like to know more details on numerous ActionLink overload you could check our official document here.

Upvotes: 2

Soheil
Soheil

Reputation: 240

You can define your customize html a tag as tag helper, and use it instead of normal a html tag.

for example:

namespace Web.TagHelpers
{
    [HtmlTargetElement("MyHref")]
    public class MyHrefTagHelper : TagHelper
    {
        public string Controller { get; set; } = "";
        public string Action { get; set; } = "";
        public string Class { get; set; } = "";
        public string Href{ get; set; } = "";

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";
            output.Attributes.SetAttribute("class", $"{Class}");

            //here you can make decision to use asp-for or href or whatever you want to do
            if (String.IsNullOrEmpty(Href) || String.IsNullOrWhiteSpace(Href))
                output.Attributes.SetAttribute("href", $"/{controller}/{Action}");
            else
                output.Attributes.SetAttribute("href", $"{Href}");
         }
    }
}

 <MyHref class="nav-link active" href="javascript:void(0);" controller="Home" action="Profile">Profile</MyHref>

remember you should add your tagHelper namespace in _ViewImports.cshtml :

@addTagHelper *, Web

Upvotes: 0

Related Questions