This is a migrated thread and some comments may be shown as answers.

HTTP Post request from Kendo MVC UI menu item

4 Answers 218 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 05 May 2013, 06:22 PM
Is is possible to specify a POST action when defining items in the Kendo MVC UI Menu?

For example, I would like to include a menu item for the user to logout, which is supported by the following controller action:
(AccountController)
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult LogOff()
{
_webSecurityService.Logout();
return RedirectToAction("Index", "Home");
}


(sample.cshtml)
@(Html.Kendo().Menu()
          .Name("menu")
          .Items(items =>
          {
                  items.Add().Text("Home").Action("Index", "Home");
                  //...
                  items.Add().Text(User.Identity.Name)
                  .Items(children =>
                  {
                         //...
                        // this results in a 404 error
                         children.Add().Text("Sign out").Action("LogOff", "Account");
                  });
 
        })
)

I'm trying to replicate the out-of-box MVC sample project that looks similar to this:
(_LoginStatus.cshtml)
<text>
        Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new {           @class = "username", title = "Manage" })!
        @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
            @Html.AntiForgeryToken()
            <a href="javascript:document.getElementById('logoutForm').submit()">Sign out</a>
        }
</text>



4 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 08 May 2013, 06:10 AM
Hello Brian,

The Menu widget is generating hyperlinks and hyperlinks are always performing GET requests. What you can do instead is to attach click handler which posts a form programatically like in the snippet you shared.
innerChildren.Add().Text("Bed Linen").HtmlAttributes(new { onclick="getElementById('logoutForm').submit()"});


Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 09 May 2013, 04:20 AM
Thanks Petur, that did the trick!

For others, my partial view looks like...
@(Html.Kendo().Menu()
          .Name("Menu")
          .Items(items =>
              {
                 items.Add().Text("Home").Action("Index", "Home");
                  // ... more menu items
                 items.Add().Text(User.Identity.Name)
                   .Items(children =>
                       {
                           children.Add().Text("Sign out").HtmlAttributes(new {onclick = "getElementById('logoutForm').submit()"});
                       });
              })
      )

@using (Html.BeginForm("LogOff", "Account", new {area = "" }, FormMethod.Post, new { id = "logoutForm"})) {
            @Html.AntiForgeryToken()
        }
0
Anthony
Top achievements
Rank 1
answered on 11 Aug 2013, 08:48 PM
I implemented the solution and it works well except that the log off link does not behave like a hyperlink, while the others do. i.e. this link does not have the hand cursor when I move my mouse over the link.
I even tried onmouseover = 'cursor:pointer' but it does not work.
Please advise.
0
Vladimir Iliev
Telerik team
answered on 14 Aug 2013, 06:40 AM
Hi Anthony,

Basically you can add custom CSS class to the menu item and use it to add your custom CSS styles:

innerChildren.Add().Text("Bed Linen").HtmlAttributes(new { onclick="getElementById('logoutForm').submit()", @class="yourCustomCSSClass"});
Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Menu
Asked by
Brian
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Brian
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or