Question

Let me be more specific..What i want to do is that when i click a submenu for example say XYZ is a sub menu of a main menu ABC..when i click XYZ it loads via ajax on the main page i.e ABC..the ajax part is done i dnt how to call it via menu….i’ll paste my code to b more clear..

<li>@Html.ActionLink("About Us", "Index", "AboutUs")
    <ul>
        <li>@Html.ActionLink("Vision & Misson", "Index", "AboutUs")</li>
        <li>@Html.ActionLink("Our Ethics", "Index", "AboutUs")</li>
    </ul>
</li>

this is an about us page, normaly it is directed to its INDEX page when about us is clicked..HOw ever when you hover on ABout US a drop down menu opens showing to more options:
vision and mission
our ethics……currently both of them are directed to index
what i want is that when i click vision and mission, it should open the partial view of vision and mission directly on the index page of about us…
similarly when ‘our ethics’ page is clicked it should directly call the partial view ‘our ethics’ and display it on index page of about us

Answer 1

Change your @Html.ActionLink to @Ajax.ActionLink

<li>@Html.ActionLink("About Us", "Index", "AboutUs")
    <ul>
        <li>@Ajax.ActionLink("Vision & Misson", "VisionAndEthics", new AjaxOptions {
                InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget"
            })</li>
        <li>@Ajax.ActionLink("Our Ethics", "OurEthics", new AjaxOptions {
                InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget"
            })</li>
    </ul>
</li>

The insertion mode property is set to replace and the UpdateTargetId property is the id of the HTML container you want to put the result in.

Then in your controller

public PartialViewResult VisionAndEthics() {
    return PartialView("VisionAndMission");
}

public PartialViewResult OurEthics() {
    return PartialView("OurEthics");
}

This way you could also handle clients with javascript turned off by extending this solution.