AJAX辅助方法的非侵入式MVC3的jQuery扩展实现搜索功能

最新推荐文章于 2021-06-10 15:06:21 发布

原创最新推荐文章于 2021-06-10 15:06:21 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #AJAX #Ajax #jquery #jQuery #JQUERY #Jquery #JQuery #linq #LINQ #Linq #mvc #MVC

C# 同时被 2 个专栏收录

12 篇文章

订阅专栏

MVC3

4 篇文章

订阅专栏

本文介绍如何使用MVC架构实现Student模型的搜索功能，包括前端表单提交、后端查询处理以及分部视图展示结果。通过引入jQuery、Modernizr等库和自定义脚本文件，实现高效搜索体验。

//前题是在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>