Creating similar screen in ASP.NET (Web forms)

Question

Hi,

I would like to create something similar to this in ASP.NET:

Which is the best way to do it?

Thanks

Answer 1

Hello,

you need to create tab in asp net with jquery first

after there are a lot of sample in 3w ..

simple search and you will find

Answer 2

you need to create tab in asp net with jquery first

In my opinion it is important to know what kind of application the OP is targeting before recommending a approach. If Bill Johnson is targeting Web Forms then the AJAX control tool kit is better solution as it conforms to standard Web Forms programming patterns.

[AJAX Tool Kit Tabs]

http://www.ajaxtoolkit.net/Tabs/Tabs.aspx

A jQuery tab widget is a better fit of MVC.

jQuery tabs

Answer 3

Ok, so we need 2 things.

We need some kind of tab control, and then some kind of table or grid display.

As suggested here (and they are probably the 2 best suggestions).

You could adop/use a jQuery.UI tab. They are easy, but you have to take the steps of installing jQuery.UI.

So, asuming jQuery, and jQuery.UI (they are just 2 JavaScript libraries that most web sites have. By default, webforms will have jQuery, but not jQuery.UI (use nuget to install jQuery.ui).

So, with this markup:

            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">My First Tab</a></li>
                    <li><a href="#tabs-2">My Second Tab</a></li>
                </ul>

                <div id="tabs-1">
                    <h3>Tab 1 stuff goes here</h3>
                </div>

                <div id="tabs-2">
                    <h3>Tab 2 stuff goes here</h3>
                </div>
            </div>
            <script>
                $(function () {
                    $("#tabs").tabs();
                });
            </script>

So, the above results in this:

Next up, we need some kind of table display. In most cases, a gridview works quite well.

so, in above tabs-1 area, we can drop in a GridView. You can even use the wizard to create this grid if you wish.

I often let the wizard create the gridview for me, then I "tweak" after a bit.

So, lets have 2 tabs. One to display (and edit) hotels, and then say a 2nd tab to edit say booked people.

So, our grid view will look like this (as noted, I let the wizards make most of this).

    <h3>Hotels</h3>
    <asp:GridView ID="GVHotels" runat="server" Width="48%"
        AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table table-hover">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
            <asp:BoundField DataField="LastName" HeaderText="LastName" />
            <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Description" HeaderText="Description" />
            <asp:TemplateField>
                <ItemTemplate>
                    <button id="cmdView" runat="server" class="btn myshadow"
                        onserverclick="cmdView_ServerClick">
                        <span aria-hidden="true" class="glyphicon glyphicon-home"> Edit</span>
                    </button>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <br />
    <button id="cmdAdd" runat="server" class="btn myshadow"
        onserverclick="cmdAdd_ServerClick">
        <span aria-hidden="true" class="glyphicon glyphicon-log-in"> Add</span>
    </button>

And then some code behind to load up that grid, that code is this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then
            LoadData
        End If

    End Sub

    Sub LoadData()

        Dim cmdSQL As New SqlCommand

        ' load grid in hotels tab
        cmdSQL.CommandText =
            "SELECT * FROM tblHotelsA ORDER BY HotelName"
        GVHotels.DataSource = MyrstP(cmdSQL)
        GVHotels.DataBind()

        ' load grid in people tab
        cmdSQL.CommandText =
            "SELECT * FROM People
            LEFT JOIN tblHotelsA ON People.Hotel_ID = tblHotelsA.ID
            WHERE Hotel_ID is not null"
        GVBooked.DataSource = MyrstP(cmdSQL)
        GVBooked.DataBind()


    End Sub

So, change the tab names, move things around a bit, and we now see, get this:

The other suggested "tab" control was the one from the ajaxtoolkit. I will admit the ajaxtoolkit is a "little less" effort to learn, since you don't have to put in any JavaScript, but either choice is fine.

So, for your table like view, a GridView is a good choice. ListView also works rather well. And the above shows a jQuery.UI tab control in action.

So, what does the button click look like for a grid row? Well, I used a jQuery.UI dialog for this, but the code for the button click on a hotel row looks like this:

    Protected Sub cmdView_ServerClick(sender As Object, e As EventArgs)

        Dim btn As HtmlButton = sender
        Dim gRow As GridViewRow = btn.NamingContainer

        Dim intPK As Integer = GVHotels.DataKeys(gRow.RowIndex).Item("ID")

        Dim cmdSQL As New SqlCommand("SELECT * FROM tblHotelsA WHERE ID = @ID")
        cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = intPK

        Dim rstData As DataTable = MyrstP(cmdSQL)
        ' load up our edit div
        fLoader(EditRecord, rstData.Rows(0))
        ViewState("PK") = intPK

        ScriptManager.RegisterStartupScript(Me.Page, Page.GetType, "popedit", $"popedit('{btn.ClientID}')", True)

    End Sub

So, above gets the row click, gets database PK id, loads up a div (floader is a routine I built). And the we pop the dialog (a jQuery.UI dialog).

With a few helper routines (you build over time), then the amount of code for the above example? Not much at all. In fact, it kind of feels like using MS-Access to me in many ways, and my coding style actaully tends to be very ms-access like.

Answer 4

Hi @Bill Johnson ,

If you want to achieve a similar screen, you can use jQuery.UI tab, then add data through the gridview, and prevent the gridview from being in the panel.

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.gridview?view=netframework-4.8.1

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>

    <script src="Scripts/jquery-ui.js"></script>
    <link href="Content/jquery-ui.css" rel="stylesheet" />


    <script type="text/javascript">
        var selected_tab = 1;
        $(function () {
            var tabs = $("#tabs").tabs({
                select: function (e, i) {
                    selected_tab = i.index;
                }
            });
            selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
            tabs.tabs('select', selected_tab);
            $("form").submit(function () {
                $("[id$=selected_tab]").val(selected_tab);
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>

            </ul>
            <div id="tabs-1">
                <asp:Panel ID="Panel1" runat="server" GroupingText="Student Details">
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true">
                    </asp:GridView>
                    <table>
                        <tr>
                            <td>id:<br />
                                <asp:TextBox ID="txtid" runat="server" />
                            </td>
                            <td>name:<br />
                                <asp:TextBox ID="txtname" runat="server" />
                            </td>
                        </tr>
                    </table>
                    <asp:Button ID="btnAdd" runat="server" Text="Add" />
                </asp:Panel>
            </div>
            <div id="tabs-2">
                Content 2
            </div>

        </div>
        <asp:HiddenField ID="selected_tab" runat="server" />

    </form>
</body>
</html>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.