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渲染剖視圖？

回答

相關問題