Detailed explanation of the idea of realizing dynamic column by angularjs circular object attribute

angularjs Loop Object Attributes Implement Dynamic Columns

Advantages: Save objects, only save 1 piece of data in the database

Disadvantages: Adding object attributes requires modifying table structure, code, and then republishing

Realization thought

1) The database creates tables (objects) and fields (object attributes)

2) Generate configuration table according to table (object) and field (object attribute)

3) Generate a 3-tier architecture based on tables (objects) and fields (object attributes)

4) The demo code is as follows

1. Interface code:

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using WebApplication1.Models;
 
namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index(string objecttype)
        {
            ViewBag.objecttype = objecttype;
            return View();
        }
        [HttpPost]
        public JsonResult GetItem(string objecttype)
        {
            if (objecttype == "student")
            {
                Student item = new Student
                {
                    no = "S001",
                    name = " Zhang 3",
                    gender = " Male ",
                };
                List<Column> columns = new List<Column>();
                columns.Add(new Column { columnname = "no", displaynname=" Student number " });
                columns.Add(new Column { columnname = "name", displaynname = " Name " });
                columns.Add(new Column { columnname = "gender", displaynname = " Gender " });
                return Json(new { code = "1", msg = "", item = item, columns = columns });
            }
            else
            {
                School item = new School
                {
                    no = "S001",
                    name = " Zhejiang University ",
                    address = " Zhejiang ",
                };
                List<Column> columns = new List<Column>();
                columns.Add(new Column { columnname = "no", displaynname = " Code " });
                columns.Add(new Column { columnname = "name", displaynname = " Name " });
                columns.Add(new Column { columnname = "address", displaynname = " Address " });
                return Json(new { code = "1", msg = "", item = item, columns = columns });
            }
        }
 
        [HttpPost]
        public JsonResult SaveItem(string objecttype, string itemstring)
        {
            if (objecttype == "student")
            {
                Student item = JsonConvert.DeserializeObject<Student>(itemstring);
            }
            else
            {
                School item = JsonConvert.DeserializeObject<School>(itemstring);
            }
            return Json(new { ResultCode = "1", ResultMessage = " Save successfully! " });
        }
    }
    public class Student
    {
        public string no { get; set; }
        public string name { get; set; }
        public string gender { get; set; }
    }
    public class School
    {
        public string no { get; set; }
        public string name { get; set; }
        public string address { get; set; }
    }
    public class Column
    { 
        public string columnname { get; set; }
        public string displaynname { get; set; }
    }
}

2. angularjs front end code

@{
    ViewData["Title"] = "Home Page";
}
 
<script type="text/javascript">
    var app = angular.module("my_app", []);
    app.controller('my_controller', function ($scope) {
        // Save 
        $scope.saveItem = function () {
            var itemstring = JSON.stringify($scope.item)
            $.post('@Url.Action("SaveItem", "Home")', { objecttype: '@ViewBag.objecttype', itemstring: itemstring }, function (data) {
 
            });
        }
        // Get 
        $scope.getItem = function () {
            $.post('@Url.Action("GetItem", "Home")', { objecttype: '@ViewBag.objecttype' }, function (result) {
                $scope.item = result.item;
                $scope.columns = result.columns;
                $scope.$apply();
            });
        }
        $scope.getItem();
    });
</script>
<div>
    <ul>
        <li ng-repeat="column in columns">
            <span>{{column.displaynname}}</span>
            <input ng-if="item[column.columnname]&&item[column.columnname].length" ng-model="item[column.columnname]" />
        </li>
    </ul>
    <input type="button" value=" Save " ng-click="saveItem();" />
</div>