Question

我正在使用MVC 4，knockout，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 - 我有一个带有引导程序的Side Nav菜单，当选择一个链接时，类会变为活动状态，因此背景会不同，所以我使用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);});

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>

3 - 我创建了一个新的Ajax调用布局，所以我可以保留每个View的脚本部分。

新布局：

@RenderBody()

@RenderSection("scripts", required: false)

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

_ViewStart文件：

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

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

最诚挚的问候，

Answer 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");

MVC 4 - 如何使用Ajax.ActionLink呈现带有节的视图？

1 个答案: