Можно ли передать элемент / элемент формы в контроллер через ненавязчивый AJAX в ASP.Net Core? - PullRequest
Новая
       31

Можно ли передать элемент / элемент формы в контроллер через ненавязчивый AJAX в ASP.Net Core?

0 голосов
/ 17 февраля 2019

У меня есть приложение ASP.Net Core MVC, и мне нужно обновить некоторые элементы одним щелчком мыши.Например, создать форму человека, которая ищет существующий адрес.

Я знаю, что не могу использовать вложенные формы. Однако, возвращаясь к своим знаниям из MVC за 3 дня, я подумал о ненавязчивом 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?)

1 Ответ

0 голосов
/ 17 февраля 2019

Вы можете не указывать тег формы и связывать вызовы 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")
})
...