MVC 4 - How to render Views with Sections using Ajax.ActionLink?

Question

I'm building a SPA with MVC 4, knockout, web api, bootstrap and others. I would like to know if there is a better solution or i'm doing something wrong with the following scenario:

MainLayout for Body Only:

<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 - I have a Side Nav Menu with bootstrap and when a link is selected the class change to active so the background will be different so i use jquery to acomplish this part.

$(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 - A View code with the controller:

Controller:

public ActionResult Index()
{
    return View();
}

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 - I created a new Layout for Ajax calls so i can keep the scripts sections for each View.

New Layout:

@RenderBody()

@RenderSection("scripts", required: false)

4th - I changed the _ViewStart file to manage the layouts:

_ViewStart File:

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

Finally, all works fine, but like i said, is there any better solution? or i'm using bad some resources?

Best Regards,

Answer 1

You can use partial View as well. I can give you example with code.

Suppose I am designing admin panel, left side I have all the operation links (ajax.actionlink) and right side I am loading partial view according to link clicked.

This is my main view (Parent view):

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

Now I will return Partial view:

This is my controller code:

 public ActionResult ManageSystem()
    {
        return PartialView("ManageSystem");
    }

This partial view will be displayed on result div, because we have set updatetrgetid=result

You can also check for ajax request before returning partial view like this:

if (Request.IsAjaxRequest())
        {

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

MVC 4 - How to render Views with Sections using Ajax.ActionLink?

Question

1 answers

solution1
0 2014-05-26 14:09:30

MVC 4 - How to render Views with Sections using Ajax.ActionLink?

Question

1 answers

solution1 0 2014-05-26 14:09:30

solution1
0 2014-05-26 14:09:30