Check and display control based on Database column using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Jun 04, 2019 12:02 AM
Forum: ASP.Net MVC
Answer: 1
Views: 3859
Sample Code: Download

Hi,

I have 2 tables with relevant fields

Report1 .............

Rid RName Rquery

1 2 select Id,Name,gender,PhoneNum,Country where Id={Name} and Id={Country} and gender={Gender}

ReportSettings ..............................

Rid RsId Ctype CName fromtable displaycname valuecname date

1 1 dropdown Name employee name id null

1 2 dropdown Country Country name id null

1 3 Textbox Gender null null null null

after clicking of edit button it was displaying relevant values

please look at into screenshot

https://ibb.co/nPmVHqQ

currently my requirement is that

after clicking of edit button need to check whether relevant control name (CName)exists on relevant query(Rquery) or not

if exists display relevant control name and it's value on screen

in the same way if i have added new control name on query(Rquery) then add that control on screen

in the same if i have changed the name of control name then remove control name and add this control name on screen

I can expain you with sample o/p

Initially i have one query like below

select Id,Name,gender,PhoneNum,Country where Id={Name} and Id={Country} and gender={Gender}

After clicking of edit button in grid view it was displaying relevant values on screen

CName Ctype Fromtable displaycname valuecname date

Name dropdown employee name id null

Country dropdown country name id null

Gender Textbox null null null null

later i have update my Query (Rquery) in Report1 Table

select Id,Name,gender,PhoneNum,Country where Id={Name1} and Id={Country} and phonenum={Phonenum}

eventhough after clicking of edit it was displaying like above o/p only

My expected o/p should be like

CName Ctype Fromtable displaycname valuecname date

Name1

Country dropdown country name id null

Phonenum

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

dharmend...

0 7

Reply
ANSWER
User: dharmendr
Replied: on Jun 06, 2019 07:51 AM
Modified: on Jun 06, 2019 07:52 AM
Report

Hi mahesh213,

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

Model

public class OrderDetails
{
    public Report1 Orders { get; set; }
    public List<ReportSetting> Items { get; set; }
}

Controller

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

    public JsonResult GetReports()
    {
        TestEntities db = new TestEntities();
        return Json(db.Report1.ToList(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Edit(int rID)
    {
        TestEntities db = new TestEntities();
        Report1 report = new Report1();
        report = (from o in db.Report1
                    where o.RId == rID
                    select o).FirstOrDefault();

        string query = report.RQuery;
        System.Text.RegularExpressions.Regex regex = new System.Text.RegularExpressions.Regex(@"\{.*?\}");
        System.Text.RegularExpressions.MatchCollection matches = regex.Matches(query);

        List<string> cnames = new List<string>();
        foreach (var item in matches)
        {
            cnames.Add(item.ToString().Replace("{", "").Replace("}", "").Trim());
        }

        List<ReportSetting> listSetting = new List<ReportSetting>();
        var settings = (from i in db.ReportSettings
                        where i.RId == rID && cnames.Contains(i.CName)
                        select new
                        {
                            RSId = i.RSId,
                            CName = i.CName,
                            CType = i.CType,
                            FromTable = i.FromTable,
                            DisplayCName = i.DisplayCName,
                            ValueCName = i.ValueCName,
                            Date = i.Date,
                        }).ToList();
        foreach (var setting in settings)
        {
            listSetting.Add(new ReportSetting { RSId = setting.RSId, CName = setting.CName, CType = setting.CType, FromTable = setting.FromTable, DisplayCName = setting.DisplayCName, ValueCName = setting.ValueCName, Date = setting.Date });
        }
        var settingsNotInDb = cnames.Where(p => !settings.Any(p2 => p2.CName == p));
        foreach (var item in settingsNotInDb)
        {
            listSetting.Add(new ReportSetting { RSId = rID, CName = item.Trim(), CType = "" });
        }


        OrderDetails details = new OrderDetails();
        details.Orders = report;
        details.Items = listSetting;
        return Json(details, JsonRequestBehavior.AllowGet);
    }
}

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" />
    <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/angular.js/1.5.5/angular.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", ['$scope', '$http', '$anchorScroll', 'myService', function ($scope, $http, $anchorScroll, myService) {
            var getReports = myService.GetReports();
            getReports.then(function (response) {
                $scope.reports = response.data;
            });
            var RId;
            //Edit code for ReportSettings
            $scope.Edit = function (rId) {
                RId = rId;
                $.post("/Home/Edit/", { rID: rId }, function (r) {
                    RId = r.Orders.RId;
                    var id1 = RId;
                    $scope.Details = [];
                    for (var i = 0; i < r.Items.length; i++) {
                        var customer = {};
                        var itemId = r.Items[i].RSId;
                        customer.RId = r.Orders.RId;
                        customer.RSId = r.Items[i].RSId;
                        customer.CName = r.Items[i].CName;
                        customer.CType = r.Items[i].CType;
                        customer.FromTable = r.Items[i].FromTable;
                        customer.DisplayCName = r.Items[i].DisplayCName;
                        customer.ValueCName = r.Items[i].ValueCName;
                        customer.Date = r.Items[i].Date;
                        $scope.Details.push(customer);
                        if (r.Items[i].CType.toLowerCase() == "dropdown") {
                            $scope.Details[i]["isDisabledDate"] = true;
                            $scope.Details[i]["isDisabledFromTable"] = false;
                            $scope.Details[i]["isDisabledDisplayCName"] = false;
                            $scope.Details[i]["isDisabledValueCName"] = false;
                            $scope.Details[i].Date = "";
                        }
                        else if (r.Items[i].CType.toLowerCase() == "datepicker") {
                            $scope.Details[i]["isDisabledFromTable"] = true;
                            $scope.Details[i]["isDisabledDisplayCName"] = true;
                            $scope.Details[i]["isDisabledValueCName"] = true;
                            $scope.Details[i]["isDisabledDate"] = false;
                            $scope.Details[i].FromTable = "";
                            $scope.Details[i].DisplayCName = "";
                            $scope.Details[i].ValueCName = "";
                        }
                        else if (r.Items[i].CType.toLowerCase() == "textbox") {
                            $scope.Details[i]["isDisabledFromTable"] = true;
                            $scope.Details[i]["isDisabledDisplayCName"] = true;
                            $scope.Details[i]["isDisabledValueCName"] = true;
                            $scope.Details[i]["isDisabledDate"] = true;
                            $scope.Details[i].FromTable = "";
                            $scope.Details[i].DisplayCName = "";
                            $scope.Details[i].ValueCName = "";
                            $scope.Details[i].Date = "";
                        }
                    }
                    $scope.$apply();
                });
            }

        } ]);
        app.service("myService", function ($http) {
            this.GetReports = function (user) {
                return $http.get("/Home/GetReports");
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div id="dvContainer">
        <div>
            <div class="table-responsive ">
                <table id="dvData" cellpadding="12" class="table table-bordered table-hover table-striped"
                    style="margin-left: 20px; margin-right: 20px;">
                    <tr class="success">
                        <th><b>RNo</b></th>
                        <th><b>RName</b></th>
                        <th><b>RQuery</b></th>
                        <th><b>ControlActions</b></th>
                    </tr>
                    <tr dir-paginate="report in reports|itemsPerPage:10">
                        <td>
                            <input type="hidden" ng-model="report.RId" />{{report.RNo}}
                        </td>
                        <td>{{report.RName}}</td>
                        <td>{{report.RQuery }}</td>
                        <td><a class="glyphicon glyphicon-edit" ng-click="Edit(report.RId)" href=""></a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <hr />
    <div id="Div1">
        <div>
            <div class="table-responsive ">
                <table id="tblOrders" class="table table-responsive table-bordered">
                    <tr class="success">
                        <th>Cname</th>
                        <th>Ctype</th>
                        <th>From Table</th>
                        <th>DisplayCName</th>
                        <th>ValueCName</th>
                        <th>Date</th>
                    </tr>
                    <tbody dir-paginate="detail in Details|itemsPerPage:10">
                        <tr>
                            <td>{{detail.CName}}</td>
                            <td>
                                <select id="ddlCType" ng-model="detail.CType" class="form-control" ng-change="TypeChange(CType,detail.Cname)">
                                    <option value="">Select Value</option>
                                    <option value="Dropdown">Dropdown</option>
                                    <option value="Datepicker">DatePicker</option>
                                    <option value="Textbox">Textbox</option>
                                </select>
                            </td>
                            <td><input type="text" class="form-control" ng-model="detail.FromTable" ng-disabled="detail.isDisabledFromTable" /></td>
                            <td><input type="text" class="form-control" ng-model="detail.DisplayCName" ng-disabled="detail.isDisabledDisplayCName" /></td>
                            <td><input type="text" class="form-control" ng-model="detail.ValueCName" ng-disabled="detail.isDisabledValueCName" /></td>
                            <td>
                                <select id="ddlDate" ng-model="detail.Date" class="form-control" ng-disabled="detail.isDisabledDate">
                                    <option value="">Select</option>
                                    <option value="Today">Today</option>
                                    <option value="Yesterday">Yesterday</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot

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

Check and display control based on Database column using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us