ASP.NET MVC Open Window from Menu Item Click by Using Ajax

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Environment

Product	Telerik UI for ASP.NET MVC Menu
Product Version	Created with version 2024.4.1112

Description

How can I use a Telerik UI for ASP.NET MVC Menu item click to open a Telerik UI for ASP.NET MVC Window?

Solution

Declare the Menu component.
Handle the Select event of the Menu.
In the event handler, get the id attribute of the current item.
Conditionally check if the id is the expected one (openWindow).
Implement an Ajax request to an Action Method, which is specified in the Menu item.
In the Action Method, return a Partial View with the Window.

Razor
    @{Html.Kendo().Menu()
          .Orientation(MenuOrientation.Horizontal)
          .Name("applicationMenu")
          .Items(menu => menu.Add().Text("Home").Items(homeMenu =>
              {
                  homeMenu.Add().Text("Show Window").Action("RenderWindow", "Home").HtmlAttributes(new { id = "openWindow" });
              }))
          .Events(e => e.Select("onSelect"))
          .Render();
    }
JavaScript
    <script type="text/javascript">
        function onSelect(e) {
    
            var itemId = $(e.item).attr("id");
    
            // Check if the menu item it the one, which must request the Partial View with the Window.
            if (itemId == "openWindow") {
                var url = $(e.item).find("a").attr("href");
                // Stop the link from redirecting to another page.
                e.preventDefault();
                // Request the Partial View with the Window.
                $.ajax({
                    url: url,
                    success: function (data) {
                        $("#main").append(data);
                    }
                });
            }
        }
    </script>
C#
    public IActionResult Index()
    {
        return View();
    }
    public ActionResult RenderWindow()
    {
        return PartialView("ShowWindow");
    }
PartialView
    <script type="text/javascript">
    	 // Destroy the Window after close to allow the opening of multiple Windows.
    	 function onClose(e) {
    		 itemForDelete = $(this.element);
    		 this.destroy();
    		 itemForDelete.remove();
    	 }
    </script>



    @(Html.Kendo()
    		.Window()
    		.Name("window")
    		.Title("My Window Title")
    		.Content(@<text>This is the content of a window, opened with ajax.</text>)
    		.Modal(true)
    		.Actions(a => a.Close())
    		.Draggable()
    		.Resizable()
    		.Width(400)
    		.Height(300)
    		.Events(e => e.Close("onClose"))
    )

For the complete implementation of the suggested approach, refer to the ASP.NET MVC project on how to open a Window when a specified Menu item is clicked.

Open Window from Menu Item Click by Using Ajax

Environment

Description

Solution

More ASP.NET MVC Menu Resources

See Also