Add Update HTML Table row without saving in database using AngularJS in ASP.Net MVC

nabilabo...

SOLVED CLOSED ACTIVE ANSWERED
User: nabilabolo
Posted: on May 12, 2020 06:11 AM
Forum: ASP.Net MVC
Answer: 1
Views: 3944

Hi,

How can i just select the dropdown and display it in the table without saving into database in angularjs?

The link below is the image as i expected.

After I click ADD button, the selected dropdown will display in the table but not save it into database.

here is my code

View

<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $filter) {
        $scope.Materials = [];
        $scope.material = "0";
        $scope.quantity = "0";
        $scope.Add = function () {
            var material = {};
            if ($scope.material != "0") {
                material.Material = $scope.material;
                material.Quantity = $scope.quantity != undefined ? $scope.quantity : 0;
                var materialExist = $filter('filter')($scope.Materials, { Material: $scope.material }, true);
                if (materialExist.length > 0) {
                    for (var i = 0; i < $scope.Materials.length; i++) {
                        if ($scope.Materials[i].Material == $scope.material) {
                            if ($scope.quantity != undefined) {
                                $scope.Materials[i].Quantity = parseInt($scope.Materials[i].Quantity) + parseInt($scope.quantity);
                            }
                            break;
                        }
                    }
                } else {
                    $scope.Materials.push(material);
                }
            }
        };
    });
</script>

<div ng-app="MyApp" ng-controller="MyController">
     <table>
        <tr>
            <td>Material</td>
            <td>
                <select ng-model="material">
                     <option value="0">Select</option>
                      @foreach (var item in ViewBag.material)
                      {
                           <option value='@item.ID'>@item.Material</option>
                      }
                 </select>
              </td>
              <td>Quantity</td>
              <td>
                  <select ng-model="quantity">
                  @{
                     for (int i = 1; i <= 100; i++)
                     {
                         <option value="i">@i</option>
                      }
                    }
                   </select>
                </td>
                <td>  <span><input type="submit" value="Add Material" class="btn btn-primary" ng-click="Add()" /></span></td>
           </tr>
      </table>

      <table cellpadding="1" cellspacing="1">
          <tr>
              <th>Material</th>
              <th>Quantity</th>
              <th></th>
          </tr>
          <tbody ng-repeat="m in Materials">
          <tr>
              <td>{{m.Material}}</td>
              <td>{{m.Quantity}}</td>
              <td><a href="#">Update</a> | <a href="#">Delete</a></td>
          </tr>
          </tbody>
       </table>

</div>

Controller for ViewBag.material

        public ActionResult FormRequest()
        {
            var material = db.MaterialLists.ToList();
            ViewBag.material = material;            
            return View();
        }

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

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on May 15, 2020 01:20 AM
Report

Hi nabilabolo,

Refer below sample code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<Materials> materials = new List<Materials>();
        materials.Add(new Materials { ID = 1, Material = "Pencil" });
        materials.Add(new Materials { ID = 2, Material = "A4 Paper" });
        materials.Add(new Materials { ID = 3, Material = "Rubber" });
        ViewBag.material = materials;

        return View();
    }

    public class Materials
    {
        public int ID { get; set; }
        public string Material { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
        }

            table th {
                background-color: #F7F7F7;
                color: #333;
                font-weight: bold;
            }

            table th, table td {
                padding: 5px;
                border-color: #ccc;
            }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $filter, $document) {
            $scope.Materials = [];
            $scope.materialValue = "0";
            $scope.quantity = "0";
            $scope.Add = function () {
                var material = {};
                if ($scope.material != "Select" && $scope.material != "") {
                    material.Material = $scope.material;
                    material.Quantity = $scope.quantity != undefined ? $scope.quantity : 0;
                    var materialExist = $filter('filter')($scope.Materials, { Material: $scope.material }, true);
                    if (materialExist.length > 0) {
                        for (var i = 0; i < $scope.Materials.length; i++) {
                            if ($scope.Materials[i].Material == $scope.material) {
                                if ($scope.quantity != undefined) {
                                    $scope.Materials[i].Quantity = parseInt($scope.Materials[i].Quantity) + parseInt($scope.quantity);
                                }
                                break;
                            }
                        }
                    } else {
                        $scope.Materials.push(material);
                    }
                }
            };
            $scope.material = '';
            $scope.setMaterialName = function () {
                var ddl = angular.element(document.getElementById('ddlMaterial'));
                $scope.material = ddl[0].options[ddl[0].options.selectedIndex].text;
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Material</td>
                <td>
                    <select id="ddlMaterial" ng-model="materialValue" ng-change="setMaterialName()">
                        <option value="0">Select</option>
                        @foreach (var item in ViewBag.material)
                        {
                            <option value='@item.ID'>@item.Material</option>
                        }
                    </select>
                </td>
                <td>Quantity</td>
                <td>
                    <select ng-model="quantity">
                        <option value="0">Select</option>
                        @{
                            for (int i = 1; i <= 100; i++)
                            {
                                <option value="@i">@i</option>
                            }
                        }
                    </select>
                </td>
                <td><input type="submit" value="Add Material" ng-click="Add()" /></td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Material</th>
                <th>Quantity</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Materials">
                <tr>
                    <td>{{m.Material}}</td>
                    <td>{{m.Quantity}}</td>
                    <td><a href="#">Update</a> | <a href="#">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Screenshot

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

Add Update HTML Table row without saving in database using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us