Asp.Net MVC +EntityFramework主从表新增编辑操作的实现(删除操作怎么实现?)
Asp.Net MVC +EntityFramework主从表新增编辑操作的实现
对于MVC中同时对主从表的表单操作在网上现有的解决很少,而这样的操作在做业务系统中是经常为遇到的。我在网上搜索了很久都没有发现很完整的实例或非常好的解决方案,所以我很想和大家讨论一下又什么更好的解决方案。
一旦有更好的方式我会把它集成到模板中实现自动生成。所以很希望得到大家的帮助。在这里我先抛砖引玉了。
Demo代码在 https://github.com/neozhu/MVC5-Scaffolder 下载
先看一下我的Demo实例
实体类的结构
实现的操作界面如下图
功能:
查询页面上可以单击新增和编辑进行对数据维护
页面的结构是上部是维护表头,下部的Table是现实子表数据,对子表数据的维护使用bootstrap popup modal的方式操作。
具体实现
View层的代码
Index :查询Table List
Create :新增页面
Edit : 编辑页面
EditForm :Partial View内嵌在Create 和Edit页面中
_OrderDetailForm : pupup 子表维护表单页面
Create,和Edit页面通过Ajax Post 把数据提交到后台的Controller进行操作
代码如下
<script type="text/javascript">
var $orderdetailstable = {};
var ObjectState = "Added";
$(document).ready(function () {
$('#orders').submit(function () {
var actionurl = $(this).attr('action');
var orderdetails = $orderdetailstable.bootstrapTable('getData');
console.log(orderdetails);
var newitem = {
Id:0,
Customer: $('#Customer','#orders').val(),
ShippingAddress: $('#ShippingAddress', '#orders').val(),
OrderDate: $('#OrderDate', '#orders').val(),
ObjectState:ObjectState,
OrderDetails: orderdetails
};
console.log(newitem);
$.ajax({
url: actionurl,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(newitem),
success: function (result) {
self.location = "/Orders/Index";
//alert("success " + result.UserName);
},
error: function (result) {
alert("Failed");
}
});
return false;
});
});
</script>
通过Jquery 获取表头和表体数据 序列化成Json对象然后Post到后台
这里有个问题关于Josn 序列化的 所有的实体 Order都集成Entity这个基类,Entity有个枚举类型的字段 [ObjectState] 用了好多方法都没有办法把这个字段提交到后台,在Controller的Create,Edit 方法中的Order就是没有[ObjectState]这个字段的值;所以在Controller层还得写很多代码来修改实体状态
Controller层代码
这里就只贴Create方法的代码
// GET: Orders/Create
public ActionResult Create()
{
//Detail Models RelatedProperties
var orderRepository = _unitOfWork.Repository<Order>();
ViewBag.OrderId = new SelectList(orderRepository.Queryable(), "Id", "Customer");
var productRepository = _unitOfWork.Repository<Product>();
ViewBag.ProductId = new SelectList(productRepository.Queryable(), "Id", "Name");
return View();
}
// POST: Orders/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
//[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "OrderDetails,Id,Customer,ShippingAddress,OrderDate")] Order order)
{
if (ModelState.IsValid)
{
order.ObjectState = ObjectState.Added;
foreach (var detail in order.OrderDetails)
{
detail.ObjectState = ObjectState.Added;
if (detail.Product != null)
detail.Product.ObjectState = ObjectState.Detached;
}
_orderService.InsertOrUpdateGraph(order);
_unitOfWork.SaveChanges();
DisplaySuccessMessage("Has append a Order record");
//return RedirectToAction("Index");
return Json("{Status:Success}", JsonRequestBehavior.AllowGet);
}
DisplayErrorMessage();
return View(order);
}
因为没办法在前端把[ObjectState]这个字段的值序列化所以写了一个foreach来修改状态,不知道你们有没有什么好的解决方案
Popup Modal编辑子表数据代码
新增表体按钮
$('#neworderdetailbutton').on('click', function (e) {
if ($("form").valid()) {
var url="/Orders/CreateOrderDetail"
$.get(url , function (data) {
//console.log(data);
var index=-1;
$('#orderdetailformModal-body').html(data);
$('#rowindex').val(index);
$('#Id').val(0);
$('#orderdetailformModal').modal('toggle');
});
}
e.preventDefault();
//Return false regardless of validation to stop form submitting
//prior to ajax doing its thing
return false;
})
OrderController 添加一个新增表体和修改表体的Action用于生产对应的Partial View
我在这里也试过在OrderController中不添加对子表操作的Action,完全使用JS完成对行的操作,但在对编辑现有表体数据时出现了问题。后来注销掉了@*@Html.Partial("_OrderDetailForm")*@
现在还有非常棘手的问题就是如何进行删除操作,一旦在编辑状态下,把其中一个表体的记录删掉,删除后就没办法把数据提交到后台,而不删添加一个删除标志,这同样也会带来很多操作,如Table 在laod数据时还要把带删除标志的行筛选掉,又要添加好多代码
不知道你们是否有很好的解决方案
- Java多线程高并发学习笔记——阻塞队列
- 使用javascript+xml实现分页
- 使用OAuth打造webapi认证服务供自己的客户端使用
- 洛谷P3381 【模板】最小费用最大流(dijstra费用流)
- 使用OAuth打造webapi认证服务供自己的客户端使用(二)
- JavaScript基础1
- JavaScript实例-----反选
- 1303: [CQOI2009]中位数图
- 1050: [HAOI2006]旅行comf
- 某厂2016实习招聘安全技术试题答案及解析
- 3732: Network
- 洛谷P3388 【模板】割点(割顶)(tarjan求割点)
- 每天学一点Docker(3)(制作你的第一个容器)
- 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PostgreSQL 为什么接受大量连接到数据库需要连接池
- 一站式的开源持续测试平台---MeterSphere
- 《RabbitMQ》如何保证消息的可靠性
- Ruby 和 Java 的基础语法比较
- 聊聊面试-NoClassDefFoundError 和 ClassNotFoundException 区别
- 聊聊面试-int和Integer的区别
- 记一次Linux修改MySQL配置不生效的问题
- VBA解析复合文档03——解析扇区链表
- C++核心准则E.17:不要试图在所有函数中捕捉所有异常
- 《图解算法》第1章 算法简介
- 自动化篇 | 这些自动化场景,批处理脚本完全可以取代 Python!
- 《RabbitMQ》如何保证消息不被重复消费
- 算法篇:树之翻转树
- 每日一题 | 约瑟夫问题
- 编码的浪漫:完美序列化的官方评测