Как создать одностраничную форму поиска с помощью ajax в MVC Razor

Question

Я новичок в MVC / Razor ... В основном у меня есть 2 страницы только для того, чтобы показать результат поиска из API, который я использую с Json.

Index.cshtml:(Просто форма)

@model ConsultaInterna.Models.SearchApi

<div class="jumbotron">
<h2>Consulta Interna</h2>
Placa
@using (Html.BeginForm("Search", "Home"))
{
    <input asp-for="Model.Name" class="form-control" name="name" id="txtName" />
    <input class="form-control" type="submit" id="ok" />
}

и Search.cshtml (которые также имеют форму. Я хочу оставить только эту страницу, прямо сейчас я не могу, потому что, если я загружаю напрямуюиз Search.cshtml выдает ошибку типа

"При анализе значения обнаружен неожиданный символ: <. Path '', строка 0, позиция 0." (Очевидно, потому что я пытаюсь загрузить метки с нулемsearch) </p>

это Search.cshtml

@model ConsultaInterna.Models.SearchApi

<div id="loader" class="spinner" style="display:none">OIE</div>

<div class="header formPesquisa">
@using (Ajax.BeginForm("Search", new AjaxOptions()
{
    HttpMethod = "POST",
    LoadingElementId = "loader",
    UpdateTargetId = "resultado"

}))
{
    <input placeholder="Placa" asp-for="Model.Name"  name="name" id="txtName" width="30" />

    <input class="pesquisa" type="submit" id="enviar" value="Ok" />
}

<div class="panel">Placa @Model.Name</div>
<div class="panel">Last Name / Model.LastName</div>

ТАКЖЕ Важно, форма Ajax не работает должным образом ... загрузчик не будетпоказать вверх.

Answer 1

1. Вам нужно переместить ваш загрузчик div в Ajax.BeginForm.

2. Вам также нужно добавить resultado div для отображения вашего результата.

   @using (Ajax.BeginForm("Search", "Home", new AjaxOptions()
   {
       HttpMethod = "POST",
       LoadingElementId = "loader",
       UpdateTargetId = "resultado"
   
   }))
   {
       <div id="loader" class="spinner" style="display:none">OIE</div>
       <input placeholder="Placa" asp-for="Model.Placa" class="pesquisa placa" maxlength="7" name="placa" id="txtPlaca" width="30" />
       <input placeholder="CPF" asp-for="Model.CPF" class="pesquisa cpf" maxlength="11" name="cpf" id="txtCPF" />
       <input class="pesquisa" type="submit" id="enviar" value="Enviar" />
       <div id="resultado"></div>
   }
   
       <div class="panel">Placa @Model.Name</div>
       <div class="panel">Last Name / Model.LastName</div>
   </div>
   

Вам также необходимо убедиться, что вы добавили соответствующую ссылку на конкретную ненавязчивую библиотеку ajax.В качестве примера:

BundleConfig

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  "~/Scripts/jquery.unobtrusive-ajax.min.js",
  "~/Scripts/jquery.validate*"));

_layout.cshtml

@Scripts.Render("~/bundles/jqueryval")

Пример действия контроллера

[HttpPost]
public ActionResult Search(string placa, string cpf)
{
    return new JsonResult { Data = "found", JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}