1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Having a Nightmare trying to figure out how to add a call to an action method..

Having a Nightmare trying to figure out how to add a call to an action method..

Hi, 

Is there anyway to implement a call to a controller and action method from a script.. 

As below... My page renders the content but im struggling to find how to call an actionmethod when clicking on my dropdown selection..

<script>
    new ejs.navigations.Menu({
        "cssClass": "dock-menu",
        "items": [
            {
                "text": "Account",
                "items": [
                    {
                        "text": "Profile"
                        
                    },
                    {
                        "text": "Sign out"
                    }
                ]
            }
        ]
    }).appendTo("#horizontal-menubar");
    new ejs.navigations.Menu({
        "cssClass": "dock-menu",
        "items": [
            {
                "text": "My Applications",
                "iconCss": "icon-user icon",
                "items": [
                    {
                        "text": "Applications"
                        
                       
                    },
                    {
                        "text": "Reports"
                    }

                ]
            },
            {
                "text": "App Store",
                "iconCss": "icon-bell-alt icon",
                "items": [
                    {
                        "text": "Applications"
                    },
                    {
                        "text": "Reports (Coming Soon!)"
                    }

                ]
            },
            {
                "text": "Settings",
                "iconCss": "icon-tag icon",
                "items": [
                    {
                        "text": "Ideas?"
                    },
                    {
                        "text": "BLAH"
                    },
                    {
                        "text": "BLAH"
                    }
                ]
            },
            {
                "text": "Admin",
                "iconCss": "icon-comment-inv-alt2 icon",
                "items": [
                    {
                        "text": "Category1 "
                    },
                    {
                        "text": "Category2"
                    },
                    {
                        "text": "Category3"
                    }
                ]
            }
 "orientation": "Vertical"
    }).appendTo("#main-menubar");
    new ejs.navigations.Sidebar({
        "dockSize": "50px",
        "enableDock": true,
        "target": ".main-content",
        "width": "220px",
        "zIndex": 1000.0
    }).appendTo("#sidebar-menu");
</script>

7 Replies 1 reply marked as answer
SD Saranya Dhayalan Syncfusion Team June 10, 2020 02:36 PM UTC

Hi Dom, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported query, you can achieve this by using ajax post in the button click event. In this you can pass your data. Please find the below code snippet: 
 
 
<button class="e-btn" id="btn">Save Json</button> 
<script type="text/javascript"> 
 
 
    document.getElementById('btn').onclick = function () { 
        $.ajax({ 
            type: "POST", 
            data: { Data: Data }, 
            url: "/Home/Menu", 
            success: function (data) { 
                console.log("success") 
            } 
        }); 
    } 
 
 
Could you please check the above code snippet and let us know whether this is fulfilling your requirement? 
 
Regards, 
Saranya D 
 


Marked as answer
DI Dingo June 10, 2020 03:21 PM UTC

Thank you for the response Saranya, i am new to all of this..

I copied your HTML with the developer tools, but unsure how to make the buttons on the left clickable..

Where you see the <Script> tag, i can change the navigation names and child names but unsure on how
to actually make them into clickable buttons with the ability to add an event to goto a specific controller/Action..

Can you point me in the correct direction. Many thanks.
                







SD Saranya Dhayalan Syncfusion Team June 11, 2020 09:37 AM UTC

Hi Dom, 
 
We have checked your query, you can achieve this in menu Selected event. Please find the below code snippet: 
 
 
<div class="control-section"> 
        <div class="menu-control"> 
            @Html.EJS().Menu("menu").Items(ViewBag.menuItems).Select("selected").Render() 
        </div> 
    </div> 
    <script> 
 
 
        function selected(input) { 
            $.ajax({ 
                type: "POST", 
                data: { Data: Data }, 
                url: "/Home/Menu", 
                success: function (data) { 
                    console.log("success") 
                } 
            });  
        } 
         
    </script> 
 
Could you please check the above code snippet and let us know whether this is fulfilling your requirement?  
  
Regards,  
Saranya D  


DI Dingo June 11, 2020 03:59 PM UTC

Hi No, that didn't work.. Do you have a fully working solution with the same sidebar as above? its driving me crazy.

Regards

SD Saranya Dhayalan Syncfusion Team June 12, 2020 07:40 AM UTC

Hi Dom,  
 
We have checked your reported your query, we have prepared a sample in menu bar. You can pass the selected item to controller side. Please find the below sample and vide link 
 
 
Please check and get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


DI Dingo June 12, 2020 09:22 AM UTC

Thank you again for your response and the example is very useful but it was the sidebar that im having issues with i.e



Do you have example for above.. Many thanks. It is the sidebar example i am after not the menu. Thanks.

I can't seem to be able to pass in my viewbag.menuitem. as the @html.ejs().sidebar does not accept Items.

The buttons on the left are not clickable or the child items

SD Saranya Dhayalan Syncfusion Team June 15, 2020 08:10 AM UTC

Hi Dom,   
  
We have checked your reported your query, we have prepared a sample in menu in sidebar component. You can pass the selected item to controller side. Please find the below sample and link  
 
Please check and get back to us if you need further assistance on this.  
  
Regards,  
Saranya D  


Loader.
Up arrow icon