MVC＋EF+AJAX增删改查小白码项目

最新推荐文章于 2024-03-12 12:59:23 发布

灶水

最新推荐文章于 2024-03-12 12:59:23 发布

阅读量399

点赞数 1

分类专栏： MVC 文章标签： mvc ajax

本文链接：https://blog.csdn.net/qq_60521457/article/details/119149542

版权

MVC 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

SQLserver数据库：

USE [d2]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Student](
	[no] [int] NOT NULL,
	[name] [nvarchar](max) NOT NULL,
	[sex] [int] NOT NULL,
	[birsthday] [datetime] NOT NULL,
	[sclass] [nvarchar](max) NOT NULL,
 CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED 
(
	[no] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
INSERT [dbo].[Student] ([no], [name], [sex], [birsthday], [sclass]) VALUES (1, N'张三', 25, CAST(N'2018-12-12T00:00:00.000' AS DateTime), N'1809')
INSERT [dbo].[Student] ([no], [name], [sex], [birsthday], [sclass]) VALUES (2, N'李四', 25, CAST(N'2029-12-12T00:00:00.000' AS DateTime), N'2923')
INSERT [dbo].[Student] ([no], [name], [sex], [birsthday], [sclass]) VALUES (3, N'王五', 25, CAST(N'2018-12-13T00:00:00.000' AS DateTime), N'1804')
GO

1.进入vs，点击创建新项目，选择ASP.NET Web 应用程序(.NET Framework):

2. 输入项目名称，选择项目保存地址：

3.选择MVC项目：

4.项目创建成功，右键点击Ｍｏｄｅｌ文件夹：

5.点击添加—新建项：

6.选择数据—ADO.NET 实体数据模型：点击添加

7.选择来自数据库的EF设计器：点击下一步

8.点击新建连接:

9.输入服务器名".",选择数据库(这个点表示此电脑):

10.数据库连接起来之后,点击下一步(可以改名字):

11.选择实体框架(随便用那个版本):

12.选择自己在数据库中创建的表

13.添加成功

14.查看Web.config中，数据库连接是否连接成功

15.右键点击Controllers：创建新控制器

16.选择控制器

17.输入控制器名称：StudentController

18.使用EF查询所有数据：Index后台代码

        d2Entities dd = new d2Entities();
        /// <summary>
        /// 首页显示全部数据
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            return View(dd.Student.ToList());
        }

19.前台Index.cshtml代码


@{
    ViewBag.Title = "index";
}
@model IEnumerable<MVC_ajax.Models.Student>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <script>
        function cuowu() {
            $("#SearchDataList").html("查询有问题!");
        }
    </script>
</head>
<body>
    @using (Ajax.BeginForm("name", "Student", new AjaxOptions
    {
        UpdateTargetId = "SearchData",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "GET",
        OnFailure = "cuowu"
        
    }))
    {
        <input type="text" name="name" />
        <input type="submit" value="搜索" />
        <div id="SearchDataList"></div>}

</body>
</html>
<table border="1" class="table">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>时间</td>
        <td>班级</td>
        <td>图片</td>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.no</td>
            <td>@item.name</td>
            <td>@item.sex</td>
            <td>@item.birsthday</td>
            <td>@item.sclass</td>
            <td><img src="~/Images/@item.img" width="40" height="40"  /></td>
            <td>
                @Html.ActionLink("详情", "GetStudent", new { id = item.no })
                @Html.ActionLink("修改", "UpdateStudent", new { id = item.no })
                @Html.ActionLink("删除", "Delete", new { id = item.no })

            </td>
        </tr>
    }
</table>

20.在StudentController.cs控制器中创建name方法后台代码（搜索）：name后台代码

//根据名称来搜索异步更新分布视图
        public ActionResult name(string name)
        {
            var StudentName = dd.Student.Where(s => s.name.Contains(name)).ToList();//通过name来查询数据
            return PartialView("name", StudentName);
        }

21.:name.cshtml前台代码：搜索框：根据name字段进行搜索（模糊）：


@{
    ViewBag.Title = "name";
}

@model IEnumerable<MVC_ajax.Models.Student>
<div id="SearchData">
    
        @if (Model.Count() == 0)
        {
    <p>暂无数据</p>
        }
        else
        {
    <table border="1" class="table">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>时间</td>
            <td>班级</td>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.no</td>
                <td>@item.name</td>
                <td>@item.sex</td>
                <td>@item.birsthday</td>
                <td>@item.sclass</td>
                <td>
                   
                    @Html.ActionLink("返回", "Index")
                </td>
            </tr>
        }
    </table>
        }
    
</div>

22.在StudentController.cs控制器中创建AddStudent方法进行新增：AddStudent.cshtml后台:

         /// <summary>
        /// 添加
        /// </summary>
        /// <returns></returns>
        //添加新增页面
        public ActionResult AddStudent()
        {
            return View();
        }
        /// <summary>
        /// 新增方法
        /// </summary>
        /// <param name="us"></param>
        /// <returns></returns>
        [HttpPost]
        
        public ActionResult AddStudent(Student us )
        {
            dd.Student.Add(us);
            dd.SaveChanges();
            return Content("0");
        }

23. AddStudent.cshtml前台:


@{
    ViewBag.Title = "AddStudent";
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddUser</title>

    <script src="~/Scripts/jquery-3.5.1.min.js"></script>

    <script>function AddStudent() {
            $.ajax({
                url: "/Student/AddStudent",
                type: "post",
                data: {
                    "no": $("#no").val(),
                    "name": $("#name").val(),
                    "sex": $("#sex").val(),
                    "birsthday": $("#birsthday").val(),
                    "sclass": $("#sclass").val()
                    
                },
                success: function (data) {
                    /*alert(111111)//有弹框*/
                    if (data == "0") {
                        alert("添加成功");
                        
                  } else {
                        alert("添加失败");
                    }
                }
            });
        }</script>
</head>
<body>
    <div>
        编号:
        @Html.TextBox("no")
    </div>
    <div>
        姓名:
        @Html.TextBox("name")
    </div>
    <div>
        年龄:
        @Html.TextBox("sex")
    </div>
    <div>
        时间:
        @Html.TextBox("birsthday")
    </div>
    <div>
        班级:
        @Html.TextBox("sclass")
    </div>
    <input type="submit" value="添加" onclick="AddStudent()" />|@Html.ActionLink("返回", "Index", "Student")
</body>
</html>

24.在StudentController.cs控制器中创建DeleteConfirmed方法进行删除,DeleteConfirmed.cshtml:后台代码

        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult Delete(int? id)
        {
            Student Student = dd.Student.Find(id);
            dd.Student.Remove(Student);
            dd.SaveChanges();
            return RedirectToAction("Index");
        }
        //删除方法
        // POST: Student/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Student Student = dd.Student.Find(id);
            dd.Student.Remove(Student);
            dd.SaveChanges();
            return RedirectToAction("Index");
        }

25. DeleteConfirmed.cshtml:前台


@{
    ViewBag.Title = "DeleteConfirmed";
}

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Delete</title>
</head>
<body>

    @using (Html.BeginForm())
    {

<input type="submit" value="删除" class="btn btn-default" />}
</body>
</html>

26.在StudentController.cs控制器中创建UpdateStudent（）方法进行修改：UpdateStudent.cshtml:后台代码

         int id = 0;
        // GET: Student
        /// <summary>
        /// 修改
        /// </summary>
        /// <returns></returns>
        public ActionResult UpdateStudent()
        {

            id = Convert.ToInt32(Request.Url.Segments[3]);
            //id = Convert.ToInt32(Request.QueryString["id"].ToString());
            Session["id"] = id;
            Student u = dd.Student.Find(id);
            ViewBag.Students = u;
            return View();
        }
        [HttpPost]
        public ActionResult UpdateStudent(Student Student)
        {
            if (Session["id"] != null)
            {
                int id = Convert.ToInt32(Session["id"]);

                Student u = dd.Student.Find(id);
                u.no = Student.no;
                u.name = Student.name;
                u.birsthday = Student.birsthday;
                u.sclass = Student.sclass;
                dd.Entry(u).State = EntityState.Modified;
                dd.SaveChanges();
            }
            return Content("修改成功");
        }

27.UpdateStudent.cshtml:前台代码


@{
    ViewBag.Title = "UpdateStudent";
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UpdateStudent</title>
    <script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <script>function UpdateStudent() {
            $.ajax({
                url: "/Student/UpdateStudent",//修改视图的路径
                type: "post",//提交方法
                data: {//下列是各种需要使用的列名
                    "no": $("#no").val(),
                    "name": $("#name").val(),
                    "sex": $("#sex").val(),
                    "birsthday": $("#birsthday").val(),
                    "sclass": $("#sclass").val()
                },
                success: function(data) {
                    if (data == "修改成功") {
                        alert("修改成功");
                    } else {
                        alert("修改失败");
                    }
                }
            });
        }</script>
</head>
<body>
    <div>
        <div>
            编号:
            @Html.TextBox("no", (ViewBag.Students as MVC_ajax.Models.Student).no)
        </div>
        <div>
            姓名:
            @Html.TextBox("name", (ViewBag.Students as MVC_ajax.Models.Student).name)
        </div>
        <div>
            年龄:
            @Html.TextBox("sex", (ViewBag.Students as MVC_ajax.Models.Student).sex)
        </div>
        <div>
            时间:
            @Html.TextBox("birsthday", (ViewBag.Students as MVC_ajax.Models.Student).birsthday)
        </div>
        <div>
            班级:
            @Html.TextBox("sclass", (ViewBag.Students as MVC_ajax.Models.Student).sclass)
        </div>
        <input type="submit" value="修改" onclick="UpdateStudent()" />|@Html.ActionLink("返回", "Index", "Student")
    </div>
</body>
</html>

28.效果：

灶水

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
MVC＋EF+AJAX增删改查小白码项目

1.进入vs，点击创建新项目，选择ASP.NET Web 应用程序(.NET Framework):2. 输入项目名称，选择项目保存地址：3.选择MVC项目：4.项目创建成功，右键点击Ｍｏｄｅｌ文件夹：5.点击添加—新建项：6.选择数据—ADO.NET 实体数据模型：点击添加7.选择来自数据库的EF设计器：点击下一步8.点击新建连接:9.输入服务器名".",选择数据库(这个点表示此电脑):10.数据库连接起来之后,点...
复制链接

扫一扫