HiSince in real time already i have some existing price values for some datesBy default based upon price value need to display total at particular dateCan you please help me in below url codeDynamically display all columns total and grand total using AngularJS in ASPNet MVCso could you please help in below shared code Layout null ltDOCTYPE htmlgt lthtmlgtltheadgt ltmeta name34viewport34 content34widthdevicewidth34 gt lttitlegtIndexlttitl

Hi mahesh213Check this example Now please take its reference and correct your codeControllerpublic class HomeController Controller public ActionResult Index return View HttpPost public JsonResult GetData ListltItemgt itemLists new ListltItemgt itemListsAddnew Item ItemId 1 ItemName 34a34 itemListsAddnew Item ItemId 2 ItemName 34b34 ListltItemDategt itemDates new ListltItemDategt itemDatesAddnew ItemDate Id 1 ItemId 1 Date ConvertToDateTime341102202034 Price 10 itemDatesAddnew ItemDate Id 1 ItemId 1 Date ConvertToDateTime341106202034 Price 8 itemDatesAddnew ItemDate Id 1 ItemId 2 Date ConvertToDateTime341104202034 Price 1 itemDatesAddnew ItemDate Id 1 ItemId 1 Date ConvertToDateTime341108202034 Price 5

Display all columns total and grand total on page load using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Dec 22, 2020 10:32 PM
Forum: ASP.Net MVC
Answer: 1
Views: 2740
Sample Code: Download

Hi,

Since in real time already i have some existing price values for some dates

By default based upon price value need to display total at particular date

Can you please help me in below url code

so could you please help in below shared code

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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', function ($scope) {
            $.post("/Home/GetData/", function (r) {
                $scope.items = r;
                $scope.columns = r[0].Dates.length;
                $scope.$apply();
            });
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
                <th colspan="{{columns}}" class="text-center">Date</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td ng-repeat="i in items[0].Dates">{{i.Date}}</td>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Item}}</td>
                <td ng-repeat="i in item.Dates">
                    <input type="text" ng-model="i.Price" style="width: 100px" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult GetData()
    {
        List<Item> itemLists = new List<Item>();
        itemLists.Add(new Item { ItemId = 1, ItemName = "a" });
        itemLists.Add(new Item { ItemId = 2, ItemName = "b" });
 
        List<ItemDate> itemDates = new List<ItemDate>();
        itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("02/11/2020"), Price = 10 });
        itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("06/11/2020"), Price = 8 });
        itemDates.Add(new ItemDate { Id = 1, ItemId = 2, Date = Convert.ToDateTime("04/11/2020"), Price = 1 });
        itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("08/11/2020"), Price = 5 });
 
        DateTime? Fdate = itemDates.Min(x => x.Date);
        DateTime? tdate = itemDates.Max(x => x.Date);
 
        List<ItemEntryDetail> itemEntryDetails = new List<ItemEntryDetail>();
        for (int row = 0; row < itemLists.Count; row++)
        {
            List<DatePrice> dt = new List<DatePrice>();
 
            for (DateTime? i = Fdate; i <= tdate; i = i.Value.AddDays(1))
            {
                dt.Add(new DatePrice { Date = i.Value.ToString("dd-MM-yyyy") });
            }
 
            ItemEntryDetail itemEntryDetail = new ItemEntryDetail();
            itemEntryDetail.Id = itemLists[row].ItemId;
            itemEntryDetail.Item = itemLists[row].ItemName;
 
            for (int column = 0; column < dt.Count; column++)
            {
                ItemDate itemDate = itemDates.Where(x => x.ItemId == itemLists[row].ItemId && x.Date == Convert.ToDateTime(dt[column].Date)).FirstOrDefault();
 
                dt[column].Price = itemDate != null ? itemDate.Price.ToString() : "";
                itemEntryDetail.Dates = dt;
            }
            itemEntryDetails.Add(itemEntryDetail);
        }
 
        return Json(itemEntryDetails, JsonRequestBehavior.AllowGet);
    }
 
    public class Item
    {
        public int ItemId { get; set; }
        public string ItemName { get; set; }
    }
 
    public class ItemDate
    {
        public int Id { get; set; }
        public int ItemId { get; set; }
        public DateTime Date { get; set; }
        public int Price { get; set; }
    }
 
    public class ItemEntryDetail
    {
        public int Id { get; set; }
        public string Item { get; set; }
        public List<DatePrice> Dates { get; set; }
    }
 
    public class DatePrice
    {
        public string Date { get; set; }
        public string Price { get; set; }
    }
}

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Dec 23, 2020 04:34 AM
Report

Hi mahesh213,

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

Controller

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

    [HttpPost]
    public JsonResult GetData()
    {
        List<Item> itemLists = new List<Item>();
        itemLists.Add(new Item { ItemId = 1, ItemName = "a" });
        itemLists.Add(new Item { ItemId = 2, ItemName = "b" });

        List<ItemDate> itemDates = new List<ItemDate>();
        itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("11/02/2020"), Price = 10 });
        itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("11/06/2020"), Price = 8 });
        itemDates.Add(new ItemDate { Id = 1, ItemId = 2, Date = Convert.ToDateTime("11/04/2020"), Price = 1 });
        itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("11/08/2020"), Price = 5 });

        DateTime? Fdate = itemDates.Min(x => x.Date);
        DateTime? tdate = itemDates.Max(x => x.Date);

        List<ItemEntryDetail> itemEntryDetails = new List<ItemEntryDetail>();
        for (int row = 0; row < itemLists.Count; row++)
        {
            List<DatePrice> dt = new List<DatePrice>();

            for (DateTime? i = Fdate; i <= tdate; i = i.Value.AddDays(1))
            {
                dt.Add(new DatePrice { Date = i.Value.ToString("MM-dd-yyyy") });
            }

            ItemEntryDetail itemEntryDetail = new ItemEntryDetail();
            itemEntryDetail.Id = itemLists[row].ItemId;
            itemEntryDetail.Item = itemLists[row].ItemName;

            for (int column = 0; column < dt.Count; column++)
            {
                ItemDate itemDate = itemDates.Where(x => x.ItemId == itemLists[row].ItemId && x.Date == Convert.ToDateTime(dt[column].Date)).FirstOrDefault();

                dt[column].Price = itemDate != null ? itemDate.Price.ToString() : "";
                itemEntryDetail.Dates = dt;
            }
            itemEntryDetails.Add(itemEntryDetail);
        }

        return Json(itemEntryDetails, JsonRequestBehavior.AllowGet);
    }

    public class Item
    {
        public int ItemId { get; set; }
        public string ItemName { get; set; }
    }

    public class ItemDate
    {
        public int Id { get; set; }
        public int ItemId { get; set; }
        public DateTime Date { get; set; }
        public int Price { get; set; }
    }

    public class ItemEntryDetail
    {
        public int Id { get; set; }
        public string Item { get; set; }
        public List<DatePrice> Dates { get; set; }
    }

    public class DatePrice
    {
        public string Date { get; set; }
        public string Price { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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', function ($scope) {
            $.post("/Home/GetData/", function (r) {
                $scope.items = r;
                $scope.columns = r[0].Dates.length;
                $scope.$apply();
                CalculateTotal();
            });

            $scope.OnCalculate = function () {
                CalculateTotal();
            }

            function CalculateTotal() {
                $('#lblTotalHours').html('');
                var trLength = $('#tblDetails tr').length;
                var tdLength = $scope.columns;
                var grandTotal = 0;
                for (var i = 0; i < tdLength; i++) {
                    var total = 0;
                    for (var j = 2; j < trLength - 1; j++) {
                        var price = $('#tblDetails tr').eq(j).find('td').eq(i + 2).find('input').val();
                        if (price == undefined || price == "") {
                            price = 0;
                        }
                        total += !isNaN(price) ? parseFloat(price) : 0;
                    }
                    grandTotal += total;
                    $('#tblDetails tr').eq(trLength - 1).find('td').eq(i + 1).html(total);
                }
                $('#lblTotalHours').html(grandTotal);
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container" id="printarea">
        <table class="table table-bordered" id="tblDetails">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
                <th colspan="{{columns}}" class="text-center">Date</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td ng-repeat="i in items[0].Dates">{{i.Date}}</td>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Item}}</td>
                <td ng-repeat="i in item.Dates">
                    <input type="text" ng-model="i.Price" ng-keyup="OnCalculate()" style="width: 100px" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">Total</td>
                <td ng-repeat="i in items[0].Dates"></td>
            </tr>
        </table>
        <br />TotalHours:  <span id="lblTotalHours"></span>
    </div>
</body>
</html>

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

Display all columns total and grand total on page load using AngularJS in ASP.Net MVC

Dynamically display all columns total and grand total using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us