Save (Insert) Table Rows in database using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Apr 24, 2019 03:04 AM
Forum: ASP.Net MVC
Answer: 1
Views: 7531
Sample Code: Download

Hi,

based upon above url i am going to do save functionality

based uponRId i am going to save grid View records into another table

SId CName Ctype Date RId

1 Fromdate datepicker Today 1

2 ToDate datepicker Yesday 1

3 RAI_Item Dropdown One month 1

https://ibb.co/Lzqrvpf

if you can look into my screenshot initially i have one grid view

after clicking of setting button based upon RId i am going to display one more grid view

after that i am going to enter some values

at last finally after clicking of save button need to save grid view records into based upon RId

    $scope.Save = function () {
        var orders = {};
        orders.RId = $scope.RId;
        var details = new Array();
        for (var j = 0; j < $scope.Details.length; j++) {
                var detail = {};
                var tax = {};                       
                tax.CName = $scope.Details[j].CName;
                tax.CType = $scope.Details[j].CType;
                tax.Date = $scope.Details[j].Date;
                tax.FromTable = $scope.Details[j].FromTable;
                tax.DisplayCName = $scope.Details[j].DisplayCName;
                tax.ValueCName = $scope.Details[j].ValueCName;
                details.push(tax);
        }
        orders.details = details;
        $http({
            method: "Post",
            url: "/jobcode/SaveOrder",
            dataType: 'json',
            headers: { "Content-Type": "application/json" },
            data: '{orders: ' + JSON.stringify(orders) + '}'
        }).success(function (data) {
            alert(data);
            clearfields();
        }).error(function (err) {
            $scope.Message = err.Message;
        })
    };
} ]);

[HttpPost]
public ActionResult SaveOrder(Report1 orders)
{
    string result = "Error! Order Is Not Complete!";
    bool isOrderExist = db.Report1.Where(x => x.RId == orders.RId).ToList().Count > 0 ? true : false;
    var oldOrder = db.Report1.Where(x => x.RId == orders.RId).FirstOrDefault();
 
    if (isOrderExist)
    {             
        int orderId = orders.RId;
        foreach (ReportSetting taxes in orders.details)
        {
            ReportSetting subitem = new ReportSetting();
            subitem.RId = orderId;
            subitem.CName = taxes.CName;
            subitem.CType = taxes.CType;
            subitem.DisplayCName = taxes.DisplayCName;
            subitem.ValueCName = taxes.ValueCName;
            subitem.FromTable = taxes.FromTable;
            subitem.Date = taxes.Date;
            db.ReportSettings.Add(subitem);
            db.SaveChanges();
        }
        result = "Success! Order Is InComplete!";
 
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Apr 25, 2019 03:03 AM
Report

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Model

public class Order
{
    public int RId { get; set; }
    public string CName { get; set; }
    public string CType { get; set; }
    public string Date { get; set; }
    public string FromTable { get; set; }
    public string DisplayCName { get; set; }
    public string ValueCName { get; set; }
    public List<Order> details { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetReports()
    {
        TestEntities db = new TestEntities();
        return Json(db.Report1.ToList(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult SaveOrder(Order orders)
    {
        TestEntities db = new TestEntities();
        string result = "Error! Order Is Not Complete!";
        bool isOrderExist = db.Report1.Where(x => x.RId == orders.RId).ToList().Count > 0 ? true : false;
        var oldOrder = db.Report1.Where(x => x.RId == orders.RId).FirstOrDefault();

        if (isOrderExist)
        {
            int orderId = orders.RId;
            foreach (var taxes in orders.details)
            {
                ReportSetting subitem = new ReportSetting();
                subitem.RId = orderId;
                subitem.CName = taxes.CName;
                subitem.CType = taxes.CType;
                subitem.DisplayCName = taxes.DisplayCName;
                subitem.ValueCName = taxes.ValueCName;
                subitem.FromTable = taxes.FromTable;
                subitem.Date = taxes.Date;
                db.ReportSettings.Add(subitem);
                db.SaveChanges();
            }
            result = "Success! Order Is InComplete!";

        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

View

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", ['$scope', '$http', 'MyService', function ($scope, $http, MyService) {
            var RId;
            var getReports = MyService.GetReports();
            getReports.then(function (response) {
                $scope.Reports = response.data;
            });

            $scope.GetPlaceHolder = function (query, rId) {
                RId = rId;
                var details = [];
                for (var i = 0; i < query.match("{(.*)}")[0].split('{').length; i++) {
                    if (query.match("{(.*)}")[0].split('{')[i] != '') {
                        var detail = {};
                        detail.Cname = query.match("{(.*)}")[0].split('{')[i].split('}')[0].trim();
                        details.push(detail);
                    }
                }
                $scope.Details = details;
            }

            $scope.Save = function () {
                var orders = new Array();
                $('#tblOrders tr:has(td)').map(function () {
                    var cName = $(this).find('td').eq(0).html().trim();
                    var cType = $(this).find('td').eq(1).find('select').val();
                    var fromTable = $(this).find('td').eq(2).find('input').val();
                    var displayCName = $(this).find('td').eq(3).find('input').val();
                    var valueCName = $(this).find('td').eq(4).find('input').val();
                    var cDate = $(this).find('td').eq(5).find('select').val();

                    var detail = {};
                    detail.RId = RId;
                    var tax = {};
                    tax.CName = cName;
                    tax.CType = cType;
                    tax.FromTable = fromTable;
                    tax.DisplayCName = displayCName;
                    tax.ValueCName = valueCName;
                    tax.Date = cDate;
                    detail.details = tax;
                    orders.push(detail);
                });
                $http({
                    method: "Post",
                    url: "/Home/SaveOrder",
                    dataType: 'json',
                    headers: { "Content-Type": "application/json" },
                    data: '{orders: ' + JSON.stringify(orders) + '}'
                }).success(function (data) {
                    debugger;
                }).error(function (err) {
                    debugger;
                })
            };
        } ]);
        app.service("MyService", function ($http) {
            this.GetReports = function (user) {
                return $http.get("/Home/GetReports");
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive table-bordered">
            <tr>
                <th>RId</th>
                <th>RNo</th>
                <th>RName</th>
                <th>RQuery</th>
                <th>Actions</th>
            </tr>
            <tbody ng-repeat="r in Reports">
                <tr>
                    <td>{{r.RId}}</td>
                    <td>{{r.RNo}}</td>
                    <td>{{r.RName}}</td>
                    <td>{{r.RQuery}}</td>
                    <td><button class="btn btn-info btn-sm" ng-click="GetPlaceHolder(r.RQuery,r.RId)">Settings</button></td>
                </tr>
            </tbody>
        </table>
        <hr />
        <table id="tblOrders" class="table table-responsive table-bordered">
            <tr>
                <th>Cname</th>
                <th>Ctype</th>
                <th>From Table</th>
                <th>DisplayCName</th>
                <th>ValueCName</th>
                <th>Date</th>
            </tr>
            <tbody ng-repeat="detail in Details">
                <tr>
                    <td>{{detail.Cname}}</td>
                    <td>
                        <select id="ddlCType" ng-model="CType" class="form-control">
                            <option value="">Select Value</option>
                            <option value="Dropdown">Dropdown</option>
                            <option value="Datepicker">DatePicker</option>
                        </select>
                    </td>
                    <td><input type="text" class="form-control" ng-model="FromTable" /></td>
                    <td><input type="text" class="form-control" ng-model="DispalyCName" /></td>
                    <td><input type="text" class="form-control" ng-model="ValueCName" /></td>
                    <td>
                        <select id="ddlDate" ng-model="Date" class="form-control">
                            <option value="">Select</option>
                            <option value="Today">Today</option>
                            <option value="Lastday">Last Day</option>
                            <option value="Lastmonth">Last Month</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <button class="btn btn-success btn-sm" ng-click="Save()">
            <span class="glyphicon glyphicon-ok"></span>Save</button>
    </div>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Save (Insert) Table Rows in database using AngularJS in ASP.Net MVC

Display Placeholder values in HTML Table using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us