Ajax非同步表單簡單實現收索功能
阿新 • • 發佈:2018-12-08
非同步收索的作用簡單來說就是:在不更新整個網頁的情況下更新你想改變的網頁某個部分。
下面是實現:
1.準備工作
在mvc5 中要用Ajax,首先要新增jQuery的Ajax檔案。方法:右擊專案--管理NuGet程式包--查詢jQuery--找到關於Ajax的,然後安裝。
2。 Index.頁面
@model IEnumerable<ajax非同步.Models.ajax> @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/Scripts/jquery-3.3.1.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> @using (Ajax.BeginForm("Indec","Home", //方法和控制器 new AjaxOptions //怎麼實現Ajax功能 { InsertionMode = InsertionMode.Replace, //覆蓋 HttpMethod = "Get", UpdateTargetId = "serch", //目標:id為search的元素 })) { <input type="text" name="idd" /> <input type="submit" name="submit" value="Find" /> } @*將要重新整理的頁面弄成partial頁面,否則會將整個頁面又放在這個地方*@ @Html.Partial("Index1",Model)
3.控制器
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ajax非同步.Models; namespace ajax非同步.Controllers { public class HomeController : Controller { // GET: Home private dbcontext db = new dbcontext(); public ActionResult Index( string idd) { if (Request.IsAjaxRequest()) //如果是Ajax請求,也就是點了查詢,那麼返回查詢的資料 { var people = from m in db.ajax where m.id.ToString() == idd select m; return PartialView("Index1", people);//返回要更新的partial頁面 } else//第一次不是Ajax請求,返回資料庫的全部資料 { return View(db.ajax.ToList()); } } } }
4,partial頁面
@model IEnumerable<ajax非同步.Models.ajax> <div id="serch"> <table border="1" class="tab-content"> <tr> <td>id </td> <td>name </td> </tr> @foreach (var item in Model) { <tr> <td>@Html.DisplayFor(c => item.id)</td> <td>@Html.DisplayFor(c => item.name)</td> </tr> } </table> </div>
實現的方式很簡單 主要就是Ajax輔助方法 然後安裝要用的jQuery檔案 最後把要更新的部分設定為partial頁面