HTTP Post request from Kendo MVC UI menu item

5 posts, 1 answers
  1. Brian
    Brian avatar
    2 posts
    Member since:
    Mar 2011

    Posted 05 May 2013 Link to this post

    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>



  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 May 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Brian
    Brian avatar
    2 posts
    Member since:
    Mar 2011

    Posted 08 May 2013 Link to this post

    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()
            }
  5. Anthony
    Anthony  avatar
    6 posts
    Member since:
    Aug 2013

    Posted 11 Aug 2013 Link to this post

    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.
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 Aug 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready