Asp.Net MVC：作为块元素的表单答案

【问题标题】：Asp.Net MVC: Forms being block elementsAsp.Net MVC：作为块元素的表单
【发布时间】：2010-11-03 05:14:47
【问题描述】：

就我所见，基本上不可能连续拥有多个表单。

上次更新

鉴于手机和大多数人的不可预测性浏览器呈现页面，我认为我必须使用多个按钮形式。从那以后对此不太满意感觉就像是针对 MVC 的 WebForms hack 但它对情况。制作复杂的用户界面移动设备在 WebForms 中很困难，在 MVC 中看起来更难。

我被重新介绍过的想法是每页有多个表单，以便您可以将按钮发布到不同的控制器。问题是表单是一个块元素，因此无法获得彼此相邻的按钮。（为什么它们是我想知道的块元素。）

现在这是主要问题，这是一个构建为可以在大多数带有浏览器的手机上查看的网站。它还有很多按钮，因为使用 iPhone 等触摸手机更容易点击按钮。浮动可能不会（不完全排除）是一种选择，因为浮动在手机上不是很可预测。正如我所见，内联有时有时不适用于浏览器。

从设计的角度来看，这是一个大问题，我希望有某种 MVC 方法可以创建一个可以工作的神奇按钮。

澄清：

我认为最好的表达方式是使用一些按钮作为链接。在 WebForms 版本中，有几个按钮基本上只是重定向。所以考虑到这一点：

假设我有三个按钮，但三个按钮都需要发布到不同的页面。这将建议 3 种不同的形式。不幸的是，这也意味着所有三个按钮现在都将显示为块元素。（即使这是导致这种情况的形式。）也许我应该问在 MVC 中是否有办法回发到同一个控制器以从那里重定向？重定向我已经完成了，所以这没什么大不了的。发布到控制器并根据我没有的值评估按钮，但这几乎就像尝试重新创建回发的 WebForms 功能。

Example http://www.eythere.com/images/eythere.jpg

从那张图片来看，前三个按钮只是对重定向的回发。

更新：

尝试过表格和浮动 div。表格不适用于 Razors 等小型手机，因为它们往往会忽略 TD，而只是在大的垂直列上制作。

尝试像这样的浮动 div：

<div >
  <form >
   <input type="submit" style="float:left;"/>
  </form>
  <form>
   <input type="submit" style="float:left;"/>
  </form>
  <form>
   <input type="submit" style="float:left;"/>
  </form>
 </div>

问题是它在两行中显示按钮（这很好），但同一行中的两个按钮没有垂直对齐。第二个差一点。几乎到了看起来像四强括号的程度。

可能必须与多个按钮一起使用表单。这似乎与 MVC 设计相矛盾，但我没有看到其他解决方法。

【问题讨论】：

我不明白真正的问题是什么......看起来像是对 html 而不是 asp.net mvc 的一些误解......你能举个例子说明你想做什么以及如何做没有按预期工作？

标签： html asp.net-mvc forms

【解决方案1】：

当您发布表单时，用于发布表单的按钮的名称属性将作为表单值发送。为每个按钮命名，然后检查表单集合（或 Asp.Net MVC 中介）中的按钮名称。

if(!String.IsNullOrEmpty(Request.Form["myButtonName"])) {
    //myButtonName has been pressed.
}

编辑：

问题是表单是一个块元素，因此无法访问彼此相邻的按钮。（为什么它们是我想知道的块元素。）

表单是块元素，因为如果它们是内联元素，那么在其中嵌套 p 和 div 之类的标签是无效的（这两个标签在构建表单时都很方便）。

【讨论】：

啊，作为块的形式现在是有意义的。谢谢你。

【解决方案2】：

如果我理解您的要求，那么抱歉没有这样的功能。您必须找到或创建自己的方法来识别客户端，然后输出正确的 HTML 代码和 CSS 以适应该设备。在代码的用户端找到解决方案可能会更好。你也许可以使用 display:inline;无论如何都要伪造按钮以充当内联元素。它应该适用于所有主流浏览器 (http://www.quirksmode.org/css/display.html)，这可能包括 iPhone 浏览器，因为它是基于 safari 的。

【讨论】：

是的，我有一种不好的感觉，唯一的出路就是开始搞乱显示值，但这可能是不可预测的。这就是生活。

【解决方案3】：

如果您能多解释一下您希望这些东西如何交互，这可能会有所帮助。也就是说，没有法律规定一个表单只能有一个提交按钮，并且，当提交时，可以确定单击了哪个按钮——按钮的名称/值（文本）出现在发布的数据中。具体如何处理取决于需要发生的事情以及您希望如何构建它，但您绝对可以为表单提供多个按钮。

--更新--

感谢您的澄清。我认为您最好的选择是使用普通链接并对其进行一些样式设置：

a.button { display: block; width: 100px; float: left; }

它们在 iTouches 和其他更现代的手机中应该是不错的大可点击的东西，并在旧的移动设备中很好地退化，因为真的没有什么东西可以做不支持链接的 HTML。

【讨论】：

是的，我可能不得不使用浮动，这有时会产生不可预测的结果，但我可能别无选择。
好吧，如果您想确定可预测的结果，这是允许使用表格进行布局的少数情况之一。另一个良好的优雅降级模型是将链接包装在浮动 LI 中，因为对于无法处理该级别 CSS 的设备，这应该下拉到项目符号菜单中。
您知道，由于移动网站对表格不满意，我完全忘记了表格。如果我不能使用浮点数和 div 让这个看起来正确，我可能不得不朝那个方向发展。有趣的第二个想法。
老实说——知道发生了什么的唯一方法是构建它并查看浏览器如何响应。它仍然是非常狂野的西部。有点像 90 年代后期的桌面浏览器。您在这里要避免的一件事是通过按钮和 HTTP POST 进行实际导航——移动往返非常宝贵，而 POST 然后重定向可以让您获得额外的导航。

【解决方案4】：

this might solve your problem

另一种解决方案：如果您可以使用 javascript，请对其进行 DIV 和 onclick 操作

就像 Jeff 在 SO 上所做的 [Votes] | [答案] | [查看次数]首页每个问题左侧的“按钮”

【讨论】：

链接不错，但由于速度原因，可能无法选择图片。
某些手机浏览器不允许使用 JavaScript，这可能是个问题。我想我搞砸了。

【解决方案5】：

使用 css 设置锚链接的样式，如按钮。这样您就可以摆脱无用的表单并保持可负担性和可点击性。

【讨论】：

Eh 内联链接不能像按钮一样被赋予特定的宽度。在链接中使用 div 会建议我需要浮动或内联。但是内联 div 也不能调整大小。
您不必设置宽度。你可以使用填充，不是吗？如果你想设置宽度，那么你有权使用表格:)
遗憾的是，剃须刀等手机不喜欢填充物。我认为这个故事的寓意是不要打扰电话网站:)

【解决方案6】：

我还没有尝试过，所以我不能说它是否有效，但你能不能把页面上的表单设置为“display:inline”？

【讨论】：

【解决方案7】：

如果您不从用户那里收集数据，那么它们看起来就像简单的链接。

【讨论】：

如果你的意思是它们基本上是链接，你是对的。然而，链接对于 iPhone/iTouch 之类的东西来说真的很痛苦。

【解决方案8】：

HTML 按钮不必在表单中。你可以有一个带有 javascript onclick 处理程序的按钮，它可以做任何你想做的事情，比如设置表单的操作并提交它，或者加载一个新文档。

<input type="button" value="Home"
  onclick="location.href='/index.php'" />
<input type="button" value="Rooms"
  onclick="var f=document.getElementById('myform');f.submit()" />
<input type="button" value="Create"
  onclick="var f=document.getElementById('myform');f.action='/create.php';f.submit()" />

然后可以以任何方式设置这些按钮的样式。

如果您的表单没有收集数据，那么您的所有按钮都可以像我的示例中的“主页”按钮一样。

【讨论】：

问题是，有些手机不挖掘javascript。我并没有超出针对不同手机的多个版本的网站，但我只是想看看我是否可以解决这个问题。