在jQuery Mobile中格式化列表项以获取POST链接

Question

我对jQuery Mobile格式有疑问，以及如何在列表视图中正确格式化<li>。 Visual Studio中的Mobile应用程序的MVC 4默认模板具有注销链接，该链接使用GET调用进行注销。这是标记：

<ul data-role="listview" data-inset="true">
    <li>@Html.ActionLink("Change password", "ChangePassword")</li>
    <li>@Html.ActionLink("Log off", "LogOff")</li>
</ul>

这是电话：

// GET: /Account/LogOff
public ActionResult LogOff()
{
    FormsAuthentication.SignOut();
    return RedirectToAction("Index", "Home");
}

使用jQuery Mobile，它看起来像这样：

相比之下，Internet应用程序的MVC 4默认模板使用POST方法进行相同的注销：

@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = 
"logoutForm" })) {@Html.AntiForgeryToken()
<a ref="javascript:document.getElementById('logoutForm').submit()">Log off</a>}

我想要做的是在我的移动应用程序中使用POST方法注销而不是默认的GET方法（与最佳实践保持一致：Logout: GET or POST?）。我可以让链接正常工作，但我遇到的问题是让按钮看起来就像使用GET方法时那样。

我的标记看起来像这样：

<ul data-role="listview" data-inset="true">
<li>@Html.ActionLink("Change password", "ChangePassword")</li>
<li>@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{@Html.AntiForgeryToken()
 <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>}
   </li>
</ul>

但结果如下：

我已经尝试将<li>标记放在<a>标记周围，但结果不是更好：

有人可以解释为什么这个<li>标记的格式与上面标记的格式不同，以及我如何将其看作是此帖子顶部的标记？

Answer 1

除非您想在该列表项中创建自己的自定义CSS，否则不要将实际的<form>放在其中，因为表单具有自己的默认CSS。而是将表单保​​留在列表项之外的某个位置，并将按钮本身放在列表项

中

   <ul data-role="listview" data-inset="true">
    <li>@Html.ActionLink("Change password", "ChangePassword")</li>
    <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>

    @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
    {
      @Html.AntiForgeryToken()
    }