Html not correct rendered and no Viewbag.Title is set using Ajax.ActionLinks

问题

_ViewStart.cshtml

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";     
}

_Layout.cshtml

...
</head>
<body>
    <div id="NavigationPanel">
        @{ AjaxOptions options = new AjaxOptions
       {
           InsertionMode = InsertionMode.Replace,
           UpdateTargetId = "ContentPanel",
           OnBegin = "OnBeginAnimateContentPanel",
           OnComplete = "OnCompleteAnimateContentPanel",
       };}
        <div>
            <p>@Ajax.ActionLink("Users", "Index", "User", options)</p>
            <p>@Ajax.ActionLink("Groups", "Index", "Group", options)</p>
            <p>@Ajax.ActionLink("Permissions", "Index", "Permission", options)</p>
        </div>
    </div>
    <div id="ContentPanel">
        @RenderBody()
    </div>
</body>
</html>

Global.Asax.cs

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Main", action = "Index", id = UrlParameter.Optional }
    );
}

MainController.Index action:

public ActionResult Index()
{
    return View();
}

Main View Index.cshtml

@{
    ViewBag.Title = "Test-Index";
}

this is the Index View of the MainController

The Index View + Action for the User / Group /Permission Controller are like the Index of the MainController. A Title is set to the ViewBag and some little test text.

There is one thing going wrong here.

The title of each View (User/Group/Permission) is never visible although the View is rendered correctly in the #ContentPanel when I click one of those Ajax.ActionLInks...BUT when I check the html source code:

The content in the ContentPanel is the one from the Index View ???

Why is that and how can I set my View`s title for each Ajax.ActionLink ?

<body>
  <div id="NavigationPanel">
    <p><a data-ajax="true" data-ajax-begin="OnBeginAnimateContentPanel" data-ajax-complete="OnCompleteAnimateContentPanel" data-ajax-mode="replace" data-ajax-update="#ContentPanel" href="/User">Users</a></p>
    <p><a data-ajax="true" data-ajax-begin="OnBeginAnimateContentPanel" data-ajax-complete="OnCompleteAnimateContentPanel" data-ajax-mode="replace" data-ajax-update="#ContentPanel" href="/Group">Groups</a></p>
    <p><a data-ajax="true" data-ajax-begin="OnBeginAnimateContentPanel" data-ajax-complete="OnCompleteAnimateContentPanel" data-ajax-mode="replace" data-ajax-update="#ContentPanel" href="/Permission">Permissions</a></p>
  </div>
  <div id="ContentPanel">
    this is the text within the Index View of the MainController
  </div>
</body>

回答1:

When you view source, you're looking at the source that initially loaded; content loaded via AJAX will not appear. However, if you use the DOM inspector, it will show dynamically loaded content. At least this is the way it works in Chrome; I imagine other browsers are the same.

Check the DOM inspector, and see if the code is what you expect (right-click, "Inspect element" on Chrome and Firefox).

As for setting the title, that can't be done with AJAX, at least not without some Javascript help. In your partial views, try the following Javascript:

<script>
  document.title = "My New Title Here";
</script>

来源：https://stackoverflow.com/questions/10235554/html-not-correct-rendered-and-no-viewbag-title-is-set-using-ajax-actionlinks

标签

asp.net-mvc

jquery

actionlink