是否可以通过 ASP.Net Core 中不显眼的 AJAX 将参数/单个表单元素传递给控制器​​？

Question

我有一个 ASP.Net Core MVC 应用程序，我需要在单击时更新某些元素。例如，创建一个搜索现有地址的人员表单。

我知道我不能使用嵌套表单，但是，通过 3 天的 MVC 知识回顾，我想到了不显眼的 Javascript，然后从结果中运行一个脚本来更新主表单。

当我模拟控制器以检索设定值时，这很有效，但是，我就是不知道如何传递参数。

举个基本的例子，我的表格：

<form>
----
xxxx LOADS OF FORM ELEMENTS xxxx
----
Address:
<input type="text" name="address">
<a href="" data-ajax="true" data-ajax-url="LoadAddress" data-ajax-update="#test" data-ajax-mode="after" data-ajax-complete="changeid">LoadAddress</a>
</form>

现在，在这一点上 - 通过让我的控制器简单地返回 1，它运行良好......但是，我真的想先将输入传递给控制器​​。

有没有办法拦截请求并传递地址字段的数据，或者，我应该放弃使用不显眼的 AJAX 的想法并做一些更原生的事情吗？

（而且...我发现太多文档已经过时...虽然我发现它适用于其他位，但仍然使用不显眼的 AJAX 吗？）

Answer 1

您可以省略表单标签并将您的 AJAX 调用绑定到事件侦听器。然后，您可以随时发送和接收值。

HTML

<input type="text" name="address" id="address">
<button id="submit">submit the form</button>

JS

let field = document.querySelector("#address")
let btn = document.querySelector("#button")

field.addEventListener("change", (e)=> {
    fetch(`http://yourapi.com/search?address=${e.target.value}`)
      .then(res => {
        console.log("search result was returned")
      })
})


btn.addEventListener("click", (e)=> {
   console.log("use fetch to submit the form here")
})