Articles in this section
Category / Section

how to call controller action from menu item click and pass info to the action, like current object and Id in ASP .Net Core.

2 mins read

In ASP.NET Core, one can call a controller action with an additional parameter, such as the current object ID and object, from a menu item using the select event. This can be achieved by retrieving the selected item and then making an AJAX call to pass the menu item object or ID to the controller. An example is provided below.

 

[Index.cshtml]:

 
<div class="menu-control">
    <ejs-menu id="menu" items="menuItems" select="onSelect"></ejs-menu>
</div>
 
<script>
    function onSelect(args) {
        var value = { Id: args.item.id, Text: args.item.text };
        var ajax = new ej.base.Ajax({
            url: "@Url.Action("GetRedirectUrl", "home")",
            data: JSON.stringify(value),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: "json"
        });
        ajax.send().then(function (response) {
            window.location.href = response.redirectToUrl;
        }).catch(function () {
        });
    }
</script>
 

 

Output screenshot:

main page

 

Once the values have been obtained from the AJAX call, they can be passed to other pages by using the "redirectToUrl" function to redirect to the appropriate URL. An example is provided below.

 

[HomeController.cs]:

public class HomeController : Controller
    {
 
        public IActionResult Index()
        {
            return View();
        }
 
        [HttpPost]
        public IActionResult GetRedirectUrl([FromBody] MenuItem value)
        {
            return Json(new { redirectToUrl = Url.Action(value.Text, "Home", new { Id = value.Id }) });
        }
 
        public IActionResult Open(MenuItem item)
        {
            return View(item);
        }
        public IActionResult Save(MenuItem item)
        {
            return View(item);
        }
}

 

 

Please find the below code snippets to define the MenuItem class in Models.

 

[ErrorViewModel.cs]:

public class MenuItem
    {
        public string Id { get; set; }
 
        public string Text { get; set; }
    }

 

When a user clicks on a menu item, the page is loaded via the controller with the passed ID value.

 

[Open.cshtml]:

@model CoreWebApp.Models.MenuItem
 
<h2>Open item is clicked</h2>
<br/>
<h3>Selected Id: @Model.Id</h3>

 

Output screenshot:

open page

 

[Save.cshtml]:

@model CoreWebApp.Models.MenuItem
 
<h2>Save item is clicked</h2>
<br/>
<h3>Selected Id: @Model.Id</h3>

 

Output screenshot:

save page

 

 

View Sample in GitHub

 

Refer to our documentation and online samples for more features. If you have any queries, please let us know in the comments below. You can also contact us through our Support forum or Support ticket. We are happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied