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';
        }
    }

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

  [HttpPost]
   public ActionResult MyForm (MyModel form)

如果我删除Type =＆＃34;按钮＆＃34;那么一切正常。并手动输入值，但这不是我想要做的。您的建议将不胜感激。

Answer 1

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

你可以尝试三件事。

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

我认为原因是根据W3C规范，<input type="button" />被描述为按钮，因此没有默认行为，如果需要，可以运行脚本（尽管他们推荐{{1}如果你想要更好的造型）

从W3C表单规范here开始，强调相关行

[..剪断..]



如果满足以下任何条件，则跳过此元素的以下子步骤：


field元素有一个datalist元素ancestor。

字段元素已停用。

字段元素是一个按钮，但它不是提交者。

field元素是一个输入元素，其type属性处于Checkbox状态，其checkness为false。

field元素是一个输入元素，其type属性处于单选按钮状态，其检查结果为false。

field元素不是type属性处于Image Button状态的input元素，而field元素不具有   指定了name属性，或者其name属性的值为空   字符串。

field元素是不使用插件的对象元素。



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

Html.TextBoxFor使用javascript设置值

1 个答案: