Download Project  (Full Project)

Step-1

In this tutorial we create bootstrap modal for add new product. First open visual studio where we are working then create a bootstrap modal in the index view, give the name of the modal and also change the name of modal id. Then write some script in this index file for open the modal in popup now create a method in the Order controller. This controller receives a parameter id. This id finds are spectated object from the database. Then pass the object as partial view in the object. This object show in bootstrap modal. Then the another method  receive the object when submit the button. Than the controller insert the data into database. In index view first create a button. In this button add a bootstrap class also add onclick event  and pass the value of id. Then close the tag and give a icon. this onclick event fire a method. This method name is AddMoreOrder. In bellow the page under script tag now we write some script for “AddMoreOrder” this method. Under the script tag write some script code then copy the bootstrap modal and paste it. Some change in the modal head like id and also change modal body id.  Now in the script by the modal id in JavaScript call the modal for show popup. In this modal we load the modal body.  Now go to orders controller and create a method name is EditOrder. This order method receive the id parameter. We must and should JavaScript and c# controller parameter will be same. This method will be httppost based. So this method easily receive argument. Now create OrderViewModel object. Now fetch the data from database by id parameter and store it cus variable. Now initialize the object and create a partial view. In the partial view return the object.  In the partial view write some code. Write some hidden field also product name qentity, price, Amount,  and in this bellow add a submit  button.  Now build the project. Now we can see the modal every field are fill up. We wont to change field and save it then this value will be change and save. So in partial2 view now some script for update data. And also add a div tag for loading data. Now add a gif image. When button submit then the gif file load and after loading the file are stop. Now call Ajax for post the data in sarver site. In the success modal and loader file are closed. And also reload the index page in this script file. Also add error message in after success. This error are print the alert message for data not save. Now create a controller in server site  AddMoreOrderSave. This model receive the object as a parameter. In this method we create a order table object and assign it. This object are add into database and save it. And return the view. Under a view pass a model object. Now build the project. Now write some script to multiply for find the amount and show the modal.  And also change some script  and save the project and run the project. Now if we add a new product in using bootstrap modal then we see the output in the list are add. It also calculate total bill.

Step-2

Now given bellow the index code:

@model IEnumerable<MasterDetailsDemo.Models.Customer>
@{
    ViewBag.Title = "Index";
}

<br /><br />
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <h2 class="panel-title pull-left" style="margin-left:10px;">
                <strong>Order Details</strong>
            </h2>
            <button style="margin-right:10px" class="btn btn-primary pull-right" onclick="addNewOrder()">New Order</button>
        </div>
    </div>

    @*Receive All Database Data From Controller And Display Those Data In Client Side*@
    <div id="accordion">
        @if (Model.Count() != 0)
        {
            foreach (var item in Model)
            {
                <h3>
                   Invoice No: #@item.Id

                    <span class="pull-right">order Date: @item.OrderDate

                    <a href="#" class="btn btn-success btn-xs" onclick="AddMoreOrder(@item.Id)"><i class="glyphicon glyphicon-plus"></i></a>
                    
                    </span>

                </h3>
                <div>
                    <div class="row">
                        <div class="col-lg-4 col-sm-5">

                        </div>
                        <div class="row mb-4">
                            <div class="col-sm-6">
                               
                                <table id="tblCustomers" class="table">
<tr>
    <th>Name</th>
    <th>Address</th>
    <th></th>
</tr>
                                    <tr>
                                        <td style="display:none" class="CustomerId">
                                            <span> @item.CustomerId</span>
                                        </td>

                                        <td class="Name">
                                            <span> @item.Name</span>

                                            <input type="text" class="form-control" value="@item.Name" style="display:none" />
                                        </td>

                                        <td class="Address">
                                            <span> @item.Address</span>
                                            <input type="text" class="form-control" value="@item.Address" style="display:none" />
                                        </td>
                                        <td>

                                            <a class="Edit btn btn-warning btn-sm" href="javascript:;">Edit</a>
                                            <a class="Update btn btn-info btn-sm" href="javascript:;" style="display:none">Update</a>
                                            <a class="Cancel btn btn-danger btn-sm" href="javascript:;" style="display:none">Cancel</a>
                                        </td>
                                    </tr>

                                </table>
                            
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <table class="table table-striped table-responsive">
                            <tbody>

                                <tr>
                                    <td colspan="3">
                                        <div class="table-responsive-sm">
                                            <table class="table table-striped css-serial">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Item</th>
                                                        <th>Quantity</th>
                                                        <th>Unit Cost</th>
                                                        <th>Total</th>
                                                        <th></th>

                                                    </tr>
                                                </thead>
                                                @{
                                                    var totalBill = 0;
                                                }
                                                @foreach (var order in item.Orders)
                                                {
                                                    <tbody>
                                                        <tr id="row_@item.Id"> 
                                                            <td></td>
                                                            <td style="display:none">@item.Id</td>
                                                            <td>@order.ProductName</td>
                                                            <td>@order.Quantity</td>
                                                            <td>@order.Price</td>
                                                            <td>@order.Amount</td>
                                                            <td><a href="#" class="btn btn-danger btn-sm" onclick="EditOrder(@order.Id)" data-toggle="tooltip" title="Edit Product"><i class="glyphicon glyphicon-pencil"></i> </a></td>
                                                            
                                                            @*<td>@Html.ActionLink(" ", "Edit", new { id = @order.OrderId }, new { @class = "btn btn-warning pull-right  btn-sm glyphicon glyphicon-edit" })</td>*@
                                                        </tr>

                                                    </tbody>



                                                    totalBill = totalBill + @Convert.ToInt32(order.Amount);


                                                }

                                            </table>
                                            <div class="row">
                                                <div class="col-lg-4 col-sm-5">

                                                </div>
                                                <div class="col-lg-4 col-sm-5 ml-auto">
                                                    <table class="table table-clear">
                                                        <tbody>
                                                            <tr>

                                                                <td class="left">
                                                                    <strong>Total Bill:</strong>
                                                                </td>
                                                                <td class="right">
                                                                    <strong>$@totalBill</strong>
                                                                </td>
                                                                @*<td class="left">
                                                                    <span class="pull-right" style="margin-right:200px;"><strong>Total Bill :  </strong> @totalBill</span>
                                                                    </td>*@
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    </div>
                    }
                    }
                    else
                    {
                    <div class="panel-body">
                        <h3 style="color:red;">Empty!</h3>
                    </div>
                   
                    }
                </div>
        </div>
      

  
         



                    <div class="modal fade" id="newOrderModal">
                        <div class="modal-dialog modal-lg" style=" width 900px !important;">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                                    <h4>Add New Order</h4>
                                </div>
                                <form id="NewOrderForm">
                                    <div class="modal-body">
                                        @*Customer Details*@
                                        <h5 style="color:#ff6347">Customer Details</h5>
                                        <hr />
                                        <div class="form-horizontal">
                                            <input type="hidden" id="CustomerId" />
                                            <div class="form-group">
                                                <label class="control-label col-md-2">
                                                    Customer Name
                                                </label>
                                                <div class="col-md-4">
                                                    <input type="text" id="name" name="name" placeholder="Customer Name" class="form-control" />
                                                </div>
                                                <label class="control-label col-md-2">
                                                    Address
                                                </label>
                                                <div class="col-md-4">
                                                    <input type="text" id="address" name="address" placeholder="Customer Address" class="form-control" />
                                                </div>
                                            </div>
                                        </div>

                                        @*Order Details*@
                                        <h5 style="margin-top:10px;color:#ff6347">Order Details</h5>
                                        <hr />
                                        <div class="form-horizontal">
                                            <input type="hidden" id="OrderId" />
                                            <div class="form-group">
                                                <label class="control-label col-md-2">
                                                    Product Name
                                                </label>
                                                <div class="col-md-4">
                                                    <input type="text" id="productName" name="productName" placeholder="Product Name" class="form-control" />
                                                </div>
                                                <label class="control-label col-md-2">
                                                    Price
                                                </label>
                                                <div class="col-md-4">
                                                    <input type="number" id="price" name="price" placeholder="Product Price" class="form-control" />
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-2">
                                                    Quantity
                                                </label>
                                                <div class="col-md-4">
                                                    <input type="number" id="quantity" name="quantity" placeholder="Quantity" class="form-control" />
                                                </div>
                                                <div class="col-md-2">
                                                    <a id="addToList" class="btn btn-primary">Add To List</a>
                                                </div>
                                            </div>

                                            <table id="detailsTable" class="table">
                                                <thead>
                                                    <tr>
                                                        <th style="width:30%">Product</th>
                                                        <th style="width:10%">Qty</th>
                                                        <th style="width:25%">Unit Cost</th>
                                                        <th style="width:25%">Amount</th>
                                                        <th style="width:10%"></th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="reset" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button id="saveOrder" type="submit" class="btn btn-danger">Save Order</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Edi Order</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">


            </div>


        </div>

    </div>

</div>


<div class="modal fade" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Edi Order</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv2">


            </div>


        </div>

    </div>

</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
    var EditOrder = function (id) {
        var url = "/Orders/EditOrder?Id=" + id;
        $("#myModalBodyDiv1").load(url, function () {
            $("#myModal1").modal("show");
        })
    }

    var AddMoreOrder=function(id){

        var url="/Orders/AddMoreOrder?Id="+id;
        $("#myModalBodyDiv2").load(url,function(){
            $("#myModal2").modal("show");
        })

    }
</script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
                    @section scripts{
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

                        <script>


                            $(function () {

                                $("#accordion").accordion();

                            });



                            $(function () {
                               
                                if ($("#tblCustomers tr").length > 0) {
                                    //$("#tblCustomers tr:eq(0)").remove();
                                } else {
                                    var row = $("#tblCustomers tr:last-child");
                                    row.find(".Edit").hide();
                                  
                                    row.find("span").html('&nbsp;');
                                }
                            });

                            function AppendRow(row, customerId, name, address) {
                                //Bind CustomerId.
                                $(".CustomerId", row).find("span").html(customerId);

                                //Bind Name.
                                $(".Name", row).find("span").html(name);
                                $(".Name", row).find("input").val(name);

                                //Bind Country.
                                $(".Address", row).find("span").html(address);
                                $(".Address", row).find("input").val(address);

                                row.find(".Edit").show();
                                row.find(".Delete").show();
                                $("#tblCustomers").append(row);
                            };



                            //Edit event handler.
                            $("body").on("click", "#tblCustomers .Edit", function () {
                                var row = $(this).closest("tr");
                                $("td", row).each(function () {
                                    if ($(this).find("input").length > 0) {
                                        $(this).find("input").show();
                                        $(this).find("span").hide();
                                    }
                                });
                                row.find(".Update").show();
                                row.find(".Cancel").show();
                              
                                $(this).hide();
                            });


                            //Cancel event handler.
                            $("body").on("click", "#tblCustomers .Cancel", function () {
                                var row = $(this).closest("tr");
                                $("td", row).each(function () {
                                    if ($(this).find("input").length > 0) {
                                        var span = $(this).find("span");
                                        var input = $(this).find("input");
                                        input.val(span.html());
                                        span.show();
                                        input.hide();
                                    }
                                });
                                row.find(".Edit").show();
                              
                                row.find(".Update").hide();
                                $(this).hide();
                            });


                            //Update event handler.
                            $("body").on("click", "#tblCustomers .Update", function () {
                                var row = $(this).closest("tr");
                                $("td", row).each(function () {
                                    if ($(this).find("input").length > 0) {
                                        var span = $(this).find("span");
                                        var input = $(this).find("input");
                                        span.html(input.val());
                                        span.show();
                                        input.hide();
                                    }
                                });
                                row.find(".Edit").show();

                                row.find(".Cancel").hide();
                                $(this).hide();

                                var customer = {};
                                customer.CustomerId = row.find(".CustomerId").find("span").html();
                                customer.Name = row.find(".Name").find("span").html();
                                customer.Address = row.find(".Address").find("span").html();
                                $.ajax({
                                    type: "POST",
                                    url: "/Home/UpdateCustomer",
                                    data: '{customer:' + JSON.stringify(customer) + '}',
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json"
                                });
                            });


                            //Show Modal.
                            function addNewOrder() {
                                $("#newOrderModal").modal();
                            }
                            //Add Multiple Order.
                            $("#addToList").click(function (e) {
                                e.preventDefault();

                                if ($.trim($("#productName").val()) == "" || $.trim($("#price").val()) == "" || $.trim($("#quantity").val()) == "") return;

                                var productName = $("#productName").val(),
                                    price = $("#price").val(),
                                    quantity = $("#quantity").val(),
                                    detailsTableBody = $("#detailsTable tbody");

                                var productItem = '<tr><td>' + productName + '</td><td>' + quantity + '</td><td>' + price + '</td><td>' + (parseFloat(price) * parseInt(quantity)) + '</td><td><a data-itemId="0" href="#" class="deleteItem">Remove</a></td></tr>';
                                detailsTableBody.append(productItem);
                                clearItem();
                            });
                            //After Add A New Order In The List, Clear Clean The Form For Add More Order.
                            function clearItem() {
                                $("#productName").val('');
                                $("#price").val('');
                                $("#quantity").val('');
                            }
                            // After Add A New Order In The List, If You Want, You Can Remove It.
                            $(document).on('click', 'a.deleteItem', function (e) {
                                e.preventDefault();
                                var $self = $(this);
                                if ($(this).attr('data-itemId') == "0") {
                                    $(this).parents('tr').css("background-color", "#ff6347").fadeOut(800, function () {
                                        $(this).remove();
                                    });
                                }
                            });
                            //After Click Save Button Pass All Data View To Controller For Save Database
                            function saveOrder(data) {
                                return $.ajax({
                                    contentType: 'application/json; charset=utf-8',
                                    dataType: 'json',
                                    type: 'POST',
                                    url: "/Orders/SaveOrder",
                                    data: data,
                                    success: function (result) {
                                        alert(result);
                                        location.reload();
                                    },
                                    error: function () {
                                        alert("Error!")
                                    }
                                });
                            }
                            //Collect Multiple Order List For Pass To Controller
                            $("#saveOrder").click(function (e) {
                                e.preventDefault();

                                var orderArr = [];
                                orderArr.length = 0;

                                $.each($("#detailsTable tbody tr"), function () {
                                    orderArr.push({
                                        productName: $(this).find('td:eq(0)').html(),
                                        quantity: $(this).find('td:eq(1)').html(),
                                        price: $(this).find('td:eq(2)').html(),
                                        amount: $(this).find('td:eq(3)').html()
                                    });
                                });


                                var data = JSON.stringify({
                                    name: $("#name").val(),
                                    address: $("#address").val(),
                                    order: orderArr
                                });

                                $.when(saveOrder(data)).then(function (response) {
                                    console.log(response);
                                }).fail(function (err) {
                                    console.log(err);
                                });
                            });





                        </script>
                    }
                    <style>
                        .css-serial {
                            counter-reset: serial-number; /* Set the serial number counter to 0 */
                        }

                            .css-serial td:first-child:before {
                                counter-increment: serial-number; /* Increment the serial number counter */
                                content: counter(serial-number); /* Display the counter */
                            }






                            .card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

                    </style>

Step-3

When  the view send the data by the ajax calling  then the data receive the controller and  pass the Partial2  view. This view bind the modal when submit the object then update the database by id.

The Partial  view code given bellow:

@model MasterDetailsDemo.Models.MyOrderViewModel

<div>

    <form id="myForm2">

        @Html.HiddenFor(m => m.Id)
        @Html.HiddenFor(m => m.CustomerId)


        <div class="form-group">
            <label for="exampleInputEmail1">Product Name</label>
            @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @placeholder = "Product Name" })
        </div>


        <div class="form-group">
            <label for="exampleInputEmail1">Quantity</label>
            @Html.TextBoxFor(model => model.Quantity, new { autocomplete = "off", @class = "form-control", @placeholder = "Quantity", @id = "txtQuantity2" })
        </div>

        <div class="form-group">
            <label for="exampleInputEmail1">Price</label>
            @Html.TextBoxFor(model => model.Price, new { autocomplete = "off", @class = "form-control", @placeholder = "Price", @id = "txtPrice2" })
        </div>

        <div class="form-group">
            <label for="exampleInputEmail1">Amount</label>
            @Html.TextBoxFor(model => model.Amount, new { @class = "form-control", @placeholder = "Amount", @id = "txtAmount2", @readonly = "readonly" })
        </div>
        <hr />
        <a href="#" id="btnSubmit" class="btn btn-success btn-block">
            <span>Save</span>
        </a>
        </form>

    <div style="text-align:center;display:none" id="Loaderdiv2">
        <img src="~/loadings.gif" width="150" />
    </div>
</div>

<script>



    $(document).ready(function () {

        $("#txtQuantity2,#txtPrice2").keyup(function (e) {

            var q = $("#txtQuantity2").val();
            var p = $("#txtPrice2").val();
            var result = "";

            if (q !== "" && p !== "" && $.isNumeric(q) && $.isNumeric(p)) {
                result = parseFloat(q) * parseFloat(p);
            }
            $("#txtAmount2").val(result);

        });
    })


    $(document).ready(function () {

        $("#btnSubmit").click(function () {
            $("#Loaderdiv2").show();
            var MyData = $("#myForm2").serialize();

            $.ajax({
                type: "POST",
                url: "/Orders/AddMoreOrderSave",
                data: MyData,
                success: function () {
                    alert("New Order Added");
                    $("#Loaderdiv2").hide();
                    $("#myModal2").modal("hide");
                    window.location.href="/Orders/Index"
                },
                error: function () {
                    alert("New Order Added");
                    $("#Loaderdiv2").hide();
                    $("#myModal2").modal("hide");
                    window.location.href = "/Orders/Index"
                }

            })
        })
    })


</script>

Step-4

Then the partial view submit the the button using bootstrap modal then add new order method are receive the data and save it into database : Given bellow the controller code:

using MasterDetailsDemo.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace MasterDetailsDemo.Controllers
{
    public class OrdersController : Controller
    {
        OnlineShopEntities db = new OnlineShopEntities();

        public ActionResult Index()
        {
        
                List<Customer> OrderAndCustomerList = db.Customers.OrderByDescending(s=>s.OrderDate).ToList();
            return View(OrderAndCustomerList);
        
        }

        [HttpPost]
        public ActionResult Index(MyOrderViewModel model)
        {
            if (model.Id > 0)
            {
                Order or = db.Orders.SingleOrDefault(x => x.Id == model.Id);

                or.Id = model.Id;
                or.ProductName = model.ProductName;
                or.Quantity = model.Quantity;
                or.Price = model.Price;
                or.Amount = model.Amount;
                db.SaveChanges();
            }

            return View(model);
        }





       
        public ActionResult AddMoreOrder(int Id)
        {
            MyOrderViewModel model = new MyOrderViewModel();

            Customer cus = db.Customers.SingleOrDefault(c => c.Id == Id);
            model.Id = cus.Id;
            model.CustomerId = cus.CustomerId;
            return PartialView("Partial2", model);

        }


        public ActionResult AddMoreOrderSave(MyOrderViewModel model)
        {
            Order or = new Order();
            or.OrderId = Guid.NewGuid();

            or.ProductName = model.ProductName;
            or.Quantity = model.Quantity;
            or.Price = model.Price;
            or.Amount = model.Amount;
            or.CustomerId = model.CustomerId;
            db.Orders.Add(or);
            db.SaveChanges();
            return View(model);

        }


        public ActionResult SaveOrder(string name, String address, Order[] order)
        {
          
                string result = "Error! Order Is Not Complete!";
            if (name != null && address != null && order != null)
            {
                var cutomerId = Guid.NewGuid();
                Customer model = new Customer();
                model.CustomerId = cutomerId;
                model.Name = name;
                model.Address = address;
                model.OrderDate = DateTime.Now;
                db.Customers.Add(model);

                foreach (var item in order)
                {
                    var orderId = Guid.NewGuid();
                    Order O = new Order();
                    O.OrderId = orderId;
                    O.ProductName = item.ProductName;
                    O.Quantity = item.Quantity;
                    O.Price = item.Price;
                    O.Amount = item.Amount;
                    O.CustomerId = cutomerId;
                    db.Orders.Add(O);
                }
                db.SaveChanges();
                result = "Success! Order Is Complete!";
            }
            return Json(result, JsonRequestBehavior.AllowGet);
          
        }



        public ActionResult EditOrder(int Id)
        {
            MyOrderViewModel model = new MyOrderViewModel();

            Order or = db.Orders.SingleOrDefault(c => c.Id == Id);
            model.Id = or.Id;
            model.ProductName = or.ProductName;
            model.Quantity = or.Quantity;
            model.Price = or.Price;
            model.Amount = or.Amount;
            model.CustomerId = or.CustomerId;
            return PartialView("Partial1", model);
        }



        // GET: Order/Edit/5
        public ActionResult Edit(Guid? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Order order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            ViewBag.CustomerId = new SelectList(db.Customers, "CustomerId", "Name", order.CustomerId);
            return View(order);
        }

        // POST: Order/Edit/5
        // 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 Edit([Bind(Include = "OrderId,ProductName,Quantity,Price,Amount,CustomerId")] Order order)
        {
            if (ModelState.IsValid)
            {

                db.Entry(order).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            ViewBag.CustomerId = new SelectList(db.Customers, "CustomerId", "Name", order.CustomerId);
            return View(order);
        }




        // GET: Customer/Edit/5
        public ActionResult EditCustomer(Guid? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Customer customer = db.Customers.Find(id);
            if (customer == null)
            {
                return HttpNotFound();
            }
            return View(customer);
        }

        // POST: Customer/Edit/5
        // 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 EditCustomer([Bind(Include = "CustomerId,Name,Address,OrderDate")] Customer customer)
        {
            if (ModelState.IsValid)
            {
                db.Entry(customer).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(customer);
        }
    }
}

Step-5

We can add new product and update existing product. When we run the project then we can see the output.