Kendo Menu and Partial View URL Routing

[Ori]

I have here a MENU which would show partial views as the content. The function openPatientDetails is a switch statement that basically just adds a class to those divs that I want to hide and removes the class to those divs that I want to show. So every time I click from the Menu which adds/removes the hidden class, I also need the url to change without reloading the browser and every time I click back or forward it should go to the partial view that I am supposed to be. I tried the history.pushState but it's so static because I need to do it for all of the tabs. Is there any way to solve this issue?

<div class="panel-body">
    <div id="row_menu" class="row" style="margin-top: -15px;">
        @(Html.Kendo().Menu()
                .Name("Menu_PatientDetails")
                .Items(items =>
                {
                    items.Add().Text("Patient Information").Selected(true).Enabled(false);
                    items.Add().Text("Insurance").Enabled(false);
                    items.Add().Text("Visits").Enabled(false);
                    items.Add().Text("Notes").Enabled(false);
                    items.Add().Text("Documents").Enabled(false);
                })
                .Events(e=>e.Select("openPatientDetails"))
        )
    </div>

    <div id="PatientInformationPanel">
        @Html.Action("ShowPatientInformation", "Patient")
    </div>

    <div id="PatientInsurancePanel" class="hidden">
        @Html.Action("ShowPatientInsurance", "Patient")
    </div>

    <div id="PatientYearPanel" class="hidden">
        @Html.Action("ShowPatientYear", "Patient")
    </div>

    <div id="CasesPanel" class="hidden">
        @Html.Action("ShowPatientCases", "Patient")
    </div>
    <div id="PatientDocumentPanel" class="hidden">
        @Html.Action("ShowPatientDocuments", "Patient")
    </div>
</div>

function openPatientDetails(e) {
     $(e.item).addClass("k-state-selected");
     $("#PatientInformationPanel").removeClass("hidden");
     $("#PatientInsurancePanel").addClass("hidden");
     $("#PatientYearPanel").addClass("hidden");
     $("#CasesPanel").addClass("hidden");
     $("#PatientDocumentPanel").addClass("hidden");
}

 

[Ivan Danchev]

Hello Ori,

I am not sure how the issue you are facing is related to the Menu and its functionality. The Menu items have an Action method: 

.Action("Construction", "Home");

that allows the specified action in the controller to be called. That's the built-in Menu functionality with regard to calls to the server. What result (view) will the called action return would depend on the specific scenario and application logic. The same is valid for routing and browser history, which are not related to the Menu's configuration, API or features.

Regards,
Ivan Danchev
Telerik by Progress