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
