AJAX輔助方法的非侵入式MVC3的jQuery擴展實現搜索功能

//前題是在MODEL有個Student模型

 

//在view視圖中搜索頁面

 

//引入腳本文件

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

 

//自己寫的腳本文件

<script src="@Url.Content("~/Scripts/MyScript/mvcStudent.js")" type="text/javascript"></script>

//自己寫的文件的代碼

function SeachFailed() {

    $("#Seach").html("沒有你要找的內容。。");

}

 

 

//form表單提交到Student控制器下的StudentSeach方法

@using(Ajax.BeginForm("StudentSeach","Student",new AjaxOptions{ InsertionMode=InsertionMode.Replace,HttpMethod="Get",OnFailure="SeachFailed",UpdateTargetId="Seach"}))

//OnFailure出錯時引發事件，UpdateTargetId更新的目標ID就是查詢出的數據在哪裏顯示

{

    <input id="Text1" type="text"  name="q" data-autocomplete-source="@Url.Action("QuickSeach","Student")"/><input id="Submit1" type="submit" value="搜索" />

 

    <div id="Seach">

     

    </div>

     

 }

 

 

//在控制器裏

 

        public ActionResult StudentSeach(string q)

        {

            //利用Linq查詢

            var stu = Dbcontext.Student.Include("Grade").Where(a => a.StudentName.Contains(q) || a.StudentSex.Contains(q));

            return PartialView("StudentSeach", stu);//返回一個分部視圖

        }

 

 

//在view視圖中搜索數據顯示頁面，這裏是一個分部視圖

 

@model IEnumerable< 程序集.Models.Student>

 

@using 程序集.Models

 

<table>

    <tr>

        <td>學生編號</td>

        <td>學生姓名</td>

        <td>學生年齡</td>

        <td>學生性別</td>

        <td>操作鏈接</td>

    </tr>

 

    @foreach (Student item in Model)

    {

        <tr>

           <td> @Html.DisplayFor(model => item.StudentId)</td>

           <td> @Html.DisplayFor(model => item.StudentName)</td>

           <td> @Html.DisplayFor(model => item.StudentAge)</td>

           <td> @Html.DisplayFor(model => item.StudentSex)</td>

           <td>

                @Html.ActionLink("編輯", "Edit", new { Id = item.StudentId })|

                @Html.ActionLink("詳細", "Details", new { id = item.StudentId })|

                @Html.ActionLink("刪除", "Delete", new { id = item.StudentId })

           </td>

        </tr>

    }

    </table>