In this tutorial we will design the admin book inventory page using ASP.NET & also apply bootstrap styling. By this module the admin/librarian will be able to add/update & delete books which they have in their library.
Watch the video tutorial at the end of this video to understand more about how to create this page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
Admin Book Inventory Page Code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="adminbookinventory.aspx.cs" Inherits="WebApplication3.adminbookinventory" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div class="container-fluid"> <div class="row"> <div class="col-md-5"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col"> <center> <h4>Book Details</h4> </center> </div> </div> <div class="row"> <div class="col"> <center> <img width="100px" src="imgs/books.png" /> </center> </div> </div> <div class="row"> <div class="col"> <hr> </div> </div> <div class="row"> <div class="col"> <asp:FileUpload class="form-control" ID="FileUpload1" runat="server" /> </div> </div> <div class="row"> <div class="col-md-3"> <label>Book ID</label> <div class="form-group"> <div class="input-group"> <asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Member ID"></asp:TextBox> <asp:LinkButton class="btn btn-primary" ID="LinkButton4" runat="server"><i class="fas fa-check-circle"></i></asp:LinkButton> </div> </div> </div> <div class="col-md-9"> <label>Book Name</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox2" runat="server" placeholder="Book Name"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-md-4"> <label>Language</label> <div class="form-group"> <asp:DropDownList class="form-control" ID="DropDownList1" runat="server"> <asp:ListItem Text="English" Value="English" /> <asp:ListItem Text="Hindi" Value="Hindi" /> <asp:ListItem Text="Marathi" Value="Marathi" /> <asp:ListItem Text="French" Value="French" /> <asp:ListItem Text="German" Value="German" /> <asp:ListItem Text="Urdu" Value="Urdu" /> </asp:DropDownList> </div> <label>Publisher Name</label> <div class="form-group"> <asp:DropDownList class="form-control" ID="DropDownList2" runat="server"> <asp:ListItem Text="Publisher 1" Value="Publisher 1" /> <asp:ListItem Text="Publisher 2" Value="Publisher 2" /> </asp:DropDownList> </div> </div> <div class="col-md-4"> <label>Author Name</label> <div class="form-group"> <asp:DropDownList class="form-control" ID="DropDownList3" runat="server"> <asp:ListItem Text="A1" Value="a1" /> <asp:ListItem Text="a2" Value="a2" /> </asp:DropDownList> </div> <label>Publish Date</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox3" runat="server" placeholder="Date" TextMode="Date"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Genre</label> <div class="form-group"> <asp:ListBox CssClass="form-control" ID="ListBox1" runat="server" SelectionMode="Multiple" Rows="5"> <asp:ListItem Text="Action" Value="Action" /> <asp:ListItem Text="Adventure" Value="Adventure" /> <asp:ListItem Text="Comic Book" Value="Comic Book" /> <asp:ListItem Text="Self Help" Value="Self Help" /> <asp:ListItem Text="Motivation" Value="Motivation" /> <asp:ListItem Text="Healthy Living" Value="Healthy Living" /> <asp:ListItem Text="Wellness" Value="Wellness" /> <asp:ListItem Text="Crime" Value="Crime" /> <asp:ListItem Text="Drama" Value="Drama" /> <asp:ListItem Text="Fantasy" Value="Fantasy" /> <asp:ListItem Text="Horror" Value="Horror" /> <asp:ListItem Text="Poetry" Value="Poetry" /> <asp:ListItem Text="Personal Development" Value="Personal Development" /> <asp:ListItem Text="Romance" Value="Romance" /> <asp:ListItem Text="Science Fiction" Value="Science Fiction" /> <asp:ListItem Text="Suspense" Value="Suspense" /> <asp:ListItem Text="Thriller" Value="Thriller" /> <asp:ListItem Text="Art" Value="Art" /> <asp:ListItem Text="Autobiography" Value="Autobiography" /> <asp:ListItem Text="Encyclopedia" Value="Encyclopedia" /> <asp:ListItem Text="Health" Value="Health" /> <asp:ListItem Text="History" Value="History" /> <asp:ListItem Text="Math" Value="Math" /> <asp:ListItem Text="Textbook" Value="Textbook" /> <asp:ListItem Text="Science" Value="Science" /> <asp:ListItem Text="Travel" Value="Travel" /> </asp:ListBox> </div> </div> </div> <div class="row"> <div class="col-md-4"> <label>Edition</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox9" runat="server" placeholder="Edition"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Book Cost(per unit)</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox10" runat="server" placeholder="Book Cost(per unit)" TextMode="Number"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Pages</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox11" runat="server" placeholder="Pages" TextMode="Number"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-md-4"> <label>Actual Stock</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox4" runat="server" placeholder="Actual Stock" TextMode="Number"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Current Stock</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox5" runat="server" placeholder="Book Cost(per unit)" TextMode="Number" ReadOnly="True"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Issued Books</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox7" runat="server" placeholder="Pages" TextMode="Number" ReadOnly="True"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-12"> <label>Book Description</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox6" runat="server" placeholder="Book Description" TextMode="MultiLine" Rows="2"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-4"> <asp:Button ID="Button1" class="btn btn-lg btn-block btn-success" runat="server" Text="Add" /> </div> <div class="col-4"> <asp:Button ID="Button3" class="btn btn-lg btn-block btn-warning" runat="server" Text="Update" /> </div> <div class="col-4"> <asp:Button ID="Button2" class="btn btn-lg btn-block btn-danger" runat="server" Text="Delete" /> </div> </div> </div> </div> <a href="homepage.aspx"><< Back to Home</a><br> <br> </div> <div class="col-md-7"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col"> <center> <h4>Book Inventory List</h4> </center> </div> </div> <div class="row"> <div class="col"> <hr> </div> </div> <div class="row"> <div class="col"> <asp:GridView class="table table-striped table-bordered" ID="GridView1" runat="server"></asp:GridView> </div> </div> </div> </div> </div> </div> </div> </asp:Content>
CSS Style (customstylesheet.css)-
.footerlinks { color: #ffffff; text-decoration: none ; } .footerlinks:hover { color: #ffd800; } #footer1 { background: #762b00; } #footer2 { background: #531f00; }