Ajax ActionLink does not work when css class active and jQuery is applied

Question

<ul style="padding-right:1px;" class="navigation">
            <li>@Ajax.ActionLink("Dashboard", "Dashboard", "Dashboard", new AjaxOptions() { UpdateTargetId = "detailContainer", InsertionMode = InsertionMode.Replace }, new { @class="active"})</li>
            <li>@Ajax.ActionLink("Cases", "Cases", "Cases", new AjaxOptions() { UpdateTargetId = "detailContainer", InsertionMode = InsertionMode.Replace })</li>
            <li>@Ajax.ActionLink("Reports", "Report", "Reports", new AjaxOptions() { UpdateTargetId = "detailContainer", InsertionMode = InsertionMode.Replace })</li>
        </ul>

<div class="col-xs-10" id="detailContainer">
    @Html.Action("Dashboard", "Dashboard")
</div>

I have <ul> like above. You can see on first

I have applied class='active' which works fine. But when I click on Dashboardafter navigating from other <li> element, Ajax.ActionLink doesn't open Dashboard view. The problem seems to be with jQuery script. I have applied following JQuery to change class='active' when <li><a> is clicked.

$(document).ready(function () {
    var selector = '.navigation li a';
    $(selector).click(function () {
        $(selector).removeClass('active');
        $(this).addClass('active');
    });
});

But when I remove class='active' from Dashboard, navigation works fine but when I apply class it doesn't open Dashboard view.

What is the problem?

Satpal · Accepted Answer · 2016-07-22 10:11:02Z

1

You are not using correct method. There is no overloaded method as ActionLink(AjaxHelper, String, String, String, AjaxOptions, Object)

Use AjaxExtensions.ActionLink(AjaxHelper, String, String, String, Object, AjaxOptions, Object)

 <li>@Ajax.ActionLink("Dashboard", "Dashboard", "Dashboard", null, new AjaxOptions() { UpdateTargetId = "detailContainer", InsertionMode = InsertionMode.Replace }, new { @class="active"})</li>

answered Jul 22, 2016 at 10:11

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Faizan Mubasher Over a year ago

O yes, my bad. Thanks Satpal

Collectives™ on Stack Overflow

Ajax ActionLink does not work when css class active and jQuery is applied

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