[原创]Asp.net MVC 学习之路-003(增删改查,后端手工,前端生成)

简介: [原创]Asp.net MVC 学习之路-003(增删改查,后端手工,前端生成)

Asp.net Mvc实现增删改查


1, 创建数据库


可参考我写的EntityFramework实现过程:http://www.jianshu.com/nb/10166743

基于EF-ModelFirst思想在项目models文件夹下新建一个ADO.NET实体数据模型,完成实体和关系的建立,并生成数据库。


image.png


2,新建控制器

新建StudentController

一般index页面用来展示列表

using System.Web;
using System.Web.Mvc;
using MVCFirstDemo.Models;
namespace MVCFirstDemo.Controllers
{
    public class StudentController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}


在index方法上右击鼠标选择添加视图

模板选择List,模型类选择Student,上下文选择你自己的上下文(你的上下文类名)。


image.png

自动生成:Views/Student/Index.cshtml



将查询结果作为集合通过ViewData.Model传到前端

#region 学生列表
        public ActionResult Index()
        {
            ViewData.Model = dbContext.StudentSet.AsEnumerable();//将查询结果作为集合通过ViewData.Model传到前端
            return View();
        }
#endregion


前端将通过foreach遍历集合中的每个对象进行展示,具体可查看自动生成的代码。~/Views/Student/Index.cshtml

当前页面(可先手动在数据库添加一些数据):


image.png


在StudentController中添加方法

#region Create
        public ActionResult Create()
        {
            return View();
        }


通过Create这个方法新建页面,方法同“查”。

当前页面:


image.png



加下来的问题是如何将前端的数据传到后台,并在后台将数据保存到数据库。

点击Create之后,系统会默认地去Controller中查找同名的Action进行处理(从哪来,回哪去),所以此时对Create方法进行重载,并且限制只有是HttpPost的时候进行响应。

[HttpPost]
        public ActionResult Create(Student student) //从前端获取对象
        {
            dbContext.StudentSet.Add(student);
            dbContext.SaveChanges();
            return RedirectToAction("index");//返回index页面,即list页面
        }



此时点击Edit

image.png



程序跳到另一个页面,你们的程序会报错,因为StudentController下面还没有Edit方法,但是此时我们关注的对象是URL地址,通过URL地址我们可以看出index页面是向Edit页面传递了一个id,所以我们的Edit页面可以通过这个id来获取这个id对应的在数据库中的值并进行展示。之后再进行更改。


image.png


在StudentController下面新建Edit方法

public ActionResult Edit(int id)
        {
            //ViewData.Model = dbContext.StudentSet.FirstOrDefault(u => u.Id == id);
            ViewData.Model = dbContext.StudentSet.Find(id);//将查询结果通过ViewData.Model传到前端
            return View();
        }


现在点击Edit之后已经能够在Edit页面对数据进行展示了,接下来的问题是如何将用户更改后的数据同步到数据库。


思想同Create,从哪来,到哪去。

[HttpPost]
        public ActionResult Edit(Student student)
        {
            dbContext.Entry(student).State = System.Data.Entity.EntityState.Modified;
            dbContext.SaveChanges();
            return RedirectToAction("Index");
            //连接到其他控制器下的方法  return RedirectToAction("Index","Home");
            //使用这个方法会报错  return Redirect("index");
        }

Delete  &  Details

#region Details
        public ActionResult Details(int id)
        {
            ViewData.Model = dbContext.StudentSet.Find(id);
            return View();
        }
        #endregion
        #region Delete
        public ActionResult Delete(int id)
        {
            ViewData.Model = dbContext.StudentSet.Find(id);
            return View();
        }
        [HttpPost]
        public ActionResult Delete(Student student)
        {
            dbContext.Entry(student).State = System.Data.Entity.EntityState.Deleted;
            dbContext.SaveChanges();
            return RedirectToAction("Index");
        }
        #endregion


至此Asp.net Mvc的增删改查已全部实现。

项目完整代码:链接:http://pan.baidu.com/s/1i431ra1 密码:5kjh

相关文章
|
21天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
9天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
10天前
|
移动开发 前端开发 应用服务中间件
挂售转卖竞拍商城系统源码/竞拍系统/转拍闪拍系统/后端PHP+前端UNiapp源码
挂售转卖竞拍商城系统源码/竞拍系统/转拍闪拍系统/后端PHP+前端UNiapp源码 亲测可用
16 1
|
11天前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
18天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
34 6
|
20天前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
17 1
|
3天前
|
前端开发
后端一次返回大量数据,前端做分页处理
后端一次返回大量数据,前端做分页处理
6 0
|
25天前
|
中间件 Go
go语言后端开发学习(三)——基于validator包实现接口校验
go语言后端开发学习(三)——基于validator包实现接口校验
|
6天前
|
前端开发 JavaScript Java
开发做前端好还是后端好?
开发做前端好还是后端好?
|
8天前
|
前端开发
若依部署,部署常见流程之先部署网页的后端系统,让自己的前端能够看到内容,先部署后端,让前端在本地跑起来-----吃饱了撑死了大佬建议,正确的部署流程
若依部署,部署常见流程之先部署网页的后端系统,让自己的前端能够看到内容,先部署后端,让前端在本地跑起来-----吃饱了撑死了大佬建议,正确的部署流程