HiI have one form with 3 feildsCurrently my requirement is that what ever values i have checked in checkbox popupneed to display those checkbox Ids in next textbox with comma separatedcheckbox IdEx134 Layout nulllthtmlgtltheadgt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery331jqueryminj

Hi mahesh213Refer below codeViewlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtIndexlttitlegt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs139angularminjs34gtltscriptgt ltscript type34textjavascript34 src34httpscdnjsdelivrnetnpmangularutilspagination0111dirPaginationjs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule39MyApp39 39angularUtilsdirectivesdirPagination39 appcontroller39MyController39 function scope http window scopetaxes Id 1 Name 39GST39 Selected false Id 2 Name 39CGST39 Selected true Id 3 Name 39

Display multiple Checked CheckBox Id as Comma Separated string using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Jul 31, 2019 02:49 AM
Forum: ASP.Net MVC
Answer: 1
Views: 5760
Sample Code: Download

Hi,

I have one form with 3 feilds

Currently my requirement is that what ever values i have checked in checkbox popup

need to display those checkbox Id's in next textbox with comma separated(checkbox Id)

Ex:1,3,4

@{ 
    Layout = null;
}

<html>
<head>
    <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://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="~/scripts/dirpagination.js"></script>
    <script>
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http,RegistrationService, $window) {
            loadEmployees();
            function loadEmployees() {
                var EmployeeRecords = RegistrationService.gettaxes();
                EmployeeRecords.then(function (d) {
                    //success
                    $scope.taxes = d.data;
                },
                function () {
                    alert("Error occured while fetching employee list...");
                });
            }
            $scope.taxes = [];           
        });
        app.service("RegistrationService", function ($http) {
            //get All taxes
            this.gettaxes = function () {
                return $http.get("/jobcode/getAll1");
            };
        });

    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="well">
        <div class="form-horizontal">
            <div class="row">
            <div class="col-md-3">
                <label for="Name">Order Name</label>
                <input type="text" id="Name" class="form-control"  ng-model="JobName" />
            </div>   
                <div class="col-md-3">
                    <label for="Job Type">Description</label>
                        <button type="button" class="btn btn-primary btn-sm" ng-init="clicked=false" ng-click="clicked=!clicked">
                            View Orders
                        </button>
                </div>  
                <div class="col-md-3">
                    <label for="Name">Checkbox Id</label>
                    <input type="text" id="CId" class="form-control" ng-model="CId" />
                </div>   
                </div>
            <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 style="margin-left: 15px; text-align:center;">Subitem Details</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <fieldset>
                                    <!-- Form Name -->
                                    <label style="margin-left: 25px;" ng-repeat="o in taxes"  class="checkbox">
                                        <input type="hidden" ng-model="o.Id" />
                                        <input type="checkbox" name="subject" ng-checked="{{o.Selected}}" ng-model="o.Selected" />{{o.Name}}
                                    </label>                                
                                </fieldset>
                            </form>                          
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                Ok
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

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

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jul 31, 2019 08:25 AM
Report

Hi mahesh213,

Refer below code.

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://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.taxes = [{ Id: 1, Name: 'GST', Selected: false },
                            { Id: 2, Name: 'CGST', Selected: true },
                            { Id: 3, Name: 'SGST', Selected: false}];
            $scope.GetChecked = function () {
                var checkedId = '';
                angular.forEach($scope.taxes, function (item, index) {
                    if (item.Selected) {
                        checkedId += item.Id + ",";
                    }
                });
                $scope.CId = checkedId.slice(0, checkedId.length - 1);
            }
        }); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="well">
        <div class="form-horizontal">
            <div class="row">
                <div class="col-md-3">
                    <label for="Name">
                        Order Name</label>
                    <input type="text" id="Name" class="form-control" ng-model="JobName" />
                </div>
                <div class="col-md-3">
                    <label for="Job Type">
                        Description</label>
                    <button type="button" class="btn btn-primary btn-sm" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders
                    </button>
                </div>
                <div class="col-md-3">
                    <label for="Name">
                        Checkbox Id</label>
                    <input type="text" id="CId" class="form-control" ng-model="CId" />
                </div>
            </div>
            <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 style="margin-left: 15px; text-align: center;">
                                Subitem Details</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                            <fieldset>
                                <!-- Form Name -->
                                <label style="margin-left: 25px;" ng-repeat="o in taxes" class="checkbox">
                                    <input type="hidden" ng-model="o.Id" />
                                    <input type="checkbox" name="subject" ng-checked="{{o.Selected}}" ng-model="o.Selected" />{{o.Name}}
                                </label>
                            </fieldset>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" ng-click="clicked=false;GetChecked();">
                                Ok
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot

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

Display multiple Checked CheckBox Id as Comma Separated string using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us