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>