json - 如何在 MVC Razor 中使用 ajax 创建单页搜索表单

Question

我是 MVC / Razor 方面的初学者......基本上我有 2 个页面仅用于显示我正在使用 Json 的 API 的搜索结果。

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 加载它会给我一个错误，比如

“解析值时遇到意外字符：<。路径''，第 0 行，位置 0。”（显然是因为我正在尝试使用空搜索加载标签）

这是 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 表单无法正常工作......加载程序不会出现。

标签： jsonasp.net-mvcrazor

Answer 1

1. 您需要将加载程序 div 移动到Ajax.BeginForm.

2. 您还需要添加resultadodiv 以显示您的结果。

   @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 库。举个例子：

捆绑配置

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