Bind Dynamic Table in MVC

-

EmployeesController

 public ActionResult Index()
 {
     return View();
 }

 //GET JSON Method for Get details
 public JsonResult GetEmployeeDetails(int ID, string tableName)
 {
     JsonResult json = new JsonResult();
     DataTable dtEmployeeDetails = new DataTable();
     dtEmployeeDetails = GetDetails(tableName);

     if (dtEmployeeDetails != null)
     {
         string returnData = GetJson(dtEmployeeDetails);
         json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
         json.Data = returnData;
         return json;
         //  return Json(returnData, JsonRequestBehavior.AllowGet);
     }
     else
         return Json("nosession", JsonRequestBehavior.AllowGet);
 }
public DataTable GetDetails(string tableName)
{
    DataTable dtEmployeeDetails = new DataTable(tableName);
    dtEmployeeDetails.Columns.Add("EmpNo");
    dtEmployeeDetails.Columns.Add("EmpName");
    dtEmployeeDetails.Columns.Add("EmpDesignation");
    dtEmployeeDetails.Columns.Add("EmpSalary");
    dtEmployeeDetails.Rows.Add("CS001", "Senthil", "Software Engineer", "00000");
    dtEmployeeDetails.Rows.Add("CS001", "Sugesh", "Software Tester", "00001");
    dtEmployeeDetails.Rows.Add("CS001", "Asif", "Software Engineer", "00002");
    dtEmployeeDetails.Rows.Add("CS001", "Vishnu", "Software Tester", "00003");
    dtEmployeeDetails.Rows.Add("CS001", "Kiran", "Software Engineer", "00004");
    return dtEmployeeDetails;
}
 //Convert DataTable to JSON
 public static string GetJson(DataTable dt)
 {
     System.Web.Script.Serialization.JavaScriptSerializer serializer =
        new System.Web.Script.Serialization.JavaScriptSerializer();
     List<Dictionary<string, object>> rows =
        new List<Dictionary<string, object>>();
     Dictionary<string, object> row = null;

     foreach (DataRow dr in dt.Rows)
     {
         row = new Dictionary<string, object>();
         foreach (DataColumn col in dt.Columns)
         {
             row.Add(col.ColumnName, dr[col]);
         }
         rows.Add(row);
     }
     return serializer.Serialize(rows);
 }

View
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="HeadingPage" class="hide">
    <div class="row"></div>
</div>

<div id="ShowGrid" class="tab-content table-responsive">
    <div class="row"></div>
</div>

<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<script src="~/Scripts/EmployesScript.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        BindDynamicTable();
    });

</script>


EmployeesScripts.js

function BindDynamicTable() {
    var baseurl = (window.location.protocol + "//" + window.location.host + "/").replace('Employees/', '');
    var url = baseurl + 'Employees/GetEmployeeDetails?ID=1&tableName="DynamicHTML"';

    $.getJSON(url).success(function (result) {

        jsonString = $.parseJSON(result);
        console.log(jsonString);
        $("#HeadingPage .row").append('<div style="text-align: center;"><b><h2> Dynamic HTML Table</h2></b></div>');

        var headingRowBuilder = new StringBuilder();
        headingRowBuilder.append("<table class=\"table\" align=\"center\" border=\"2\"><thead>");
        headingRowBuilder.append("<tr style=\"background-color: orange; color: white\">");
        var isValid = true;
        var firstColumn;

        $.each(jsonString, function (i, item) {
            for (var i in item) {
                if (isValid) {
                    firstColumn = i;
                    isValid = false;
                    headingRowBuilder.append("<th class=\"col-md-1\" style=\"padding-top: 2px; padding-bottom: 2px;\">" + i + "</th>");
                    continue;
                }

                if (i == firstColumn) {
                    break;
                }
                headingRowBuilder.append("<th class=\"col-md-1\" style=\"padding-top: 2px; padding-bottom: 2px;\">" + i + "</th>");
            }
        });

        headingRowBuilder.append("</tr>");
        headingRowBuilder.append("</thead></table>");

        var headingRow = headingRowBuilder.toString();
        mytable = $(headingRow).attr({ id: "tblDynamicTable" });

        $.each(jsonString, function (i, item) {
            var row = $('<tr  style="padding-top: 2px; padding-bottom: 2px;"></tr>').attr({ class: ["col-md-1"].join(' ') }).appendTo(mytable);

            for (var i in item) {
                $('<td class="col-md-1" style="text-align: left"><div style="color: black">' + item[i] + '</div></td>').appendTo(row);
            }
        });
        mytable.appendTo("#ShowGrid");
    });
}



//StringBuilder Method
function StringBuilder(value) {
    this.strings = new Array("");
    this.append(value);
}

StringBuilder.prototype.append = function (value) {
    if (value) {
        this.strings.push(value);
    }
}

StringBuilder.prototype.clear = function () {
    this.strings.length = 1;
}

StringBuilder.prototype.toString = function () {
    return this.strings.join("");
}

Comments

Post a Comment

Popular posts from this blog

Sites.Selected | Graph API SharePoint Permission

-
Image
  SharePoint Site Collection Permission   The "sites.selected" permission in Microsoft Graph API allows you to grant an application access to specific SharePoint sites instead of all SharePoint sites in the tenant.   Step1: To   Configure "Sites.Selected" Permission in Azure App Registration To use "sites.selected" , you need to: Register an App in Azure AD . Grant "Sites.Selected" Permission to the app. Manually Grant Access to the specific SharePoint site. Use Microsoft Graph API or PowerShell to assign the required role (Read/Write).   Step 1: Register an App in Azure AD Go to Azure Portal → Azure Active Directory → App Registrations . Click New registration . Provide a name (e.g., SharePointAccessApp). Choose Accounts in this organizational directory only . Click Register . Step 2: Add "Sites.Selected" API Permission Navigate ...
Read more

Configure the SharePoint Online App Catalog

-
Image
  You can create an Sharepoint Online app catalog site collection in few simple steps: Sign into Office 365 as a global admin or SharePoint admin. Select the app launcher icon   in the upper left and choose  Admin  to open the Office 365 admin center (if you don’t see the Admin tile, you don’t have Office 365 administrator permissions in your organization). In the left pane, choose  Admin centers  >  SharePoint .  Click on  ‘More Features’  from the left navigation/pane. Now, click on the  ‘Open’  button under Apps. Select  apps  in the left pane, and then select  App Catalog. Select  Create a new Sharepoint app catalog site , and then select  OK . On the Create App Catalog Site Collection page, enter the required information, and then select  OK . An app catalog site collection has been created.  Once the App Catalog site collection is created successfully, click on the new link to th...
Read more

Azure Function | Sharepoint List item | Call from Power Automate Flow

-
  🔹 Steps to Set Up an Azure Function for SharePoint List Item Creation 1️⃣ Create an Azure Function App Go to Azure Portal → Function Apps → Click Create . Choose: Subscription : Select your subscription. Resource Group : Create a new one or use an existing one. Function App Name : Enter a unique name. Runtime Stack : Choose .NET , Python , or Node.js . Region : Select a preferred region. Plan Type : Choose Consumption (Serverless) . Click Review + Create → Then Create . 2️⃣ Create a New Function Inside the Function App Open your Function App → Click Functions → + Add Function . Choose HTTP Trigger (for now, Power Automate will trigger this function). Name your function (e.g., SharePointNewItemTrigger ). Set Authorization Level to Function . Click Create . 3️⃣ Get SharePoint List Data Using Microsoft Graph API Since Azure Functions cannot directly detect SharePoint list changes, we use Power Automate to send data when an item is added. Modify the...
Read more