在 mvc 中重新加载时防止布局页面中的菜单答案

【问题标题】：prevent menu in layout page in reloading in mvc在 mvc 中重新加载时防止布局页面中的菜单
【发布时间】：2015-08-10 16:44:58
【问题描述】：

我在布局页面中有一个菜单，例如

<li class="treeview">
  <a href="#">
    <i class="fa fa-users"></i>
    <span>Customer</span>
  </a>
  <ul class="treeview-menu">
    <li><a href="/Customer/CustomerDetails"> <i class="fa fa-angle-double-right"></i>View Customer</a></li>
    <li><a href="/Customer/AddCustomer"> <i class="fa fa-angle-double-right"></i>Add Customer</a></li>                       
  </ul>
</li>

<div class="content">
  @RenderBody()
</div><!-- /.content -->

在我正在使用的 addcustomer 视图中

$(document).ready(function () {        
  $("ul .treeview-menu a").click(function (e) {
    $('#content').load("/Customer/AddCustomer");
  });
});

我想加载视图而不重新加载整个页面。

【问题讨论】：

您不想显示哪个视图？
那你需要使用javascript/jquery和ajax。但是什么视图，以及响应什么客户端事件？
我想在点击 addcustomer @ala 时显示 AddCustomer 视图
然后你需要处理链接的点击事件，取消它的默认动作并使用ajax调用一个serve方法并用它返回的部分视图更新DOM
脚本需要是布局页面（还需要在.load()函数后使用return false;取消默认重定向）

标签： asp.net-mvc

【解决方案1】：

您应该使用 (.content) 而不是 (#content)

实现@Stephen 答案：

布局页面：

<script>
$(document).ready(function () {  
    //Select (AddCustomer) link specifically      
      $("#AddCustomer").click(function (e) {
        $('.content').load("/Customer/AddCustomer");
         return false;
      });
    }); 
</script>

<li class="treeview">
  <a href="#">
    <i class="fa fa-users"></i>
    <span>Customer</span>
  </a>
  <ul class="treeview-menu">
    <li><a id="ViewCustomer" href="/Customer/CustomerDetails"> <i class="fa fa-angle-double-right"></i>View Customer</a></li>
    <li><a id="AddCustomer" href="/Customer/AddCustomer"> <i class="fa fa-angle-double-right"></i>Add Customer</a></li>                       
  </ul>
</li>

<div class="content">
  @RenderBody()
</div>

在 addcustomer 操作方法中：

public ActionResult AddCustomer()
{
    return View("addcustomer");
}

【讨论】：

我已经更新了我的答案。您应该使用 (.content) 而不是 (#content)
他们的一个问题是，当我输入 url 名称时，parttail 视图被加载......我该如何防止它？？

【解决方案2】：

我有很多视图，所以我将布局页面中的脚本更改为

   $("ul .treeview-menu a").click(function (e) {

        var ulr = $(this).attr("href");
        alert(ulr);
        $('.content').load(ulr);
        return false;
    });

【讨论】：