HTTP Post request from Kendo MVC UI menu item

[Brian]

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>

[Petur Subev]

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

[Brian]

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()

        }

[Anthony]

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.

[Vladimir Iliev]

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