Html.TextBoxFor 使用 javascript 设置值

Question

我正在尝试将 TextBoxFor 作为表单中的切换按钮，将类型更改为按钮如下：

@using (Html.BeginForm("MyForm", "Home"))
       { 
     @Html.TextBoxFor(model => model.BothProjections1, new {@type = "button", @onclick = "changeButton('BothProjections1')",@style = "background-color: #FFFFFF; font-size: 10px; padding: 1px; width: 18px;" })
}

使用下面的javaScript来改变值和背景颜色：

function changeButton(id) {
        var button = document.getElementById(id);
        if (button.value == "") {
            button.value = "1";
            button.style.backgroundColor = 'red';
            button.style.color = 'Black';
        }
        else if (button.value == "1") {
            button.value = "2";
            button.style.backgroundColor = 'cyan';
            button.style.color = 'Black';
        }
        else if (button.value == "2") {
            button.value = "3";
            button.style.backgroundColor = 'yellow';
            button.style.color = 'Black';
        }
        else if (button.value == "3") {
            button.value = "";
            button.style.backgroundColor = 'white';
            button.style.color = 'white';
        }
    }

屏幕上的值会发生变化，但是当我在控制器中通过检查表单的值来调试它时它是空的！

  [HttpPost]
   public ActionResult MyForm (MyModel form)

如果我删除 Type="button" 并手动输入值，一切正常，但这不是我想要做的。您的建议将不胜感激。

Answer 1

经过一些测试，<input type="button" /> 元素似乎没有在标准表单帖子中发布它们的值。

你可以尝试三件事。

• 使用 AJAX 发布表单并手动将按钮中的值添加到 AJAX 请求
• <input type="submit" /> 确实通过表单发布获得其值，所以 也许尝试输入提交而不是输入按钮。当然，它们的行为与按钮稍有不同（即它们提交表单）。这意味着您可能需要稍微改变您的行为，因为您可能无法单击它们并发布表单。此外，如果他们用于提交表单，他们只会提交那里的价值。如果你只有一个不是问题，但如果你有两个或更多，只有被点击的那个值会发布它的值，其他的不会发布他们的值。在你的情况下，我认为这可能仍然可以，因为你似乎只改变了一个？！
• 您可以只使用文本框，将其设为只读（因此用户无法在其中输入，但您仍可以使用 javascript 更改其值）并将其设置为按钮样式

我认为这样做的原因是根据 W3C 规范，<input type="button" /> 被描述为一个按钮，因此没有默认行为，并且可以在需要时运行脚本（尽管如果您建议使用 <button>想要更好的造型）

来自 W3C Form spec here，相关行强调

[..snip..]

1. 如果满足以下任一条件，则跳过此元素的这些子步骤：

   • field 元素有一个 datalist 元素祖先。
   • 字段元素已禁用。
   • 字段元素是按钮，但不是提交者。
   • field元素是一个input元素，其type属性为Checkbox状态，checkedness为false。
   • field元素是一个input元素，其type属性为Radio Button状态，且checkedness为false。
   • field元素不是type属性为Image Button状态的input元素，或者field元素没有 指定的名称属性，或其名称属性的值为空 字符串。
   • 字段元素是一个未使用插件的对象元素。

否则，处理字段如下：[..snip..]