Pass (Send) DropDownList selected Value to Controller in ASP.Net MVC using AngularJS

Last Reply 16 days ago By dharmendr

Posted 16 days ago

I have 3 tables table

1)category table

2)product table

3)itemtable

based upon category values it should display product i want to save productName id to itemtable

finally after clicking of save function it can be saved to itemtable

For me in item table productId value showing zero

category

CategoryID CategoryName

1 shhs

2 euueu

 

Product

ProductID CategoryID ProductName

1               1                  dhhdhd

2               1                  dhdhdhd

3               2                  333

 

itemtable

Expetected ouput

Id Name ProductID

1   mahesh 1

2   dddj      2

 

getting output

Id Name ProductID

1   mahesh   0

2   dddj        0

@{ 
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.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" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Customers = [];

            GetCategory();
            function GetCategory() {
                $scope.categories = [];
                $http({
                    method: 'Get',
                    url: '/autocomplete/GetCategories/',
                }).success(function (data, status, headers, config) {
                    $scope.categories = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            $scope.GetProducts = function () {
                var countryId = $scope.Category.CategoryID;
                var data = { "CategoryID": countryId };
                var config = {
                    params: data,
                    headers: { 'Accept': 'application/json' }
                };
                if (countryId) {
                    $http.get("/autocomplete/GetProducts/'", config)
                .then(function (data, status, headers, config) {
                    $scope.products = data.data;
                }, function (response) {
                    alert(response.responseText);
                });
                }
                else {
                    $scope.products = null;
                }
            }
            $scope.Add = function () {
                var customer = {};
                $scope.Customers.push({
                    Name: $scope.Name,                   
                    Product: $scope.Product.ProductName,
                    Category: $scope.Category.CategortName,
                });

                $scope.Name = "";
                $scope.Category = "";
                $scope.Product = "";
            };

            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Category;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }
            }

            $scope.Save = function () {
                var User = {};
                User["customers"] = $scope.Customers;
                debugger;
                alert(JSON.stringify(User));
                $http({
                    method: "Post",
                    url: "/autocomplete/SaveOrder",
                    data: User
                }).success(function (data) {
                    alert(data);
                }).error(function (err) {
                    $scope.Message = err.Message;
                })
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>
                    Category
                </th>
                <th>
                Product    
                </th>
                <th>
                    Action
                </th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Name}}</td>
                    <td>
                        {{m.Category}}
                       
                    </td>
                    <td>
                        {{m.Product}}
                    </td>
                   
                    <td>
                        <input type="button" class="btn btn-danger" ng-click="Remove($index)" value="Remove" />
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="text" ng-model="Name" class="input-sm form-control" />

                    </td>
                    <td>
                        <select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts()" ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
                            <option value="">Select Category</option>
                        </select>
                    </td>
                    <td>
                        <select select2="" ng-model="Product" ng-disabled="!products"
                                class="input-sm form-control" ng-options="s as s.ProductName for s in products">
                            <option value="">-- Select Product --</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" class="btn btn-primary" ng-click="Add()" value="Add" />
                    </td>
                </tr>
            </tfoot>
        </table>
        <div style="padding:10px 0;">
            <input id="submit" type="button" value="Save" name="add" ng-click="Save()" ng-disabled="userForm.$invalid" class="btn btn-success" style="padding:10px 20px" reruired=reruired autofocus=autofocus />
        </div>
    </div>
</body>
</html>

 

using Readanddisplayexcelfile.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Readanddisplayexcelfile.Controllers
{
    public class AutoCompleteController : Controller
    {
        private InvoiceEntities db = new InvoiceEntities();
        // GET: AutoComplete
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetCategories()
        {
            db.Configuration.ProxyCreationEnabled = false;
            var coun = db.Categories.Select(model => new { model.CategoryID, model.CategortName }).ToList();
            return Json(coun, JsonRequestBehavior.AllowGet);
        }

        [HttpGet]
        public ActionResult GetProducts(int? CategoryID)
        {
            db.Configuration.ProxyCreationEnabled = false;
            var coun = db.Products.Where(model => model.ProductID == CategoryID).Select(model => new { model.ProductID, model.ProductName }).ToList();
            return Json(coun, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult SaveOrder(Itemtable[] item1)
        {
            string result = "Error! Order Is Not Complete!";
            if (item1 != null )
            {
                foreach (var item in item1)
                {
                    //var orderId = Guid.NewGuid();
                    Itemtable O = new Itemtable();
                    //O.RAI_Id = orderId;
                    O.Name = item.Name;
                    O.ProductID = item.ProductID;

                    //O.subitem1 = item.subitem1;
                    db.Itemtables.Add(O);
                }

                db.SaveChanges();
                result = "Success! Order Is Complete!";
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
}

 

Posted 16 days ago
mahesh213 says:
$scope.Add = function () {
                var customer = {};
                $scope.Customers.push({
                    Name: $scope.Name,                  
                    Product: $scope.Product.ProductName,
                    Category: $scope.Category.CategortName,
                });
 
                $scope.Name = "";
                $scope.Category = "";
                $scope.Product = "";
            };

Change the above line with the below.

            $scope.Add = function () {
                var customer = {};
                $scope.Customers.push({
                    Name: $scope.Name,
                    Product: $scope.Product.ProductName,
                    ProductId: $scope.Product.ProductID,
                    Category: $scope.Category.CategortName
                });

                $scope.Name = "";
                $scope.Category = "";
                $scope.Product = "";
            };

Here you need to add another property to the Customers scope and then in code behind assign the ProductId to the Itemtable table ProductID column for saving.