使用 HTML 在 MVC 中提交表单答案

【问题标题】：Submit form in MVC using HTML使用 HTML 在 MVC 中提交表单
【发布时间】：2015-03-18 23:38:42
【问题描述】：

我有一个使用 MVC5 和 C# 的 Web 应用程序。在这个应用程序中，我有一个带有一个下拉列表和一个提交按钮的表单，如下所示：

<form class="form-horizontal" action="@Url.Action("AssignTemplate", "TemplateMapper")" method="post">
    <div class="control-group">
        <label class="control-label">Template:</label>
        <div class="controls">
            <select id="template">
                @foreach (KeyValuePair<int, string> entry in Model.templates)
                {
                    <option value="@entry.Key">@entry.Value</option>
                }
            </select>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <input type="button" class="btn btn-primary" value="Assign" onclick="location.href='@Url.Action("AssignTemplate", "TemplateMapper")'" />
        </div>
    </div>
</form>

我的目标是在不使用 Razor Html Helper 语法的情况下向服务器发送一个包含在下拉列表中选择的信息的发布请求。

为此，我有以下控制器代码：

public class TemplateMapperController : Controller
    {
        [HttpPost]
        public ActionResult AssignTemplate(int templateId)
        {
            return null;
        }
    }

但是，当我按下提交按钮时，我得到一个 404，未找到，即使该方法存在并且我在表单中声明它应该是一个 post 请求。

我错过了什么？我的控制器如何访问下拉列表中的信息？

【问题讨论】：

您的 AssignTemplate 方法应该接受包含 POST 中数据的模型，但我认为这不是问题，因为它不会导致 404。您能检查使用 Chrome 发布的内容吗督察？
如果您查看源代码，action 属性表示它也会提交什么？ 404会和位置有关，很可能路径不正确。
你为什么不想使用剃刀语法？
您已经在使用带有@Url.Action("AssignTemplate", "TemplateMapper") 的剃刀语法。此外，您的输入应该是submit 类型而不是button，并且没有对onclick 事件的任何函数调用。你的 ActionResult 应该返回一个 View
@chiapa：是的，除此之外。我的意思是我想避免 Html.BeginForm 和其他类似的助手。

标签： c# html asp.net-mvc forms post

【解决方案1】：

你目前正在使用 Razor 语法：

@Url.Action("AssignTemplate", "TemplateMapper")
@foreach（Model.templates 中的 KeyValuePair 条目）
@entry.Key

但你应该这样做：

查看：

<form class="form-horizontal" action="../TemplateMapper/AssignTemplate" method="post">
    <div class="control-group">
        <label class="control-label">Template:</label>
        <div class="controls">
            <select id="template" name="myDropDownList">
                @foreach (KeyValuePair<int, string> entry in Model.templates)
                {
                    <option value="@entry.Key">@entry.Value</option>
                }
            </select>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <input type="submit" class="btn btn-primary" value="Assign" />
        </div>
    </div>
</form>

控制器

public ActionResult AssignTemplate(string myDropDownList)
{
     return View();
}

假设你有一个名为AssignTemplate的视图

【讨论】：

为什么我需要控制器中的两个参数来访问下拉列表中的一个值？

【解决方案2】：

您用于提交的按钮将在您的控制器方法上执行 HTTP GET，因为它正在更改单击时的文档 url。

您的控制器方法被 [HttpPost] 属性限制为 HTTP POST，因此是 404。

您需要做的是使用“提交”类型的输入，它将表单回发到表单标记中指定的操作，如下所示：

<input type="submit" class="btn btn-primary" value="Assign"  />

这是向服务器提交表单数据的简单且适当的方式。

此外，您需要为 select 元素指定一个名称，以确保它的值绑定到控制器方法上的参数

<select id="template" name="templateId">

【讨论】：

这如何转化为控制器？
选择元素的名称用于构建表单提交，并且您的控制器方法具有类似名称的参数，因此 MVC 模型绑定器可以将选择的值分配给您的参数。