Display dynamically add rows details in Bootstrap Modal Popup using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi, 

I have one one popup In dynamicallya added rows. each row has different values

Currently issue in my controller code is existing records are displaying properly in popup

issue is that newly added rows

after clicking of view I need to display relevant date row value in popup

Could you Please help me

Dynamically add rows from controller based on Date range using AngularJS in ASP.Net MVC

    [HttpPost]
    public JsonResult Edit(int ItId, int empId, DateTime? Fdate, DateTime? tdate)
    {
        ModelEntities db = new ModelEntities();
        List<object> ItemList = new List<object>();
        List<Delivery> DeliList = new List<Delivery>();
        if (ItId == 0)
        {
            var items = (from i in db.Items
                            join e in db.Employees on i.EId equals e.EId
                            where i.EId == empId
                            select new { i.ItemId, i.EId, e.EName, i.ItemName, i.Date }).ToList();
 
            for (DateTime? i = Fdate; i <= tdate; i = i.Value.AddDays(1))
            {
                List<DateTime?> dates = items.Select(x => x.Date).ToList();
                if (dates.Contains(i))
                {
                    var employeeItem = items.Where(x => x.Date == i).FirstOrDefault();
                    ItemList.Add(new
                    {
                        ItemId = employeeItem.ItemId,
                        ItemName = employeeItem.ItemName,
                        EId = employeeItem.EId,
                        EName = employeeItem.EName,
                        Date = i.Value.ToString("dd/MM/yyyy")
                    });
                 
                }
                else
                {
                    var employee = db.Employees.Where(x => x.EId == empId).FirstOrDefault();
                    if (employee != null)
                    {
                        ItemList.Add(new { ItemId = 0, ItemName = DBNull.Value, EId = employee.EId, EName = employee.EName, Date = i.Value.ToString("dd/MM/yyyy") });
                        DeliList.Add(new{ItemId=0,DLocation="",DDate=i.Value});
                    }
                    else
                    {
                        foreach (Employee emp in db.Employees.ToList())
                        {
                            ItemList.Add(new { ItemId = 0, ItemName = DBNull.Value, EId = emp.EId, EName = emp.EName, Date = i.Value.ToString("dd/MM/yyyy") });
                            DeliList.Add(new{ItemId=0,DLocation="",DDate=i.Value});
                        }
                    }
                }
            }
        }
 
        ItemEntryDetail details = new ItemEntryDetail();
        details.item = ItemList;
        return Json(details, JsonRequestBehavior.AllowGet);
    }

 

<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, $window) {
        GetItems();
        GetEmployees();
        function GetItems() {
            $scope.Items = [];
            $scope.Orders=[];
            $http({
                method: 'Get',
                url: '/Home/GetReport/'
                }).success(function (data, status, headers, config) {
                    $scope.Items = data;
                    // Adding All option.
                    $scope.Items.splice(0, 0, { Id: 0, Name: 'All' });
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
  
            function GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetReport/'
                }).success(function (data, status, headers, config) {
                    $scope.employees = data;
                    // Adding All option.
                    $scope.employees.splice(0, 0, { Id: 0, Name: 'All' });
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            $scope.Go = function () {
            var Id1 = $scope.Item;
            var Id1 = $scope.Employee;
            var fd = $scope.FDate.toISOString().split('T')[0];
            var td = $scope.TDate.toISOString().split('T')[0];
            $.post("/attendanceentry/Edit/", { ItId: Id1, Fdate: fd, tdate: td }, function (r) {
            $scope.items= [];        
            for (var i = 0; i < r.item.length; i++) {
                var itemtry = {};
                var itemId = r.item[i].ItemId;
                var attedce2 = [];
                for (var j = 0; j < r.Orders1.length; j++) {
                    if (r.Orders1[j].ItemId == itemId) {
                        var ptime = {};
                        ptime.ItemId = r.Orders1[j].ItemId;
                        ptime.DId= r.Orders1[j].DId;
                        ptime.DLocation = r.Orders1[j].DLocation;
                        ptime.DDate = r.Orders1[j].DDate;
                        attedce2.push(ptime);
                    }
                }
                    itemtry.ItemId= r.item[i].ItemId;
                    itemtry.ItemName = r.item[i].ItemName;
                    itemtry.EId = r.item[i].EId;
                    itemtry.EName = r.item[i].EName;
                    itemtry.Date = r.item[i].Date;   
                      attentry.Orders = attedce2;
                    $scope.items.push(itemtry);
                }
            });
            $scope.$apply();
        }
    });
</script>

 

Posted one month ago Modified on one month ago

Hi mahesh213,

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

SQL

CREATE TABLE Employee(EId INT IDENTITY PRIMARY KEY,EName VARCHAR(20))
INSERT INTO Employee VALUES('mahesh')
INSERT INTO Employee VALUES('mahesh2')

CREATE TABLE Item(ItemId INT IDENTITY PRIMARY KEY,EId INT,ItemName VARCHAR(20),Date DATETIME)
INSERT INTO Item VALUES(1,'aa','2/2/2019')
INSERT INTO Item VALUES(1,'bb','2/4/2019')

CREATE TABLE Delivery(DId INT IDENTITY,ItemId INT,DLocation VARCHAR(50),DDate DATETIME)
INSERT INTO Delivery VALUES(1,'Mumbai','2019-02-02')
INSERT INTO Delivery VALUES(2,'Hyderabad','2019-02-04')
INSERT INTO Delivery VALUES(1,'Banglore','2019-02-03')
INSERT INTO Delivery VALUES(2,'Delhi','2019-02-05')

Controller

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

    [HttpPost]
    public JsonResult Edit(int ItId, int empId, DateTime? Fdate, DateTime? tdate)
    {
        ModelEntities db = new ModelEntities();
        List<object> ItemList = new List<object>();
        List<Delivery> DeliList = new List<Delivery>();
        if (ItId == 0)
        {
            var items = (from i in db.Items
                            join e in db.Employees on i.EId equals e.EId
                            where i.EId == empId
                            select new { i.ItemId, i.EId, e.EName, i.ItemName, i.Date }).ToList();

            foreach (var atten1 in items)
            {
                var punches = (from pt in db.Deliveries
                                where pt.ItemId == atten1.ItemId
                                select new
                                {
                                    pt.ItemId,
                                    pt.DId,
                                    pt.DLocation,
                                    pt.DDate,
                                }).ToList();
                foreach (var subitem in punches)
                {
                    DeliList.Add(new Delivery { ItemId = subitem.ItemId, DId = subitem.DId, DLocation = subitem.DLocation, DDate = subitem.DDate });
                }
            }

            for (DateTime? i = Fdate; i <= tdate; i = i.Value.AddDays(1))
            {
                List<DateTime?> dates = items.Select(x => x.Date).ToList();
                if (dates.Contains(i))
                {
                    var employeeItem = items.Where(x => x.Date == i).FirstOrDefault();
                    ItemList.Add(new
                    {
                        ItemId = employeeItem.ItemId,
                        ItemName = employeeItem.ItemName,
                        EId = employeeItem.EId,
                        EName = employeeItem.EName,
                        Date = i.Value.ToString("dd/MM/yyyy")
                    });
                }
                else
                {
                    var employee = db.Employees.Where(x => x.EId == empId).FirstOrDefault();
                    if (employee != null)
                    {
                        ItemList.Add(new { ItemId = 0, ItemName = DBNull.Value, EId = employee.EId, EName = employee.EName, Date = i.Value.ToString("dd/MM/yyyy") });
                    }
                    else
                    {
                        foreach (Employee emp in db.Employees.ToList())
                        {
                            ItemList.Add(new { ItemId = 0, ItemName = DBNull.Value, EId = emp.EId, EName = emp.EName, Date = i.Value.ToString("dd/MM/yyyy") });
                        }
                    }
                }
            }
        }

        ItemEntryDetail details = new ItemEntryDetail();
        details.item = ItemList;
        details.Orders = DeliList;
        return Json(details, JsonRequestBehavior.AllowGet);
    }

    public class ItemEntryDetail
    {
        public List<object> item { get; set; }
        public List<Delivery> Orders { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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, $window, $filter) {
            GetItems();
            GetEmployees();
            function GetItems() {
                $scope.Items = [{ Id: 0, Name: 'All' }, { Id: 1, Name: 'aa' }, { Id: 2, Name: 'bb'}];
            }

            function GetEmployees() {
                $scope.employees = [{ EId: 0, EName: 'All' }, { EId: 1, EName: 'mahesh' }, { EId: 2, EName: 'mahesh2'}];
            }
            function ConvertJsonDateToDateTime(date) {
                var parsedDate = new Date(parseInt(date.substr(6)));
                var newDate = new Date(parsedDate);
                var month = newDate.getMonth() + 1;
                var day = newDate.getDate();
                var year = newDate.getFullYear();
                return String("0" + day).slice(-2) + "/" + String("0" + month).slice(-2) + "/" + String("0" + year).slice(-4);
            }
            $scope.Go = function () {
                var Id1 = $scope.Item;
                var eId = $scope.Employee;
                var fd = $scope.FDate.toISOString().split('T')[0];
                var td = $scope.TDate.toISOString().split('T')[0];
                $.post("/Home/Edit/", { ItId: Id1, empId: eId, Fdate: fd, tdate: td }, function (r) {
                    $scope.items = [];
                    for (var i = 0; i < r.item.length; i++) {
                        var itemtry = {};
                        var itemId = r.item[i].ItemId;
                        var result = $filter('filter')(r.Orders, function (item) {
                            if (item.ItemId == itemId) {
                                return item;
                            }
                        });
                        var attedce2 = [];
                        if (result.length == 0) {
                            var ptime = {};
                            ptime.ItemId = r.item[i].ItemId;
                            ptime.DId = 0;
                            ptime.DLocation = '';
                            ptime.DDate = r.item[i].Date;
                            attedce2.push(ptime);
                        } else {
                            for (var j = 0; j < result.length; j++) {
                                var ptime = {};
                                ptime.ItemId = result[j].ItemId;
                                ptime.DId = result[j].DId;
                                ptime.DLocation = result[j].DLocation;
                                ptime.DDate = ConvertJsonDateToDateTime(result[j].DDate);
                                attedce2.push(ptime);
                            }
                        }
                        itemtry.ItemId = r.item[i].ItemId;
                        itemtry.ItemName = r.item[i].ItemName;
                        itemtry.EId = r.item[i].EId;
                        itemtry.EName = r.item[i].EName;
                        itemtry.Date = r.item[i].Date;
                        itemtry.Orders = attedce2;
                        $scope.items.push(itemtry);
                    }
                    $scope.$apply();
                });
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">
                Item</label>
            <div class="col-md-2">
                <select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items">
                    <option value="">-- Select Item --</option>
                </select>
            </div>
            <label for="ID" class="control-label col-xs-2">
                Employee</label>
            <div class="col-md-2">
                <select style="display: inline" data-ng-model="Employee" class="form-control" data-ng-options="p.EId as p.EName for p in employees">
                    <option value="">-- Select Employee --</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="FDate">
                    From Date</label>
                <input type="date" ng-model="FDate" id="FDate" name="FDate" class="form-control"
                    required />
            </div>
            <div class="col-md-4">
                <label for="lblTDate">
                    To Date</label>
                <input type="date" ng-model="TDate" id="TDate" name="TDate" class="form-control"
                    required />
            </div>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-sm" ng-click="Go()">
            <span class="glyphicon glyphicon-ok"></span>Submit
        </button>
    </div>
    <div class="container" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
                <th>EmployeeId</th>
                <th>EmployeeName</th>
                <th>Date</th>
                <th></th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.ItemId}}</td>
                <td>{{item.ItemName}}</td>
                <td>{{item.EId}}</td>
                <td>{{item.EName}}</td>
                <td>{{item.Date}}</td>
                <td>
                    <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders
                    </button>
                    <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" ng-click="clicked=false">
                                        ×
                                    </button>
                                    <h4 class="modal-title">Order Details</h4>
                                </div>
                                <div class="modal-body">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                    DId
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    DLocation
                                                </th>
                                                 <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    DDate
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody ng-repeat="subitem in item.Orders">
                                            <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2">
                                                <td><input type="text" class="input-sm form-control" ng-model="subitem.DId" /></td>
                                                <td><input type="text" class="input-sm form-control" ng-model="subitem.DLocation" /></td>
                                                <td><input type="text" class="input-sm form-control" ng-model="subitem.DDate" /></td>                                                 
                                            </tr>
                                        </tbody>                                         
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                        Ok
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Screenshot