ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display record on HTML Table based upon dynamic control values using AngularJS in ASP.Net MVC<p>Hi&nbsp;mahesh213,</p> <p>Refer below code and modify accordingly.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">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 =&gt; new { model.RId, model.RName }).ToList(); return Json(coun, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult getAll(int Id) { TestEntities db = new TestEntities(); List&lt;Details&gt; 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() == &#34;dropdown&#34;) { var coun = db.ReportSettings.Where(x =&gt; x.CType == details.CType &amp;&amp; x.RId == details.RId &amp;&amp; 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 = &#34;SELECT &#34; + displayCName + &#34; AS Text,&#34; + valueCName + &#34; AS Value FROM &#34; + fromTable; // Execute dynamic query. SqlConnection con = new SqlConnection(); string connectionstring = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; con.ConnectionString = connectionstring; SqlCommand cmd = new SqlCommand(query, con); con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); List&lt;SelectListItem&gt; values = new List&lt;SelectListItem&gt;(); while (sdr.Read()) { values.Add(new SelectListItem { Text = sdr[&#34;Text&#34;].ToString(), Value = sdr[&#34;Value&#34;].ToString() }); } con.Close(); // Adding options for DropDownList. details.DDLValues = values; } else if (details.CType.ToLower() == &#34;datepicker&#34;) { // Settting DatePicker value to display default text. switch (details.Date.ToLower()) { case &#34;today&#34;: details.Date = DateTime.Now.ToString(&#34;yyyy-MM-dd&#34;); break; case &#34;yesterday&#34;: details.Date = DateTime.Now.AddDays(-1).ToString(&#34;yyyy-MM-dd&#34;); break; default: break; } } } return Json(employeeList, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult PopulateTable(Detail values) { TestEntities db = new TestEntities(); // Getting the query from Report1 table. string query = db.Report1.Where(x =&gt; x.RId == values.RId).Select(x =&gt; x.Rquery).FirstOrDefault(); for (int i = 0; i &lt; values.details.Count; i++) { string key = &#34;{&#34; + values.details[i].Text + &#34;}&#34;; string value = &#34;&#39;&#34; + values.details[i].Value + &#34;&#39;&#34;; // Replace the place holder with value. query = query.Replace(key, value); } // Execute your final query and return json result and bind the gridview on success function. // Your code to return json. return Json(null, JsonRequestBehavior.AllowGet); } public class Detail { public int RId { get; set; } public List&lt;SelectListItem&gt; details { 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&lt;SelectListItem&gt; DDLValues { get; set; } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width&#34; /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, []); app.controller(&#34;MyControll&#34;, [&#39;$scope&#39;, &#39;$http&#39;, &#39;$filter&#39;, function ($scope, $http, $filter) { GetReportName(); function GetReportName() { $scope.reports = []; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetReportNames&#39; }).success(function (data, status, headers, config) { $scope.reports = data; }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.Change = function () { var Id1 = $scope.RName; if (Id1 != null) { $http({ method: &#39;POST&#39;, url: &#39;/Home/getAll/&#39;, params: { Id: Id1 } }).success(function (data, status, headers, config) { for (var i = 0; i &lt; 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 = &#39;Unexpected Error&#39;; }); } } function ConvertDate(d) { var parts = d.split(&#34; &#34;); var months = { Jan: &#34;01&#34;, Feb: &#34;02&#34;, Mar: &#34;03&#34;, Apr: &#34;04&#34;, May: &#34;05&#34;, Jun: &#34;06&#34;, Jul: &#34;07&#34;, Aug: &#34;08&#34;, Sep: &#34;09&#34;, Oct: &#34;10&#34;, Nov: &#34;11&#34;, Dec: &#34;12&#34; }; return parts[3] + &#34;/&#34; + months[parts[1]] + &#34;/&#34; + parts[2]; } $scope.Save = function () { var Id1 = $scope.items; var rId = $scope.RName; var details = {}; var array = []; for (var i = 0; i &lt; $scope.items.length; i++) { var data = {}; data.Text = $scope.items[i].CName; if ($scope.items[i].CType.toLowerCase() == &#39;dropdown&#39;) { data.Value = $scope.items[i].FromTable; } else if ($scope.items[i].CType.toLowerCase() == &#39;datepicker&#39;) { data.Value = ConvertDate($scope.items[i].Date.toString()); } else if ($scope.items[i].CType.toLowerCase() == &#39;textbox&#39;) { data.Value = $scope.items[i].ValueCName; } array.push(data) details.RId = rId; details.details = array; } $http({ method: &#34;Post&#34;, url: &#34;/Home/PopulateTable&#34;, dataType: &#39;json&#39;, headers: { &#34;Content-Type&#34;: &#34;application/json&#34; }, data: &#39;{values: &#39; + JSON.stringify(details) + &#39;}&#39; }).success(function (data) { // Assign scope to bind gridview. }).error(function (err) { }) } }]); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyControll&#34;&gt; &lt;div class=&#34;container&#34;&gt; &lt;div id=&#34;wrapper&#34; class=&#34;clearfix&#34;&gt; &lt;form name=&#34;userForm&#34; novalidate&gt; &lt;h4 class=&#34;modal-title&#34; style=&#34;text-align: center;&#34;&gt; Report Details &lt;/h4&gt; &lt;div class=&#34;form-horizontal&#34;&gt; &lt;div class=&#34;form-row&#34;&gt; &lt;div class=&#34;col-md-4&#34;&gt; &lt;label for=&#34;RName&#34;&gt; ReportName &lt;/label&gt; &lt;select class=&#34;form-control&#34; id=&#34;RName&#34; select2=&#34;&#34; ng-model=&#34;RName&#34; containercssclass=&#34;all&#34; ng-options=&#34;c.RId as c.RName for c in reports&#34; ng-disabled=&#34;disabled&#34; ng-change=&#34;Change()&#34;&gt; &lt;option value=&#34;&#34;&gt;Select Name&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;br /&gt; &lt;div class=&#34;well&#34;&gt; &lt;div ng-repeat=&#34;report in items&#34;&gt; &lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-md-2&#34;&gt; &lt;label for=&#34;RNo&#34;&gt; {{report.CName}} &lt;/label&gt; &lt;/div&gt; &lt;div class=&#34;col-md-3&#34; id=&#34;dvDynamic&#34;&gt; @*Dynamic Controls display based on CType Start*@ &lt;select class=&#34;form-control&#34; ng-model=&#34;report.FromTable&#34; ng-show=&#34;report.CType.toLowerCase()==&#39;dropdown&#39;&#34; ng-options=&#34;c.Text as c.Text for c in report.DDLValues&#34;&gt; &lt;option value=&#34;&#34;&gt;Select&lt;/option&gt; &lt;/select&gt; &lt;input type=&#34;date&#34; class=&#34;form-control&#34; ng-model=&#34;report.Date&#34; ng-show=&#34;report.CType.toLowerCase()==&#39;datepicker&#39;&#34; /&gt; &lt;input type=&#34;text&#34; class=&#34;form-control&#34; ng-model=&#34;report.ValueCName&#34; ng-show=&#34;report.CType.toLowerCase()==&#39;textbox&#39;&#34; /&gt; @*Dynamic Controls display based on CType End*@ &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;input type=&#34;button&#34; value=&#34;Save&#34; ng-click=&#34;Save()&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p><strong><span style="text-decoration: underline;">Screenshots</span></strong></p> <p>The Form</p> <p><img src="https://i.imgur.com/Y3IFiKC.jpg" alt="" width="237" height="512" /></p> <p>Values in Controller</p> <p><img src="https://i.imgur.com/qVMuCpo.jpg" alt="" width="444" height="666" /></p> <p>The query after replacing flower brackets</p> <p><img src="https://i.imgur.com/rza9TRO.jpg" alt="" width="471" height="216" /></p>https://www.aspforums.net:443/Threads/194257/Display-record-on-HTML-Table-based-upon-dynamic-control-values-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/194257/Display-record-on-HTML-Table-based-upon-dynamic-control-values-using-AngularJS-in-ASPNet-MVC/Wed, 08 May 2019 06:27:49 GMT