Is there any difference between HTML.ActionLink
vs Url.Action
or they are just two ways of doing the same thing?
When should I prefer one over the other?
Yes, there is a difference. Html.ActionLink
generates an <a href=".."></a>
tag whereas Url.Action
returns only an url.
For example:
@Html.ActionLink("link text", "someaction", "somecontroller", new { id = "123" }, null)
generates:
<a href="/somecontroller/someaction/123">link text</a>
and Url.Action("someaction", "somecontroller", new { id = "123" })
generates:
/somecontroller/someaction/123
There is also Html.Action which executes a child controller action.
Html.ActionLink
generates an <a href=".."></a>
tag automatically.
Url.Action
generates only an url.
For example:
@Html.ActionLink("link text", "actionName", "controllerName", new { id = "<id>" }, null)
generates:
<a href="/controllerName/actionName/<id>">link text</a>
and
@Url.Action("actionName", "controllerName", new { id = "<id>" })
generates:
/controllerName/actionName/<id>
Best plus point which I like is using Url.Action(...)
You are creating anchor tag by your own where you can set your own linked text easily even with some other html tag.
<a href="@Url.Action("actionName", "controllerName", new { id = "<id>" })">
<img src="<ImageUrl>" style"width:<somewidth>;height:<someheight> />
@Html.DisplayFor(model => model.<SomeModelField>)
</a>
@HTML.ActionLink
generates a HTML anchor tag
. While @Url.Action
generates a URL
for you. You can easily understand it by;
// 1. <a href="/ControllerName/ActionMethod">Item Definition</a>
@HTML.ActionLink("Item Definition", "ActionMethod", "ControllerName")
// 2. /ControllerName/ActionMethod
@Url.Action("ActionMethod", "ControllerName")
// 3. <a href="/ControllerName/ActionMethod">Item Definition</a>
<a href="@Url.Action("ActionMethod", "ControllerName")"> Item Definition</a>
Both of these approaches are different and it totally depends upon your need.
<p>
@Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("Index", "Company", FormMethod.Get))
{
<p>
Find by Name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
<input type="button" value="Clear" onclick="location.href='@Url.Action("Index","Company")'"/>
</p>
}
In the above example you can see that If I specifically need a button to do some action, I have to do it with @Url.Action whereas if I just want a link I will use @Html.ActionLink. The point is when you have to use some element(HTML) with action url is used.
You can easily present Html.ActionLink as a button by using the appropriate CSS style. For example:
@Html.ActionLink("Save", "ActionMethod", "Controller", new { @class = "btn btn-primary" })
I used the code below to create a Button and it worked for me.
<input type="button" value="PDF" onclick="location.href='@Url.Action("Export","tblOrder")'"/>
Success story sharing
Html.ActionLink
to generate them. Don't try to do such micro optimizations. You will end up with ugly code in your views.<a>
). Use Url.Action when you need to generate only an url (this could also be used in a controller action).Url.Action
is much more performat thanHtml.ActionLink
. I had a list of 6,000 items that had 2Html.ActionLinks
. It took 6,600ms to render the list. Without theHtml.ActionLinks
it took 52ms. UsingUrl.Action
it took 270ms. Granted, 6000 items is a large list, but thought I'd add it for future reference.