1. 程式人生 > >Ajax非同步表單簡單實現收索功能

Ajax非同步表單簡單實現收索功能

非同步收索的作用簡單來說就是:在不更新整個網頁的情況下更新你想改變的網頁某個部分。

 


下面是實現:

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