Sorting a gridview client side

jay8anks

Active member
Joined
May 6, 2022
Messages
31
Programming Experience
5-10
OK, so probably not the best use of my time today, but I whipped this out:


It almost works, and some of the code isn't terrible. The goal was, type in a mysql table name and hit "Go". You get a field list of the table. Map each field to your desired HTML control and click "Generate Data."

It will then generate the html code for a form based on your dropdown selections. Labels are optional (uncheck if you don't want them), and you can generate required field labels by checking "Req." You can also change the label's value if you don't want it to the be the same as the field name.

You can check HTMLEncode to make some copy/paste friendly code.

So, this is not connecting to a db for the above link. I just hard coded a DataTable in it. Also, not every single input type may be working correctly.

The one thing that bugs me is, when connected to the db, it gets the field list like this:

MySqlDataAdapter myAdapter = new MySqlDataAdapter("SHOW COLUMNS FROM " + TableName + "", conn);

The gridview rows are actually sortable now via drag and drop (using jquery). But it doesn't store anything anywhere, so when it posts back to generate the html controls, it loses the sort.

Anyone have any thoughts on a simple way to keep the sort order of the gridview on post back?

I have a few thoughts, but they are not simple.

Note: This was for local use. Yes, I know that query is vulnerable to SQL injection. I also don't mind pasting some code on github.

Thanks,
 
Solution
Last time I asked ChatGPT for a table that would display an enumerable of Person it banged one about in about 20 seconds -well worth giving it a try for donkey work :)

If you want to ditch web forms, maybe take a look at Blazor..

Ok, got it all working and polished up a little. Made it bootstrap form friendly: http://qwest4.com/mysqltohtml.aspx
Download: http://qwest4.com/mysqltohtml.zip

Challenge for you. Have ChatGPT connect to mysql, get the column names from a table, give you a way to map the columns to the desired html controls, configure all the ids, names, and class files correctly for each control...and make that sortable, in case your column names aren't in the order you would like on your html form.

You...
One modern approach is for the JavaScript on the client side do an AJAX call to a server side web service. That client side then populates the HTML DOM with that data. Essentially, client side rendering. There are no page reloads.

This is partly the strategy used by the old WebForm Update panel as I recall.

Anyway, unless you really have a burning desire to learn and use WebForms (perhaps to get a niche job like some COBOL programmers now who are in demand for their expertise in a dying technology), I suggest not using WebForms and use raw HTML, CSS and JavaScript one end of the spectrum, or some modern JS frameworks along with HTML and CSS. Alternatively, if you feel that it must be server side rendering, look into Blazor Server side.
 
Anyway, unless you really have a burning desire to learn and use WebForms (perhaps to get a niche job like some COBOL programmers now who are in demand for their expertise in a dying technology), I suggest not using WebForms and use raw HTML, CSS and JavaScript one end of the spectrum, or some modern JS frameworks along with HTML and CSS. Alternatively, if you feel that it must be server side rendering, look into Blazor Server side.

I figured out a way that actually isn't that involved. Loop through the html table created by the Gridview and creating an array out of it. Then stringify the array and stick it in a hidden field, which is available in the code behind. It keeps the sort order, so I should be able to make it work.

I have a huge database done in web forms. The only way I will probably ever get totally out of Web Forms is to find a new job. I actually don't hate Web Forms. For that page, if I had done it any other way, it probably would have taken way longer and generated a lot more code. But I will agree, if you need to do something client side, that is when they are at their worst. When you need to display a table full of data and you can drop a GridView/RadGrid on a page and have it working in ten minutes flat, that's when they really shine.

Just took a React.js course at UC Santa Barbara a short time ago. Type "create-react-app" and you get 100+ meg and tens of thousands of files. It's pretty and all, but if I had to redo my db in React, it would take an eternity, at least by myself. I do like the Material UI controls, though. And some of the way it works isn't terribly different than Web Forms. I think vue.js is a little easier than React.

I did move that demo page to another domain: http://qwest4.com/mysqltohtml.aspx
 
When you need to display a table full of data and you can drop a GridView/RadGrid on a page and have it working in ten minutes flat, that's when they really shine.
Last time I asked ChatGPT for a table that would display an enumerable of Person it banged one about in about 20 seconds -well worth giving it a try for donkey work :)

If you want to ditch web forms, maybe take a look at Blazor..
 
Last time I asked ChatGPT for a table that would display an enumerable of Person it banged one about in about 20 seconds -well worth giving it a try for donkey work :)

If you want to ditch web forms, maybe take a look at Blazor..

Ok, got it all working and polished up a little. Made it bootstrap form friendly: http://qwest4.com/mysqltohtml.aspx
Download: http://qwest4.com/mysqltohtml.zip

Challenge for you. Have ChatGPT connect to mysql, get the column names from a table, give you a way to map the columns to the desired html controls, configure all the ids, names, and class files correctly for each control...and make that sortable, in case your column names aren't in the order you would like on your html form.

You get all that done in 20 seconds, and I'm just going to go to work at Walmart and give everyone the phone number to ChatGpt as my forwarding number.

I spent some time looking at form designers. There are tens of thousands of them. You know, I can't actually find one that does everything this does.

Yes, there are frameworks that do a lot of this, I know. They are very large and lock you into the framework. Mine will run on any windows box with IIS and comes in at 6 KB zipped.

I also have another version of this that takes a MySql table and generates class files and a lot of common asp.net boilerplate code.

The biggest shortcoming here is if you have several tables, you will have to do some extra copy/pasting.
 
Solution
Oh, yea we aren't redundant quite yet - I'm sure the boss will come to think of me as a mere adapter between his half baked business requirement and ChatGPT :D

I did find it go completely off the charts wonky on something the other day, perhaps because it was trained on data from 2021 and the project has changed since, but it was talking complete cobblers about how to do attribute mapping in my favorite CSV library - don't browse Walmarts openings just yet
 
Yes, there are frameworks that do a lot of this, I know. They are very large and lock you into the framework. Mine will run on any windows box with IIS and comes in at 6 KB zipped.

One of the simplest approaches I have looked at is Vue Formulate. You can generate a form from json.


The VUE 3 version is still not out. :(
 
Oh, yea we aren't redundant quite yet - I'm sure the boss will come to think of me as a mere adapter between his half baked business requirement and ChatGPT :D

I did find it go completely off the charts wonky on something the other day, perhaps because it was trained on data from 2021 and the project has changed since, but it was talking complete cobblers about how to do attribute mapping in my favorite CSV library - don't browse Walmarts openings just yet

I have not used it yet, but what I do is 90% CRUD forms w/ lots of tables and reports (with excel exports. Got to have them). I can't imagine it being that useful to anything I do, until they make a version I can just give an admin login to the entire system. When it can just look at my MySql tables and generate a full stack of code from bottom to the top, and asks me if I would like that in an N-tier design or a Restful API, that's when I bow down to the beast.
 
The very first test I did with it ran something like "make me a class to represent a person, now do me an EF core context that saves that person to a DB, now make me a blazor razor page and codebehind that edits all the properties of the person and uses the context to save it to a DB, now change it so that instead of using vanilla blazor markup it uses the MudBlazor library for the controls"

I was amazed that it just did it (maybe I'm easy to impress :) )..

..if 90% of my job was CRUD I'd for sure be asking it to write the boilerplate aspects, probably starting with an SQL that dumped the name and type of the columns into a comma separated list, so I could say something like the attached..
 

Attachments

  • 1672747752208.png
    1672747752208.png
    79.4 KB · Views: 13
  • 1672747814909.png
    1672747814909.png
    27.9 KB · Views: 11
Last edited:
I guess I'm hard to impress, but kind of cool. The problem for me is that I have a rather large existing database. Something like a generic customer class and code wouldn't help me much. It just needs an admin login on my side, where it can log in and just do it all for me.

One of the first utils I made was a helper to drop in a mysql table, select the fields I wanted to work with, and have it spit out code.

I just did this dynamically from a MySql table by selecting the four columns I wanted. With a little work, I could have it write all the appropriate asp.net controls to copy/paste into an .aspx page (you can also tell it to backtick column names):

Select Statement: SELECT OrderNo, SalesOffice, SalesRep, SigneeName FROM TableName

Insert Statement: INSERT INTO TableName (OrderNo, SalesOffice, SalesRep, SigneeName) values(@OrderNo, @SalesOffice, @SalesRep, @SigneeName)

Update Statement: UPDATE TableName SET OrderNo = @OrderNo, SalesOffice = @SalesOffice, SalesRep = @SalesRep, SigneeName = @SigneeName




Command Parameters:
C#:
cmd.Parameters.AddWithValue("@OrderNo", orderNo);
cmd.Parameters.AddWithValue("@SalesOffice", salesOffice);
cmd.Parameters.AddWithValue("@SalesRep", salesRep);
cmd.Parameters.AddWithValue("@SigneeName", signeeName);


Initiate Variables:
C#:
int orderNo = 0;
string salesOffice = string.Empty;
string salesRep = string.Empty;
string signeeName = string.Empty;



Loop Through DataTable
C#:
foreach (DataRow dRow in dt.Rows)
{
 orderNo = (int)dRow["OrderNo"];
 salesOffice = dRow["SalesOffice"].ToString();
salesRep = dRow["SalesRep"].ToString();
 signeeName = dRow["SigneeName"].ToString();         
}

C#:
public class ClassName         
{
public int OrderNo { get; set; }
public string SalesOffice { get; set; }
public string SalesRep { get; set; }
public string SigneeName { get; set; }
 }
 
Last edited by a moderator:
The VUE 3 version is still not out. :(

I just checked it when I posted this, and now it looks like they have finally opened up the Vue 3 version to the public:

 
Back
Top Bottom