CODEWITHSUNDEEP
jquery.netasp.net-mvcrazor
Faizan Mubasher
Faizan Mubasher

Reputation: 4569

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

<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?

    Upvotes: 0

    Views: 266

    • Answers (1)

    Satpal
    Satpal

    Reputation: 133403

    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>

    Upvotes: 1

    Related Questions