Asp.net MVC how to display dynamic columns

Question

0.00/5 (No votes)

See more:

Coming from WebForms, I'm still brand new to ASP.net MVC.

I have a need to display a HTML table where the columns are unknown at design-time. I have the following two MS SQL tables which denote which columns will be displayed at runtime.

SQL

CREATE TABLE ActualData (
	Col1 int,
	Col2 int,
	Col3 int,
	Col4 int
)
INSERT INTO ActualData (Col1, Col2, Col3, Col4) VALUES (1, 2, 3, 4)

CREATE TABLE ColumnsToShow (
	UserID int,
	ColName varchar(10)
)
INSERT INTO ColumnsToShow(UserID, ColName) VALUES (1, 'Col1')
INSERT INTO ColumnsToShow(UserID, ColName) VALUES (1, 'Col2')
INSERT INTO ColumnsToShow(UserID, ColName) VALUES (2, 'Col3')
INSERT INTO ColumnsToShow(UserID, ColName) VALUES (2, 'Col4')

So that the view shows only ActualData.Col1 and ActualData.Col2 to user 1, and
ActualData.Col3 and ActualData.Col4 to user 2.

I know in webforms I would probably have done something like this, to remove matching columns before binding the datatable to a GridView control.

DataTable dtData = GetActualData(); // db call
List<string> colsToRemove = GetColumnsToRemove(); // db call returning only the fields to remove
// remove columns not neccessary for the current user
foreach (string colName in colsToRemove)
   foreach (DataColumn dc in dtData.Columns)
      if (dc.ColumnName == colName)
         dtData.Columns.Remove(colName);

// bind the datatable to a GridView
gridview.AutoGenerateColumns = true;
gridview.DataSource = dtData;
gridview.DataBind();

New to MVC, I really don't even know where to start. So any advice would be appreciated.

What I have tried:

Haven't tried anything yet, as I am looking for idea where to start.

Posted 16-May-17 22:39pm

TheRedEye

Updated 18-Aug-18 1:28am

v4

Add a Solution

3 solutions

Solution 2

Thank you Richard. I used the dynamic list version.
Works like a charm :-)

Posted 11-Jun-17 21:50pm

TheRedEye

Solution 3

i want to agrigate column dynamicically

Posted 18-Aug-18 1:29am

Member 13953412

Comments

CHill60 20-Aug-18 8:03am

If you have a question then use the red "Ask a question" link at the top of the page. Be sure to read the posting guidelines - we will need a lot more information in order to be able to help you

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2017-05-17T02:37:00

You're probably going to want to use the WebGrid helper[^]:

WebGrid in ASP.NET MVC4[^]
WebGrid in ASP.NET MVC[^]
The Ultimate Cookbook for the ASP.NET MVC WebGrid | DanylkoWeb[^]

Unfortunately, you'll need to define the columns, since the WebGrid doesn't seem to be able to auto-generate columns for a DataTable or DataView. But it's not too difficult:

C#

var columns = new List<WebGridColumn>(dtData.Columns.Count);
foreach (DataColumn column in dtData.Columns)
{
    columns.Add(new WebGridColumn
    {
        ColumnName = column.ColumnName,
        Header = column.Caption,
    });
}

ViewBag.Columns = columns;
return View(dtData);

Then, in your view:

@model DataTable

@{
    var grid = new WebGrid(Model);
}

@grid.GetHtml(columns: ViewBag.Columns)

Alternatively, you could convert your DataTable to a list of dynamic objects, as described in this StackOverflow answer[^].

C#

var model = new List<dynamic>(dtData.Rows.Count);

foreach (DataRow row in dtData.Rows)
{
    var obj = (IDictionary<string, object>)new ExpandoObject();
    
    foreach (DataColumn col in dtData.Columns)
    {
        obj.Add(col.ColumnName, row[col]);
    }
    
    model.Add(obj);
}

return View(model);