使用 HTML 在 MVC 中提交表单

Question

我有一个使用 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>

我的 objective 在这里，没有使用 Razor Html Helper 语法，是向服务器发送一个 post 请求，其中包含在下拉列表中选择的信息。

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

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

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

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

Answer 1

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

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

您需要做的是使用 "submit" 类型的输入，它将 post 将表单返回到表单标签中指定的操作，如下所示：

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

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

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

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

Answer 2

您目前正在全面使用 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

的视图

使用 HTML 在 MVC 中提交表单

Submit form in MVC using HTML

html

c#

forms

asp.net-mvc

post