Actionlink not picking up Bootstrap button class in asp.net mvc view

Question

Hi could someone cast a quick eye over the attached to see why the button is not picking up the bootstrap class correctly.

The Actionlink item in question is at the very end of the view.

I have tried moving the @section scripts section to different parts of the page but it has made no difference.

Thanks John

@model IEnumerable<IWA_Mileage_Tracker_Demo.Models.Journey>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.StartAddress)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FinishAddress)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateofJourney)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.distance)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ReasonForJourney)
        </th>

    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.StartAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FinishAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateofJourney)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.distance)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.ReasonForJourney)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }

</table>

<div class="col-md-6">

                @Html.ActionLink("Add a new journey", "Create", new {@class = "btn btn-default"})
    </div>

        @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
    }

Just to add the Layout = "~/Views/Shared/_Layout.cshtml"; reference listed includes the Bootstrap script @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) — John O'Grady
– John O'Grady, Commented Aug 28, 2015 at 19:27

Viktor Bahtev · Accepted Answer · 2015-08-28 19:30:02Z

3

The third parameter of Html.ActionLink represents the routeValues. If you want to add html attributes (and some specific class) you must use another overload:

@Html.ActionLink(string linkText, string actionName, object routeValues, object htmlAttributes)

For your case you can pass empty object or null for routeValues and it would be:

@Html.ActionLink("Add a new journey", "Create", null, new { @class = "btn btn-default"})

answered Aug 28, 2015 at 19:30

Viktor Bahtev

4,9182 gold badges36 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John O'Grady Over a year ago

thanks Viktor much love to you too! That null being the third parameter representing the routeValues was throwing me completely. I won't forget that now!

Collectives™ on Stack Overflow

Actionlink not picking up Bootstrap button class in asp.net mvc view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related