MVC 4 - 如何使用 Ajax.ActionLink 呈现带有部分的视图？答案

【问题标题】：MVC 4 - How to render Views with Sections using Ajax.ActionLink?MVC 4 - 如何使用 Ajax.ActionLink 呈现带有部分的视图？
【发布时间】：2012-11-30 12:04:35
【问题描述】：

我正在使用 MVC 4、knout、web api、bootstrap 等构建一个 SPA。我想知道是否有更好的解决方案，或者我在以下情况下做错了什么：

MainLayout 仅用于正文：

<body>
<div class="container-fluid">
        <div class="row-fluid">
            top Menu Here
        </div>
        <div class="row-fluid">
            <div class="span2">
                Left Menu Here with links like:
                @Ajax.ActionLink("Management and Configuration", "Index", "Environments", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ContentPanel" })</li>

                <div id="footer">
                    <p>&copy; Copyright 2012</p>
                </div>
            </div>
            <div class="span10">
                <section>                    
                    <div id="alerts"></div>
                    <div id="ContentPanel">
                        @this.RenderBody()
                    </div>
                </section>
            </div>
        </div>
</div>
    @Scripts.Render("~/js")
    @Scripts.Render("~/js/jqueryui")
    @Scripts.Render("~/js/jqueryval")
    @Scripts.Render("~/js/knockout")
    @Scripts.Render("~/js/modernizr")
    @Scripts.Render("~/js/app")
    @Scripts.Render("~/js/widgets")
    @RenderSection("Scripts", required: false)
</body>

1st - I have a Side Nav Menu with bootstrap and when a link is selected the class change to active so the background will be different so i use jquery to acomplish this part.

$(document).ready(function() {
$('#mainMenu > li').click(function (e) {
    //e.preventDefault();
    $('#mainMenu> li').removeClass('active');
    $(this).addClass('active');
});
//BTW i want some slide effect for the views incoming, 
//correct me if this is not the correct way to do it
$("#ContentPanel").effect("slide", {}, 700);});

2nd - 使用控制器查看代码：

控制器：

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

查看：

@{
ViewBag.Title = "Environments";
}
@section Scripts {

    Script Templates Here

    Scripts for Knockout Viewmodel and Actions Here (i will move to another file)

}
<div class="span3" data-bind="block : $root.isLoading">
    All the HTML Content Here
</div>

3th - 我为 Ajax 调用创建了一个新的布局，这样我就可以为每个视图保留脚本部分。

新布局：

@RenderBody()

@RenderSection("scripts", required: false)

4th - 我更改了 _ViewStart 文件来管理布局：

_查看开始文件：

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

最后，一切正常，但就像我说的，有没有更好的解决方案？还是我使用了一些不好的资源？

最好的问候，

【问题讨论】：

标签： c# jquery twitter-bootstrap asp.net-mvc-4

【解决方案1】：

您也可以使用局部视图。我可以用代码给你举个例子。

假设我正在设计管理面板，左侧我有所有操作链接（ajax.actionlink），右侧我根据点击的链接加载部分视图。

这是我的主视图（父视图）：

@model club.Models.M_Reg

@{
 ViewBag.Title = "Admin";
}

<html><body>
 <br clear="all" /><br /><br />

 <div class="container">
 <h4 style="float:right">Welcome @Model.FName </h4>
     @if (Model != null)
     {
    <div class="col-xs-6 col-lg-3 col-md-3" >
    <div >
    <h2>Admin Panel</h2>


    </div>

    <div class="row">
      <div id="sidebar" class="sidebar-nav span3">
        <ul style="background-color:#EEE !important" class="nav nav-tabs nav-stacked">
          <li class="nav-menu">@Ajax.ActionLink("Member notificaiton", "MemberNotification", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
          <li class="nav-menu">@Ajax.ActionLink("View Member", "ViewMember", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
          <li class="nav-menu">@Ajax.ActionLink("Request for Change MobileNumber and EmailId", "ChangeMob", "Admin", new AjaxOptions { UpdateTargetId = "result", HttpMethod = "Get", InsertionMode = InsertionMode.Replace })</li>
          <li class="nav-menu">@Ajax.ActionLink("Manage System", "ManageSystem", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
          <li class="nav-menu">@Ajax.ActionLink("Post Event", "PostEvent", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
          <li class="nav-menu">@Ajax.ActionLink("Send Notification", "SendNotification", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
          <li class="nav-menu">@Ajax.ActionLink("Add Admin", "AddAdmin", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
          <li class="nav-menu">@Ajax.ActionLink("Change Password", "ChangePassword", "Admin", new AjaxOptions { UpdateTargetId = "result" })</li>
        </ul>
    </div>
   </div>
  </div> 

   <div id="result" class="col-lg-9 col-sm-6 col-md-9 " >

   </div>

  }

  </div>

现在我将返回部分视图：

这是我的控制器代码：

 public ActionResult ManageSystem()
    {
        return PartialView("ManageSystem");
    }

这个部分视图会显示在结果div上，因为我们设置了updatetrgetid=result

您还可以在返回部分视图之前检查 ajax 请求，如下所示：

if (Request.IsAjaxRequest())
        {

            var db = new clubDataContext();
            return PartialView("ViewEvent", db.tblEvents.ToList());
        }
        else
            return RedirectToAction("Login", "User");

【讨论】：

如果你不能得到，请告诉我。我想对此进行更多说明。