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

Question

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

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

当我模拟 Controller 以检索设置值时，这非常有效，但是，我就是不知道如何传递参数。

举个基本的例子，我的表单:

<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>

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

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

(而且...我发现很多文档都已过时...虽然我发现它适用于其他位，但是否仍在使用不显眼的 AJAX？)

Answer 1

您可以省略表单标记并将 AJAX 调用绑定(bind)到事件监听器。然后您可以随时发送和接收值。

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")
})