Question

我有一个简单的html表单

<h1>Create Make</h1>


<form id="form1" method="post" action="api/SampleData/CreateMake"
  enctype="application/x-www-form-urlencoded">
 <div>
  <label for="id">Id</label>
 </div>
 <div>
 <input name="id" type="text" />
 </div>
 <div>
  <label for="name">Name</label>
 </div>
 <div>
  <input name="name" type="text" />
 </div>
 <div>
  <label for="abrv">Abrv</label>
  </div>
 <div>
  <input name="abrv" type="text" />
 </div>
 <div>
<input type="submit" value="Submit" />
</div>
</form>

根据我的理解，如果名称正确（应该正确），则应将信息自动转换为对象，并且在按下按钮时应调用控制器中的CreateMake方法。

这是控制器方法

    [ActionName("CreateMake")]
    [HttpPost]
    public IActionResult CreateMake(VehicleDto vehicle)
    {
        _vehicleService.InsertMake(vehicle);

        return Ok(vehicle);
    }

它应该带对象并运行insert方法，对吗？但是，按一下按钮就什么也没做，在chrome上检查控制台和网络，什么也没做。控制器方法也没有被调用。

控制器确实有一条路线

    [Route("api/[controller]")]
public class SampleDataController : Controller

Answer 1

已解决：如果要在angular中使用本机表单提交，则需要使用<form ngNoForm>

Answer 2

您的action属性看起来可疑。

action="api/SampleData/CreateMake"

这意味着表单会将其数据发布到当前页面URL下方的名为“ api / Sampledata / Createmake”的路径。

尝试以下相对行为：

action="/api/SampleData/CreateMake"

Answer 3

与其在表单中使用后期操作，不如将其与HTML帮助器结合使用。您可以使用引导程序将操作链接转换为按钮：

@Html.ActionLink("Submit", "CreateMake", "SampleData", null, new { @class = "btn btn-primary btn-large" })

您甚至可以在按钮内使用URL操作来指定正确的路由

<input type="submit" value="Submit" onclick="location.href=' Url.Action("CreateMake", "SampleData")'" />

这应确保调用controller方法。

另外，这不是问题的一部分，但作为建议，我建议通常使用更多的HTML Helper。使用MVC时，这被认为是最佳实践，它使您的代码更具可读性和可理解性。例如：

using (Html.BeginForm())
  {
    <label for="id">ID:</label>
     Html.TextBox("ID")
     //other componants

   <input type="submit" value="Submit" />    
  }

我希望这对您有所帮助，并且您可以解决问题，今天过得愉快。

表单不发布也不调用控制器方法

3 个答案: