1

我有一个关于 jQuery Mobile 格式化以及如何<li>在列表视图中正确格式化的问题。Visual Studio 中移动应用程序的 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 方法（与最佳实践保持一致：注销：GET 或 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>标签的格式与上面的不同，以及我如何让它看起来像这篇文章顶部的那个？

4

1 回答 1

3

Unless you feel like creating your own custom CSS in that list item don't put the actual <form> inside of it because forms have their own default CSS. Instead keep the form somewhere outside the list item and put the button itself inside the list item

   <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()
    }
于 2013-10-03T18:11:47.820 回答