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

Last Reply 7 months ago By dharmendr

Posted 7 months ago


Id Name

1 aaa

2 bbb

3 ccc


RId        Id          Item

1           1          Item1

2           1          Item2

3           2          Item3

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

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="">
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', ['$scope', '$http', function ($scope, $http, $window) {
            function GetItems() {
                $scope.Items = [];
                    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;
                        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;
        } ]);
<body ng-app="MyApp" ng-controller="MyController">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">
            <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>
        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
            <span class="glyphicon glyphicon-ok"></span>Submit
    <div class="container" ng-show="IsVisible" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
            <tr ng-repeat="item in items">

Could you please kindly help me

This question does not have replies that have been liked.