Showing view depending on the selected menu item

2 posts, 0 answers
  1. Attila
    Attila avatar
    21 posts
    Member since:
    Oct 2016

    Posted 30 Oct 2017 Link to this post

    Hello there,

    Please write me a suggestion to my problem:

    My _Layout.cshtml file looks like this:

    <html>
    <head>
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

        <link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.common.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.moonlight.min.css")" rel="stylesheet" type="text/css" />

        <script src="@Url.Content("~/Scripts/kendo/2017.3.1018/jquery.min.js")"></script>

        <script src="@Url.Content("~/Scripts/kendo/2017.3.1018/kendo.all.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2017.3.1018/kendo.aspnetmvc.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo/2017.3.1018/cultures/kendo.culture.hu-HU.min.js")"></script>

        <script type="text/javascript">

            function refreshPartialView(e) {

                var selected = this.dataItem($(e.item));

                var id = selected.Id;

                var result = $.ajax({
                    url: '@Url.Action("GetSiteInfoSearchResult", "SiteInfo")',
                    method: 'GET',
                    data: { id: id },
                    dataType: 'text',
                    async: false,
                    success: function (response) {
                        
                        $('#tabStripPartial').html(response);//show the tabstrip
                        $('#gridSerialSearchResult').html('');//and clear the other partial... :(
                    }
                });
            }

            function refreshSerialGrid(e) {

                var selected = this.dataItem($(e.item));
                
                var result = $.ajax({
                    url: '@Url.Action("GetSerialSearchResult", "Jegyzokonyv")',
                    method: 'GET',
                    data: { id: selected },
                    dataType: 'text',
                    async: false,
                    success: function (response) {
                        
                        $('#gridSerialSearchResult').html(response);//show the gridview
                        $('#tabStripPartial').html('');//and hide the other partial view
                    }
                });
            }

        </script>

        <script>

            $(document).ready(function () {

                $("#searchBox").kendoAutoComplete({
                    dataSource: {
                        transport: {
                            read: {
                                url: "/SiteInfo/GetSiteInfos"
                            }
                        }
                    },
                    dataTextField: "Nev",
                    placeholder: "Search site...",
                    autoWidth: true,
                    select: refreshPartialView
                });
            });

            $(document).ready(function () {

                $("#searchSerial").kendoAutoComplete({
                    dataSource: {
                        transport: {
                            read: {
                                url: "/Jegyzokonyv/GetSerials"
                            }
                        }
                    },
                    placeholder: "Search serial...",
                    autoWidth: true,
                    filter: "contains",
                    select: refreshSerialGrid
                });
            });

        </script>
    </head>

    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("Home", "Index", "Home")</p>
                </div>

                <div class="float-right">
                    @(Html.Kendo().Menu().Name("navmenu").Items(i =>
                {


                    if (Request.IsAuthenticated)
                    {
                        i.Add().Text("Search").Content("<input id='searchBox'/>");
                        i.Add().Text("Tools").Items(children =>
                        {
                            children.Add().Text("Reports").Items(children2 =>
                            {
                                children2.Add().Text("Report 1");
                                children2.Add().Text("Report 2");
                                children2.Add().Text("Report 3");
                            });
                            children.Add().Text("Search serial").Content("<input id='searchSerial'/>");
                            children.Add().Text("Account");//The problem is here, if I add Action("Index","Manage")
                            children.Add().HtmlAttributes(new { @class = "k-separator" });
                            children.Add().Text("Logout").HtmlAttributes(new { onClick = "javascript:document.getElementById('logoutForm').submit()" });
                        });


                    }
                    else
                    {
                        i.Add().Text("Login").Action("Login", "Account");
                    }
                    i.Add().Text("Contact").Action("Contact", "Home");
                }))
                </div>
            </div>

            @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
            {
                @Html.AntiForgeryToken()
            }
        </header>
        <div id="body" class="container">
            
            @RenderSection("featured", required: false)

            <section class="content-wrapper main-content clear-fix" id="mainBody">

                @RenderBody()

                @if (Request.IsAuthenticated)
                {
                    @Html.Partial("_TabStripPartial")
                    @Html.Partial("_SerialKeresoPartial")

    //or this???
                    //@RenderPage("_TabStripPartial.cshtml")
                    //@RenderPage("_SerialKeresoPartial.cshtml")
                }

            </section>

        </div>

        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2015-@DateTime.Now.Year</p>
                </div>
            </div>
        </footer>
    </body>
    </html>

    Now as you can see, the site has a menu when user is not logged in with Login and Contact buttons only. After successful login
    the user get the additional menu items. The 'Featured' section is still there.

    I want to get the 2 serach result partial view and the account manage page to be shown on the same place. It's working when I only enable those 2 search partial view: at Javascript I fill one of them and clear the other. I hate this solution, do you have any other suggestion?

    The _TabStripPartial view contains @Html.Kendo().TabStrip() element and the _SerialKeresoPartial view contains a @Html.Kendo().Grid(Model) grid with local data binding. Both works.

    My questions:
    1 - is it possible to get independent pages (depending on the menu selection) to body with removing the Featured section (I only want to see this section when the user hasn't made any interaction yet)
    2 - is it possible to embed AutoComplete in Menu without that Javascript solution?
    3 - after selecting item in either the first Autocomplete or in the other, how can I show those partial view in body and only the selected partial view, not both.
    4 - if I add this Action("Index","Manage") after the account menu item, the site crashes at the first @Html.Partial part because of invalid operation (account management uses different model that this tabstrip partial view). How can I create more pages (including this account management) and show them on the same place in body?

    Thanks

    Attila

  2. Nencho
    Admin
    Nencho avatar
    1736 posts

    Posted 01 Nov 2017 Link to this post

    Hello Attila,

    Regarding your first question - you can set the Action of the MenuItems, pointing to the needed controller and action that should return the needed partialView. Then you can subscribe for the click event of the Menu, in order to initiate an ajax request to the controller method and inject the html of the partialVie to a container in your body:

    <script>
        $(document).ready(function (e) {
            $("ul.k-menu li.k-item a.k-link").click(function (event) {
                // Prevent default event handling for the menu items
                event.preventDefault();
            });
        })
     
        function onSelect(e) {
            var url = $(e.item.innerHTML).attr('href');
            // Call the controller action
            $.ajax({
                type: 'GET',
                url: url,
                success: function (response) {
                    // Update the content div
                    debugger
                    $('.content-wrapper').eq(1).html(response);
                }
            });
        }
     
    </script>

    children.Add().Text("Reports").Items(children2 =>
                       {
                           children2.Add().Text("Report 1").Action("MenuItem2", "Home");

    Regarding the AutoComplete - the demonstrated javascript is needed for the initialization of the widget, hence, this is the correct implementation in this scenario.

    As for your third and fourth question - you can use the approach specified in the first suggestion.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top