prevent menu in layout page in reloading in mvc

Question

I have a menu in layout page like

<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 -->

In addcustomer view I am using

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

I want to load view without reloading the whole page.

Then you need to use javascript/jquery and ajax. But what view, and in response to what client side event? — , Aug 10 '15 at 06:25
i want to dispaly AddCustomer view on clicking on addcustomer @ala — sarath, Aug 10 '15 at 06:39
Then you need to handle the click event of the link, cancel its default action and use ajax to call a serve method and update the DOM with the partial view it returns — , Aug 10 '15 at 06:41
The script needs to be layout page (and you also need to cancel the default redirect using `return false;` after the `.load()` function) — , Aug 10 '15 at 07:04

sarath · Answer 1 · 2015-08-10T08:44:58.150

1

i have a lot of views so i changed script in the layout page to

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

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

edited Aug 10 '15 at 08:44

answered Aug 10 '15 at 08:34

sarath

314
6
15

Ala · Accepted Answer · 2015-08-10T08:40:10.980

You should use (.content) instead of (#content)

Implementing @Stephen answer:

the layout page:

<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>

In addcustomer action method:

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

I have updated my answer.You should use (.content) instead of (#content) — Ala, Aug 10 '15 at 08:40
their is one issue that, when i type url name, the partail view is loaded... how can I prevent it?? — sarath, Aug 21 '15 at 10:30

prevent menu in layout page in reloading in mvc

2 Answers2

Linked