Click here to Skip to main content
15,888,102 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am using Kendo TabStrip for loading my partial views.
But found problems in maintaing urls for different ajax requests for actions in controllers.

Here is some code to make it more clear:

In my _layout.cshtml view:
@(Html.Kendo()
.Menu()
.Name("HQmenu")
.Items(menu =>
     {
       menu.Add().Text("Home").Action("Index", "Home")
                 .HtmlAttributes(new {@class = "menu", });

       menu.Add().Text("Receiving").Action("Index", "Receiving")
                 .HtmlAttributes(new { @class = "menu", })
                 .LinkHtmlAttributes(
                  new
                     {
                         data_ajax_update = "#MiddleContent",
                         data_ajax_mode =,
                         data_ajax_method = "Post",
                         data_ajax = "true",
                         data_ajax_begin = "OnAjaxStart(this);",
                         data_ajax_success = "OnAjaxSuccess(this);",
                         data_ajax_complete = "OnAjaxComplete('Index', 'Receiving');"
                     });

       menu.Add().Text("Trading Desk").Action("Index", "TradingDesk")
                 .HtmlAttributes(new { @class = "menu", })
                 .LinkHtmlAttributes(
                  new
                     {
                         data_ajax_update = "#MiddleContent",
                         data_ajax_mode = "replace",
                         data_ajax_method = "Post",
                         data_ajax = "true",
                         data_ajax_begin = "OnAjaxStart(this);",
                         data_ajax_success = "OnAjaxSu "replace"ccess(this);",
                         data_ajax_complete = "OnAjaxComplete('Index','TradingDesk');"
                     });

       menu.Add().Text("Customer Service").Action("Index","CustomerService")
                 .HtmlAttributes(new { @class = "menu", })
                 .LinkHtmlAttributes(
                     new
                     {
                       data_ajax_update = "#MiddleContent",
                       data_ajax_mode = "replace",
                       data_ajax_method = "Post",
                       data_ajax = "true",
                       data_ajax_begin = "OnAjaxStart(this);",
                       data_ajax_success = "OnAjaxSuccess(this);",
                       data_ajax_complete="OnAjaxComplete('Index','CustomerService');"
                     });



// Here is some javaScript Methods--
<script type="text/javascript">
    function OnAjaxStart(e) {
      startLoading();
    }
    function OnAjaxSuccess(e) {
      EndLoading();
    }
    function OnAjaxComplete(ActionName, Controller)
    {
        if (ActionName != '' && Controller != '') {
            window.history.pushState("", "", '/' + Controller + '/' + ActionName);
        }
        else {
            window.history.pushState("", "", '/' + ActionName);
        }
    }
 </script>



Let us take one Controller:
public class HomeController : Controller
 {
    public ActionResult Index()
   {
      return view();
   }
 }

And Its View is Like it:
 @{
     ViewBag.Title = "Home Page";
     Layout="~/Shared/_Layout.cshtml";
  }

<div>
    @(Html.Kendo().TabStrip()
         .Name("ReceivingTabs")
         .Items(items =>
          {
              items.Add()
              .Text("In Transit Jobs")
              .HtmlAttributes(new { id ="Intransit" })
              .LoadContentFrom("InTransitJobs", "Receiving");

              items.Add()
              .Text("Validate Customer Job")
              .HtmlAttributes(new { id = "Validate"})
              .LoadContentFrom("ValidateCustomerJob", "Receiving");
         }))

 </div>


Above written tabstrip load their content by requesting actions using ajax calls so their is no change in urls.

But for _layout.cshtml page i maintained url's by using Ajax_Start(),Ajax_Compelete() like functions as described.

Up to 1st level it is fine, but when comes to nested tabs as shown in attached image,
I found problem for maintain url's, while one tabs has other tabs inside it.

Please Provide me the best way to do it,which is maintainable for large applications as well.
If some one wants more clarification for understanding well, please comment i will provide in more details.

Thanks in advance
Posted
Updated 15-Sep-14 1:35am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900