Edit directly in Grid on WEB Page in Razor

Joseph Kashishian 20 Reputation points
2024-04-15T17:43:07.4333333+00:00

I have a table that I populate in Razor pages using stored procedures.

I populate table in a loop on the Razor pages.

I want to put a button on the grid and when you click on the button you can edit the values directly in the Grid and Save it back to the database.

I'm not using MVC but using Razor

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,175 questions

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Michael Taylor 48,311 Reputation points
    2024-04-17T01:07:07.5833333+00:00

    Not sure what you mean by not using MVC but using Razor. If you're using Razor then you're using MVC as that is what Razor effectively is built on. You have a controller that selects the view to load and the Razor engine merges the model (if any) with the view and sends it to the browser. That's the gist of MVC.

    If you instead mean you aren't using MVC controllers to handle the edit then that is fine anyway since it would be a pain. What scripting library are you using for the front end (e.g. Angular, React, Vue)? If you aren't using any then that would be the first step. Update your view to use a front end library to make this pretty trivial.

    Irrelevant, you'll need to write some javascript (or better yet typescript that gets compiled to javascript) to handle the user clicking the edit button. When they do you "swap out" the normal table static controls with your editor. If you want this inline then that would involve replacing each cell with the corresponding edit control. Alternatively you could pop up a form inside the row (taking up all columns). This is where the front end libraries will really help out. They can do this with just simple attributes and templating in most cases. You can do this manually using jQuery but it is a lot more effort. Once the edit is done you'll post the changes back to the server and process the results. This is normally done by having your "save" button call a javascript function that collects up the edited data and sends it back to the server via an API call. You need to implement the API on the server to handle receiving the data, validating it and saving it to your database. Generally you return a response to the client and the client is responsible for either showing errors or switching the user back to "read only" mode. You don't need to post back the entire page or even refresh it.

    All this is highly dependent upon your front end library you're using. All of them have examples of how to do this pretty common activity. Refer to the documentation for your library. MVC cannot easily do this without posting back the entire page which is probably not what you want.

    0 comments
  2. SurferOnWww 1,911 Reputation points
    2024-04-17T09:41:53.6033333+00:00

    I want to be able to edit directly in the table or grid when you click the edit button.

    If that's what you want to do, you will have to use the GridView or ListView available in the ASP.NET Web Forms. The ASP.NET Core MVC or Razor Pages are not right choice.

    Below is a sample which uses the GridView control:

    enter image description here

    GridView.aspx

    <%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="GridView.aspx.cs" 
    Inherits="WebForms1.GridView" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>" 
            DeleteCommand="DELETE FROM [authors] WHERE [au_id] = @au_id" 
            InsertCommand="INSERT INTO [authors] ([au_id], [au_lname], [au_fname], [phone], [address], [city], [state], [zip], [contract]) VALUES (@au_id, @au_lname, @au_fname, @phone, @address, @city, @state, @zip, @contract)" 
            SelectCommand="SELECT [au_id], [au_lname], [au_fname], [phone], [address], [city], [state], [zip], [contract] FROM [authors]" 
            UpdateCommand="UPDATE [authors] SET [au_lname] = @au_lname, [au_fname] = @au_fname, [phone] = @phone, [address] = @address, [city] = @city, [state] = @state, [zip] = @zip, [contract] = @contract WHERE [au_id] = @au_id">
            <DeleteParameters>
                <asp:Parameter Name="au_id" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="au_id" Type="String" />
                <asp:Parameter Name="au_lname" Type="String" />
                <asp:Parameter Name="au_fname" Type="String" />
                <asp:Parameter Name="phone" Type="String" />
                <asp:Parameter Name="address" Type="String" />
                <asp:Parameter Name="city" Type="String" />
                <asp:Parameter Name="state" Type="String" />
                <asp:Parameter Name="zip" Type="String" />
                <asp:Parameter Name="contract" Type="Boolean" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="au_lname" Type="String" />
                <asp:Parameter Name="au_fname" Type="String" />
                <asp:Parameter Name="phone" Type="String" />
                <asp:Parameter Name="address" Type="String" />
                <asp:Parameter Name="city" Type="String" />
                <asp:Parameter Name="state" Type="String" />
                <asp:Parameter Name="zip" Type="String" />
                <asp:Parameter Name="contract" Type="Boolean" />
                <asp:Parameter Name="au_id" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:GridView ID="GridView1" runat="server" 
            AutoGenerateColumns="False" 
            DataKeyNames="au_id" 
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField ShowHeader="False">
                    <EditItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" 
                            CausesValidation="True" CommandName="Update" 
                            Text="Update"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" 
                            CausesValidation="False" CommandName="Cancel" 
                            Text="Cancel"></asp:LinkButton>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" 
                            CausesValidation="False" CommandName="Edit" 
                            Text="Edit"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
                <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
                <asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" />
                <asp:BoundField DataField="phone" HeaderText="phone" SortExpression="phone" />
                <asp:BoundField DataField="address" HeaderText="address" SortExpression="address" />
                <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" />
                <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" />
                <asp:BoundField DataField="zip" HeaderText="zip" SortExpression="zip" />
                <asp:CheckBoxField DataField="contract" HeaderText="contract" SortExpression="contract" />
            </Columns>
        </asp:GridView>
    </form>
</body>
    0 comments
  3. AgaveJoe 26,206 Reputation points
    2024-04-17T10:08:54.5266667+00:00

    I want to put a button on the grid and when you click on the button you can edit the values directly in the Grid and Save it back to the database.

    If I understand, the use case is inline grid editing. Razor Pages does not have a built-in grid editor. Your left with doing a Google search for a 3rd party API that suits your needs.

    The DataTable is a popular HTML table with inline editing capabilities. The DataTable has a lot of documentation and sample code. You'll want to create a few proof concepts to learn DataTable basics.

    https://editor.datatables.net/examples/inline-editing/simple

    A Bootstrap modal might be an option. While open a modal is not inline grid editing it's a way to edit data in the same page. The Bootstrap documentation illustrates how to use JavaScript to populate a modal form from a table row.

    https://getbootstrap.com/docs/4.1/components/modal/#varying-modal-content

    0 comments