October 30th, 2011

Online Ticket Booking System using ASP.NET

In my previous post, I explained how to implement seat reservation with jQuery. In this post, you will see how to use it in ASP.NET project to save and retrieve data from database. It can be used in online Bus, flight, hotel, exam support, cinema and ticket booking system.

modal popup

DB Structure:

DB structure

There are two tables:
BookingDetail Table: Seat owner information
SeatDetail Table: To save booked seats information. One user can select multiple seats, so separate table is used. There is no primary key in this table so you need to create insert stored proc. It will be mapped in EF.

CREATE PROCEDURE dbo.SP_SeatDetails_Insert	
	(
	@BookingID int,
	@SeatID int 
	)	
AS
	insert into SeatDetails (BookingID,SeatID) values (@BookingID,@SeatID) 

Setup Entity Data Model:

First Create database and stored proc as mentioned above.

Right click on Project > Add New Item > Select ADO.NET Entity Data Model >(name: Model.edmx) > Add
Select “Generate from database” > Next > Select Database >(save entity connection string…: StarBusEntities1)> Next
Select Both tables and Stored proc > (Model Namespace: StarBusModel) > Finish

You will get the above db structure – screen shot and get tables in edmx file.

Now Right click on SeatDetail > Stored Procedure Mapping

Expand “Select Insert Function” in ‘Mapping Details’ dialog and select “SP_SeatDetails_Insert” and map with same property name.

Now save it.

Display Booked Seat:

Add new page and use code from my previous article.
Before going code, It is assumed seat charge and tourid comes from different tables and available on server side.

Now, our first object is to retrieve data from database and show booked seat in the page.

 StarBusModel.StarBusEntities1 objEntities = new StarBusModel.StarBusEntities1();
 int tourID = 1;
 int chargePerSeat = 100;
    void BindSeats(){         
        txtAmount.Text = chargePerSeat.ToString();
        string sel =  String.Join(",",(from b in objEntities.BookingDetails
                   join s in objEntities.SeatDetails on b.BookingID equals s.BookingID
                   where b.TourID == tourID 
                   select s.SeatID).ToArray());
        ClientScript.RegisterStartupScript(this.GetType(), "Init", "init([" + sel + "]);",true);
       
    }

We have defined calling of init method from server side. Remove calling of init from client side and add following in init method to set charge per seat.

chargePerSeat = $('#<%=txtAmount.ClientID %>').val();

Save Selected Seat:

After selecting seats, when user clicks on button, A modal popup will be displayed with calculated price. User gives name, phone and click on save button, seat information will be saved in database.

To open pop-up:

 $('#btnShowNew').click(function () {
            var str = [];
            $.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
                str.push($(this).attr('title'));
            });
            if (str.length > 0) {
                $('#<%=txtAmount.ClientID %>').val(str.length * chargePerSeat);
                $('#<%=txtSeatNo.ClientID %>').val(str.join(','));
                ShowPopup();
            }
            else {
                alert('Select atleast one seat');
            }
        })

        function ShowPopup() {
            $('#mask').show();
            $('#<%=PanelPop.ClientID %>').show();
        }
        function HidePopup() {
            $('#mask').hide();
            $('#<%=PanelPop.ClientID %>').hide();
        }

HTML:

 <div id="mask">
</div>

<asp:Panel ID="PanelPop" runat="server" Style="display: none; cursor: pointer; width: 250px;
        z-index: 111; background-color: White; position: absolute; left: 35%; top: 12%;
        border: outset 2px gray; text-align: center; padding: 10px" class="popUp">
        <p>
            <asp:Label ID="Label1" runat="server" Text="Name" AssociatedControlID="txtName"></asp:Label>
            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtName" runat="server" Display="Dynamic"  ErrorMessage="Name is required.">*</asp:RequiredFieldValidator>
        </p>
        <p>
            <asp:Label ID="Label2" runat="server" Text="Phone" AssociatedControlID="txtPhone"></asp:Label>
            <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="txtPhone" runat="server" Display="Dynamic"  ErrorMessage="Phone is required.">*</asp:RequiredFieldValidator>
        </p>
        <p>
            <asp:Label ID="Label3" runat="server" Text="Amount" AssociatedControlID="txtAmount"></asp:Label>
            <asp:TextBox ID="txtAmount" runat="server" ReadOnly="true" ></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAmount" Display="Dynamic"  ErrorMessage="Amount is required.">*</asp:RequiredFieldValidator>
        </p>
        <p>
            <asp:Label ID="Label4" runat="server" Text="Seat" AssociatedControlID="txtSeatNo"></asp:Label>
            <asp:TextBox ID="txtSeatNo" runat="server" ReadOnly="true"></asp:TextBox>            
        </p>
        <p>
            <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
            <input type="button" id="btnCancel" value="Cancel" onclick ="HidePopup();" />
        </p>
    </asp:Panel>

CSS:

#mask
        {
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 4;
            opacity: 0.4;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* first!*/
            filter: alpha(opacity=40); /* second!*/
            background-color: gray;
            display: none;
            width: 100%;
            height: 100%;
        }
.popUp label
        {
            width: 4em;
            float: left;
            text-align: right;
            margin-right: 0em;
            display: block;
        }

To save information:


 protected void btnSave_Click(object sender, EventArgs e)
    {
        StarBusModel.BookingDetail objBooking = new StarBusModel.BookingDetail();
        objBooking.TourID = tourID;
        objBooking.Name = txtName.Text;
        objBooking.Phone = txtPhone.Text;
        objBooking.Amount = Convert.ToDecimal(Request.Form[txtAmount.ClientID]);
        string[] seats = Request.Form[txtSeatNo.ClientID].Split(new char[] { ',' });
        for (int i = 0; i < seats.Length; i++)
            objBooking.SeatDetails.Add(new StarBusModel.SeatDetail() { SeatID = Convert.ToInt32(seats[i]) });
        objEntities.BookingDetails.AddObject(objBooking);        
        objEntities.SaveChanges();
        BindSeats();
    }

Hope, It helps. If you have any query, put in below comment box.

  • Virat Kothari

    superb one.. Really appreciate

  • Jay_surat007

    ERROR: An attempt to attach an auto-named database for file
    E:SeatApp_DataStarBus.mdf failed. A database with the same name
    exists, or specified file cannot be opened, or it is located on UNC
    share.

  • Shaheembabuv

    BOSS … R O O C KK
    doubt ,How Can I  Hold a Seat  till payment  with time period .

  • Anonymous

    awesome man… 😉

  • Psaikale

    i want ready online bus reservation project in vb.net

  • Dinesh

    Hi Brij, 

    Wow!! UR Blog superb and interesting for me.
    I’m doing Online Movie ticket booking project in aspx.vb
    and finding great challenge in doing Seat Select module.
    Would you please advice how to do it.  

  • Ivan Sostarko

    thank you

  • hemanth

    hello im doing an online bus reservation project and struck in this seating page… can you pls help me out… plsssssssssss

  • Chandima

    Hi,

    Can you please explain how to do this with MVC3 Application?

  • ish

    can you do this usiong php?

  • Adhiyaman k s

    its very useful………thanx

  • iamsheny

    How can I prevent the gap between chosen seats?

  • faisal shaikh

    in my project i have three theatres.so how can i use your code for three theatres ?

  • Aditi Jarvis Gandhi

    Hey brij , can you help me with the seat reservation with javascript ? with database, how to store in the myphpadmin?

  • Priya Jadhav

    thnxx..this helped me a lot!!!

  • maria

    when I run the program, i get this error “The underlying provider failed on Open.” would you please help me?

  • Nilofer

    Hi, it is a great on but there is no db in the downloaded source.. so i am getting this error “The underlying provider failed on Open.” can you help me

  • Salman Mirza

    sir am doing a project i see the admin panel or inner area but how to login your project

  • Soma Sundaram

    sir while i was clicking on links provided by u it was showing database conncetion error
    and i am not getting any data,,in the above u ve mentioned that my previous article link and its not at all openini sir..please fix it