Filter record with Stored Procedure and DropDownList using AngularJS in ASP.Net MVC

Last Reply 21 days ago By dharmendr

Posted 21 days ago

Item

Id Name

1 aaa

2 bbb

3 ccc

Report

RId        Id          Item

1           1          Item1

2           1          Item2

3           2          Item3

Create PROCEDURE [dbo].[ItemDetails] 
    @Id1 int
AS
BEGIN
    SELECT Id,Item From Report where Id=@Id1
END

Currently my requirement is that after selecting of relevant droppdown and clicking of submit button need to get relevant records on grid view by using stored procedure

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <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', function ($scope, $http, $window) {
            GetItems();
            function GetItems() {
                $scope.Items = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetReport/'
                }).success(function (data, status, headers, config) {
                    $scope.Items = data;                   
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
 
            $scope.IsVisible = false;
            $scope.GetAllItems = function () {
                if ($scope.Item != undefined) {
                    var Id1 = $scope.Item;
                    $http({
                        method: 'POST',
                        url: '/Home/getAll/',
                        params: { Id: Id1 }
                    }).success(function (data, status, headers, config) {
                        if (data.length > 0) {
                            $scope.items = data;
                            $scope.IsVisible = true;
                        } else {
 
                            $scope.items = [];
                            $scope.IsVisible = false;
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.items = 'Unexpected Error';
                    });
                } else {
                    $scope.items = [];
                    $scope.IsVisible = false;
                }
            }
        } ]);
    </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>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
            <span class="glyphicon glyphicon-ok"></span>Submit
        </button>
    </div>
    <div class="container" ng-show="IsVisible" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Item}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

Could you please kindly help me

Posted 21 days ago

Hi mahesh213,

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

For calling stored procedure refer below article.

ASP.Net MVC: Call Stored Procedure using Entity Framework

Controller

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

    public JsonResult GetReport()
    {
        List<Item> items = new List<Item>();
        items.Add(new Item { Id = 1, Name = "aaa" });
        items.Add(new Item { Id = 2, Name = "bbb" });
        items.Add(new Item { Id = 3, Name = "ccc" });
        return Json(items, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult getAll(int Id)
    {
        // Call your Procedure.
        var result = db.GetItemDetails(Id).ToList();
        var JsonResult = Json(result, JsonRequestBehavior.AllowGet);
        JsonResult.MaxJsonLength = int.MaxValue;
        return JsonResult;
    }

    public class Item
    {
        public int Id { get; set; }
        public string Name { 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.2/css/bootstrap.min.css" />
    <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', function ($scope, $http, $window) {
            GetItems();
            function GetItems() {
                $scope.Items = [];
                $http({
                    method: 'Get',
                    url: 'Home/GetReport/'
                }).success(function (data, status, headers, config) {
                    $scope.Items = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.IsVisible = false;
            $scope.GetAllItems = function () {
                if ($scope.Item != undefined) {
                    var Id1 = $scope.Item;
                    $http({
                        method: 'POST',
                        url: 'Home/getAll/',
                        params: { Id: Id1 }
                    }).success(function (data, status, headers, config) {
                        if (data.length > 0) {
                            $scope.items = data;
                            $scope.IsVisible = true;
                        } else {

                            $scope.items = [];
                            $scope.IsVisible = false;
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.items = 'Unexpected Error';
                    });
                } else {
                    $scope.items = [];
                    $scope.IsVisible = false;
                }
            }
        } ]);
    </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>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
            <span class="glyphicon glyphicon-ok"></span>Submit
        </button>
    </div>
    <div class="container" ng-show="IsVisible" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Item}}</td>
            </tr>
        </table>
    </div>
</body>
</html>