MVC 4 - 如何使用Ajax.ActionLink渲染剖视图？

我正在构建一个MVC 4，淘汰赛，web api，bootstrap和其他的SPA。我想知道是否有更好的解决办法还是我做错了与以下情形：MVC 4 - 如何使用Ajax.ActionLink渲染剖视图？

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>

月1日 - 我有一个边导航菜单自举和当选择一个链接类更改为活动，所以背景会不同，所以我使用jquery来实现这一部分。

$(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);});

2日 - 与控制器A查看代码：

控制器：

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的新布局要求，所以我可以保留每个View的脚本部分。

新布局：

@RenderBody() 

@RenderSection("scripts", required: false)

4日 - 我改变了_ViewStart文件管理布局：

_ViewStart文件：

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

最后，一切工作正常，但就像我说的，有没有更好的解决方案？或者我使用不好的资源？

最好的问候，

来源

2012-12-12 Luiggi

您可以使用局部视图中。我可以给你例子的代码。

假设我在设计管理面板，左侧我有所有的操作链接（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 =结果

您也可以返回局部视图，这样之前检查Ajax请求：

if (Request.IsAjaxRequest()) 
     { 

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

来源

2014-05-26 14:09:30

，如果你不能够得到，请让我知道。我想对此进行更多的澄清。 –

MVC 4 - 如何使用Ajax.ActionLink渲染剖视图？

回答

相关问题