Editable table / grid in asp.net with VB

Question

I'm a front-end dev, working with a VB developer to create a web application for entering fields of data: names, objectives and due dates.

Our client wants the data to be entered like an Excel spreadsheet: tabbing through multiple fields and entering the data. And then that inputted data gets outputted as a grid or table elsewhere to view / approve.

I work mostly in CSS/JS/PHP, and I'm pretty new to .ASPX. We are working in a .NET 4.0 framework with VB running on the back end to connect to SQL Server. On the front end we have .ASPX web forms along with CSS/JS.

Please Note: this is NOT an MVC or Core framework, but an older 4.0 .NET framework.

We've tried multiple options, but none of these work the way our client wants. I've tried this both as <asp:Table> with rows of <input> fields, and also as a <table> of <asp:TextBox> input fields. But we've run into problems both ways. We also tried a <asp:GridView> but that didn't work either. It was only Read-only, not editable. And it would only let you edit one row at a time. Client wanted entire table/grid to be editable. Sample of code for one below. The problem with this is that each ID is a different name: TextBox1, TextBox2, etc. And that doesn't work for the VB to save records to the database.

Has anyone built a similar web application? What has worked for you?

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="obj-table">
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" CssClass="label name" runat="server" Text="Name"></asp:Label></td>
                <td>
                    <asp:Label ID="Label2" CssClass="label" runat="server" Text="Objective"></asp:Label></td>
                <td>
                    <asp:Label ID="Label3" CssClass="label" runat="server" Text="Due Date"></asp:Label></td>
                <td>
                    <asp:Label ID="Label4" CssClass="checkbox" runat="server" Text="Approved"></asp:Label></td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="Name" CssClas="textbox" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:TextBox ID="Descrp" CssClas="textbox" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:TextBox ID="DueDate" CssClas="textbox" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:CheckBox ID="CheckBox" runat="server"/>
                </td>

                <%-- use this for when we need a drop down menu 
                <td>
                    <asp:DropDownList ID="DropDown" runat="server"></asp:DropDownList>
                </td>--%>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:CheckBox ID="CheckBox1" runat="server"/>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
                </td>

                <td>
                    <asp:CheckBox ID="CheckBox2" runat="server"/>
                </td>
            </tr>
        </table>
</div>

Answer 1

You can use the grid view element that will automate your desired operations in sync with asp sql data source object