The implementation of the new edit operation for the ASP. +entityframework Master-Slave table (how does the delete operation work?) )

Implementation of the new edit operation for ASP. NET MVC +entityframework Master table

For MVC in the same time the master-slave table operation on the online existing solution is very few, and such operations in the business system is often encountered. I have been searching the internet for a long time and have not found a very complete example or a very good solution, so I would like to discuss with you a better solution.

Once there is a better way I will integrate it into the template for automatic generation. So I hope to get everyone's help. I'm going to start with this.

Demo code in Https://github.com/neozhu/MVC5-Scaffolder download

Take a look at my demo instance first

Structure of the Entity class

The implementation of the operating interface such as

Function:

On the query page you can click Add and edit for data maintenance

The structure of the page is to maintain the header, the lower table is the actual sub-table data, the maintenance of the sub-table data using bootstrap popup modal operation.

Code to implement the view layer specifically

Index: Query Table List

Create: New Page

Edit: Editing page

Editform:partial view embedded in the Create and edit pages

_orderdetailform:pupup Maintenance Form page for child table

The Create, and edit pages operate via Ajax Post to submit data to the controller in the background

The code is as follows

<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>

　　

Get header and table body data serialized into JSON object via jquery and post to background

There's a problem here. All entity order for JOSN serialization is integrated with entity, Entity has a field of enum type [objectstate] There are many ways to submit this field to the background, The order in the controller's Create,edit method is not the value of the [objectstate] field, so a lot of code is written to modify the entity state at the controller layer.

Controller Layer Code

Here is just the code to paste the Create method

Get:orders/createpublic ActionResult Create () {//detail Models relatedproperties var orderrepositor y = _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, F or 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 ();D isplaysuccessmessage ("has append a order record");//return Redirecttoaction ("Index"); return Json ("{status:success}", Jsonrequestbehavior.allowget);} Displayerrormessage (); return View (order);}

　　

Because there is no way to serialize the value of the [objectstate] field in the front end, write a foreach to modify the state, and don't know if you have any good solutions.

Popup modal edit sub-table Data code

New Table Body button

$ (' #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 thingreturn false;})

　　

Ordercontroller add a new body and modify the body's action to produce the corresponding partial View

I've tried to do this here. Do not add the action of the Child Table action in Ordercontroller, complete the operation of the row with JS, but there is a problem when editing the existing table body data. The @*@Html. Partial ("_orderdetailform")*@ was later written off

Now there is a very difficult problem is how to delete the operation, once in the editing state, the record of one of the table deleted, deleted after the data can not be submitted to the background, without deleting add a delete flag, which will also bring a lot of action, such as table When you laod data, you have to filter out the rows with the delete flag and add a lot of code

I don't know if you have a good solution.

The implementation of the new edit operation for the ASP. +entityframework Master-Slave table (how does the delete operation work?) )