Ajax.ActionLink and Html.ActionLink in ASP.NET MVC

.Net, ASP.NET, MVC 0 Comments

Html.ActionLink

Html.ActionLink is used to create hyperlink on view page and user clicks it to navigate to new URL. It does not link to a view directly rather it links to a controller’s action. Here is some samples of Html.ActionLink:

If you want to navigate to same controller’s action method, use the one given below. Razor is smart enough to assumes first param as link text and second param as action method name, if finds only two parameters.

@Html.ActionLink(“Click here”, // <– Link text

“Index” // <– Action Method Name

)

It’s rendered HTML: <a href=”/”>Click here</a>

If you want to navigate to different controller’s action method, use the one given below. Even you can avoid typing ‘null’ for route value and htmlArguments. Here also, razor will assume first param as link text, second param as action method name, third param as controller name, if finds three parameters.

@Html.ActionLink(“Click here”, // <– Link text

“About”, // <– Action Method Name

“Home”, // <– Controller Name

null, // <– Route value

null // <– htmlArguments

)

It’s rendered HTML: <a href=”/Home/About”>Click here</a>

If you want to navigate to same controller’s action method, use the one given below. Here razor will assume first param as link text, second param as action method, third param as route value. We can avoid typing ‘null’ for htmlArgument, works fine.

@Html.ActionLink(“Edit”, // <– Link text

“Edit”, // <– Action Method Name

new { id=item.CustomerID }, // <– Route value

null // <– htmlArguments

)

It’s rendered HTML: <a href=”/Home/Edit/187″>Edit</a>

If you want to navigate to same controller’s action method, use the one given below. Here razor will assume first param as link text, second param as action method, third param as route value. Instead of typing ‘null’ or avoiding htmlAttribute, I am using ‘class’ attribute with ‘ui-btn’ as name.

@Html.ActionLink(“Edit”, // <– Link text

“Edit”, // <– Action Method Name

new { id=item.CustomerID }, // <– Route value

new {@class=”ui-btn”} // <– htmlArguments

)

It’s rendered HTML: <a class=”ui-btn” href=”/Home/Edit/187″>Edit</a>

What, if one wants rendered HTML to be as given below which is application specific anonymous attribute:

<a class=”ui-btn” data-val=”abc” href=”/Home/Edit/ANTON”>Edit</a>

If you try to do as given below, you will get error:

Reason is, we can’t use any anonymous property/attribute having dash in their names. Use an underscore instead of dash and MVC will automatically replace the underscore with a dash in the rendered HTML, here it is.

@Html.ActionLink(“Edit”, // <– Link text

“Edit”, // <– Action Method Name

new { id=item.CustomerID }, // <– Route arguments

new {@class=”ui-btn”, data_val=”abc”} // <– htmlArguments

)

 

At very first we need Ajax.ActionLink which will send the async request, so here we go.

<h2>Customers</h2>

@Ajax.ActionLink(“Customer from Germany”, // <– Text to display

“Germany”, // <– Action Method Name

new AjaxOptions

{

UpdateTargetId=”CustomerList”, // <– DOM element ID to update

InsertionMode = InsertionMode.Replace, // <– Replace the content of DOM element

HttpMethod = “GET” // <– HTTP method

})

|

@Ajax.ActionLink(“Customer from Mexico”, // <– Text to display

“Mexico”, // <– Action Method Name

new AjaxOptions

{

UpdateTargetId=”CustomerList”, // <– DOM element ID to update

InsertionMode = InsertionMode.Replace, // <– Replace the content of DOM element

HttpMethod = “GET” // <– HTTP method

})

Leave a Reply

Your email address will not be published. Required fields are marked *