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