Generate controls dynamically from database value using AngularJS in ASP.Net MVC

Last Reply one year ago By dharmendr

Posted one year ago

Hi,

I have 2 tables in database like below

Report1

RId RName RNo Rquery

1 Invoice 233 .........................

ReportSetting

RSId RId CName CType FromTable DisplayCName ValueCName Date

1 1 Item Dropdown MA_RAI RAI_Name RAI_Id null

2 1 From DatePicker null null null Today

3 1 To Datepicker null null null Yesterday

4 1 Name Textbox null null null null

Currently my requirement is

I have one dropdown named as report

after selecting relevant value in report need to display relevant CName and Ctype values in form like below

If type=dropdown need to fetch values from database based upon (FromTable, DisplayCName, valueCName)

i have stored these values in database 

I am generating everything dynamically even label name also

If we can look at into my tables RId=1 has 4 controllers Ctype(Drodown,datepicker,textbox) with lable names(CName) also

Currently my requirement after opening of form it can display one dropdown named as report

based upon report name i need to display relevant label names (CName) with relevant Types(CType) with their relevant values(dropdown)

Dropdown value Should be  filling form MA_RAI table which i have mentioned in Report setting table

In Ma_RAI table i have 2 values

RAI_Id RAI_Name

1 aaa

2 bbbb

Final requirement is

After clicking of report name need to display relevant CName(LabelName) and Ctype(ControlType with relevant value (drodown)) values in form

Dropdown value also should populate from database If you can look at into database Item I have mentioned Table name, Id and name

Posted one year ago Modified on one year ago

Hi mahesh213,

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

I have used the tables Report1, ReportSetting, Employee, Customers with the records below.

Controller

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

    [HttpGet]
    public ActionResult GetReportNames()
    {
        TestEntities db = new TestEntities();
        var coun = db.Report1.Select(model => new { model.RId, model.RName }).ToList();
        return Json(coun, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult getAll(int Id)
    {
        TestEntities db = new TestEntities();
        List<Details> employeeList = (from E in db.ReportSettings
                                        where E.RId == Id
                                        orderby E.RSId
                                        select new Details
                                        {
                                            RSId = E.RSId,
                                            RId = E.RId,
                                            CName = E.CName,
                                            CType = E.CType,
                                            ValueCName = E.ValueCName,
                                            DisplayCName = E.DisplayCName,
                                            FromTable = E.FromTable,
                                            Date = E.Date
                                        }).ToList();
        foreach (Details details in employeeList)
        {
            if (details.CType.ToLower() == "dropdown")
            {
                var coun = db.ReportSettings.Where(x => x.CType == details.CType && x.RId == details.RId && x.RSId == details.RSId).ToList();
                string fromTable = coun[0].FromTable;
                string displayCName = coun[0].DisplayCName;
                string valueCName = coun[0].ValueCName;
                // Generate dynamic query.
                string query = "SELECT " + displayCName + " AS Text," + valueCName + " AS Value FROM " + fromTable;
                // Execute dynamic query.
                var values = db.ExecuteStoreQuery<DDLOptions>(query).ToList();
                // Adding options for DropDownList.
                details.DDLValues = values;
            }
            else if (details.CType.ToLower() == "datepicker")
            {
                // Settting DatePicker value to display default text.
                switch (details.Date.ToLower())
                {
                    case "today":
                        details.Date = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd");
                        break;
                    case "lastday":
                        details.Date = DateTime.Now.ToString("yyyy-MM-dd");
                        break;
                    default:
                        break;
                }
            }
        }

        return Json(employeeList, JsonRequestBehavior.AllowGet);
    }

    public class DDLOptions
    {
        public string Text { get; set; }
        public int Value { get; set; }
    }

    public class Details
    {
        public int RSId { get; set; }
        public int? RId { get; set; }
        public string CName { get; set; }
        public string CType { get; set; }
        public string ValueCName { get; set; }
        public string DisplayCName { get; set; }
        public string FromTable { get; set; }
        public string Date { get; set; }
        public List<DDLOptions> DDLValues { get; set; }
    }
}

View

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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" />
    <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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">
        var app = angular.module("MyApp", []);
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                link: function (scope, element, attrs) {
                    console.log(attrs);
                    $timeout(function () {
                        element.select2();
                        element.select2Initialized = true;
                    });

                    var refreshSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.trigger('change');
                        });
                    };

                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            element.select2();
                        });
                    };

                    scope.$watch(attrs.ngModel, refreshSelect);

                    if (attrs.ngOptions) {
                        var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
                        // watch for option list change
                        scope.$watch(list, recreateSelect);
                    }

                    if (attrs.ngDisabled) {
                        scope.$watch(attrs.ngDisabled, refreshSelect);
                    }
                }
            };
        });
        app.controller("MyControll", ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
            GetReportName();
            function GetReportName() {
                $scope.reports = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetReportNames'
                }).success(function (data, status, headers, config) {
                    $scope.reports = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.Change = function () {
                var Id1 = $scope.RName;
                $http({
                    method: 'POST',
                    url: '/Home/getAll/',
                    params: { Id: Id1 }
                }).success(function (data, status, headers, config) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].Date != null) {
                            data[i].Date = new Date(data[i].Date);
                        }
                    }
                    $scope.items = data;
                }).error(function (data, status, headers, config) {
                    $scope.items = 'Unexpected Error';
                });
            }
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyControll">
    <div class="container">
        <div id="wrapper" class="clearfix">
            <form name="userForm" novalidate>
            <h4 class="modal-title" style="text-align: center;">
                Report Details</h4>
            <div class="form-horizontal">
                <div class="form-row">
                    <div class="col-md-4">
                        <label for="RName">
                            ReportName</label>
                        <select class="form-control" id="RName" select2="" ng-model="RName" containercssclass="all"
                            ng-options="c.RId as c.RName for c in reports" ng-disabled="disabled" ng-change="Change()">
                            <option value="">Select Name</option>
                        </select>
                    </div>
                </div>
            </div>
            </form>
        </div>
        <br />
        <div class="well">
            <div ng-repeat="report in items">
                <div class="row">
                    <div class="col-md-2">
                        <label for="RNo">
                            {{report.CName}}</label>
                    </div>
                    <div class="col-md-3" id="dvDynamic">
                        <%--Dynamic Controls display based on CType Start--%>
                        <select class="form-control" ng-model="report.FromTable" ng-show="report.CType.toLowerCase()=='dropdown'"
                            ng-options="c.Value as c.Text for c in report.DDLValues">
                            <option value="">Select</option>
                        </select>
                        <input type="date" class="form-control" ng-model="report.Date" ng-show="report.CType.toLowerCase()=='datepicker'" />
                        <input type="text" class="form-control" ng-show="report.CType.toLowerCase()=='textbox'" />
                        <%--Dynamic Controls display based on CType End--%>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot