locked
Display map of clickable buttons and highlight some based on a condiiton RRS feed

  • Question

  • User-1893036225 posted

    hey, first post in this forum, 

    i have a little experience in asp.net,

    i am working on a movie seat booking project in which i have to display clickable seats in a map, availabel seats are green, booked seats are red.

    Now i am not asking for the code itself, but how do i proceed with this thing, what else do i have to learn, Javascript, ajax, jquery?

    what would fetch me the booked and available seats so that i can display them in red and green?

    i need a start, thank you

    Sunday, September 29, 2013 8:01 AM

Answers

  • User281315223 posted

    Since you are using jQuery, you might want to leverage HTML5 data-attributes which can be added to existing HTML elements to store data which can be easily accessed through jQuery : 

    <ItemTemplate>
        <!-- Notice the data-seatid attribute that will store your actual SeatID (or other) value -->
        <div class="seat <%# Convert.ToBoolean(Eval("Available")) ? "available" : "not-available" %>" data-seatid="<%# Eval("SeatID") %>"><%# Eval("SeatNumber") %></div>
    </ItemTemplate>

    Then within your jQuery, you can simply access the data attribute from an element using either the data() function or the attr() function

    //When an available seat is clicked on
    $('.seat.available').click(function(){
          //Toggle selection for this seat
          $(this).toggleClass('selected');
            
          /Alert the seatid
          alert($(this).data('seatid')); //or $(this).attr('data-seatid');
    });

    These can be the unique Id values that will identify your seats and you can then store all of these prior to passing them to your "Purchase" function through jQuery or through some other method.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 30, 2013 3:50 PM

All replies

  • User281315223 posted

    This really depends on the technology that you would want to use. MVC could be great at working on something like this (if you are familar with it) but basically you would just need to pass all of the values of your seats to your "View" or "Page" as a collection.

    You could use some type of data-control for this if you are working with Web Forms, but you really just need some pure HTML since most of your logic you could handle with jQuery. After passing in your collection, you might consider rendering each of the seats and applying a CSS class to determine their availability : 

    <!-- All of your seats -->
    <div id="YourSeats">
        <!-- Output each of your seats -->
        @foreach(var seat in Model.YourSeats){
            <div class='seat @(seat.IsAvailable ? "available" : "not-available")' title='@seat.SeatInformation'>
                  @seat.SeatNumber
            </div> 
        }
    </div>

    This might render something that would look like this : 

    and then you would just need to wire up an AJAX call when a user clicked on one of your "available" seats to display details about the seat : 

    <script type='text/javascript'>
        $(function(){
          //When an available seat is clicked on
          $('.seat.available').click(function(){
               //Display a message or dialog to allow the user to
               //purchase the seat
               alert("This seat is available. Call for more details!");
          });
        });
    </script>

    Obviously this is a very basic example, but you might want to make it a bit more detailed by using something like a jQueryUI dialog box which would accept the ID of the seat that the user clicked on. This could create an AJAX call and pull all of the details to allow the user to see what the price, location and other information about the seats is available and possibly a link for them to purchase it.



    Sunday, September 29, 2013 8:26 AM
  • User-1893036225 posted

    thank you for the detailed answer

    but it was over my head i have to say

    so basically i have to use AJAX to get the seats and their availability , use jquery to color them (and yes you are correct, once user clicks on them he is displayed with seat no along with other info.) right?

    Sunday, September 29, 2013 9:07 AM
  • User281315223 posted

    You can actually get the seats and availability prior to loading your actual page / view itself (just perform a database query to pull all of the seats) and you'll want to store them in some kind of collection of objects so that you can easily read the properties you would need for each of them such as SeatNumber, Description, Price, Availability etc.

    You'll pass this collection to your Page or View so that you can render all of it, which you will just use some pure HTML and CSS to handle styling and coloring your elements (based on their classes which will be set according on your properties). After handling all this, you'll just wire up a jQuery event to fire when an available seat is clicked on which will likely make another AJAX call to your database and pull the most recent information available for the selected item and display it.

    Sunday, September 29, 2013 9:51 AM
  • User-1893036225 posted

    any way i can do this without using MVC?

    cause i have not covered that topic yet, and i am still on my way to learn AJAX and JQuery

    Sunday, September 29, 2013 10:07 AM
  • User281315223 posted

    Sure.

    You could proably use a repeater to perform some similar method of data binding : 

    <head runat="server">
        <title></title>
        <style type="text/css">
            #SeatingSection { width: 150px; }
    
            .seat { float : left; height: 20px; width: 20px; background : #ddd; margin: 2px; color: #fff }
            .seat.available { background: green; cursor: pointer; }
            .seat.not-available { background: red; }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
           <!-- A repeater to store your values -->
           <asp:Repeater ID="SeatingSection" runat="server">
               <ItemTemplate>
                   <div class="seat <%# Convert.ToBoolean(Eval("Available")) ? "available" : "not-available" %>"><%# Eval("SeatNumber") %></div>
               </ItemTemplate>
           </asp:Repeater>
        </form>
    </body>
    </html>

    with a code-behind that maps your Seat objects (which can be pulled from a database or otherwise) and bind them to your Repeater : 

    public partial class WebForm1 : System.Web.UI.Page
    {
            protected void Page_Load(object sender, EventArgs e)
            {
               //Build your Seats (or grab from database)
                List<Seat> seats = new List<Seat>(){new Seat("1", true, "A1"), new Seat("2", false, "A2"), new Seat("3", false, "A3"), new Seat("1", true, "A1")};
            
                //Bind these to your Repeater
                SeatingSection.DataSource = seats;
                SeatingSection.DataBind();
            }
    
            //Example Seat Class
            public class Seat
            {
                public string SeatID { get; set; }
                public bool Available { get; set; }
                public string SeatNumber { get; set; }
    
                public Seat() { }
    
                public Seat(string seatID, bool available, string seatNumber)
                {
                    //Randomly generated 
                    SeatID = seatID;
                    Available = available;
                    SeatNumber = seatNumber;
                }
            }
    }




    Sunday, September 29, 2013 11:41 AM
  • User-1893036225 posted

    this is more than what i could have asked for, thank you

    i am unable to understand the repeater part, so i'll read upon it and post back with my progress

    thank you again.

    EDIT: couple of questions

    1) How do i display seats on the web page? with proper colors.

    2) How do i make them selectable, cause i have to select a seat and then click on a button which'll then book the seat

    3) How do i map a particular image to seat in the database?

    there are tons of approaches but i am confused reading every one of them.

    Sunday, September 29, 2013 11:31 PM
  • User281315223 posted

    As far as the seats appearance, you'll need to use CSS to define a "container" of where you will store the seats themselves that has an explicit width, which you can see in the CSS my example provided : 

    <style type="text/css">
            /* Defines your container width */
            #SeatingSection { width: 150px; }
    
            /* A generic class for each of your "seats" that specifies a size and will make them "float" */
            .seat { float : left; height: 20px; width: 20px; background : #ddd; margin: 2px; color: #fff }
    
            /* Coloring based on availability */
            .seat.available { background: green; cursor: pointer; }
            .seat.not-available { background: red; }
    </style>

    You could possibly use jQuery to add your "selectable" functionality so when an available seat was clicked on it would add a "selected" class to them and when your button was clicked, you could use the selected class to determine which seats were selected : 

    <script type='text/javascript'>
        $(function(){
          //When an available seat is clicked on
          $('.seat.available').click(function(){
              //Toggle selection for this seat
              $(this).toggleClass('selected');
          });
          
          //When your "Purchase" button is clicked
          $("#Purchase").click(function(){
              //Grab the selected seats
              var selected = $(".seat.selected");
            
              if(selected.length == 0){
                  alert("No seats were selected."); 
              }
              else{
                  alert(selected.length + ' seats were selected. Proceed to Purchase screen.');
    
                  //You may want to add some additional properties to store your seat ID within your
                  //seat <div> elements so that you can read them here (look into HTML5 data-attributes)
              }
          });
        });
    </script>

    As far as actually mapping the values, you may want to create a numbering system that would output them in order (this part is a bit tricky) and may require you to sort them in a specific way to get them to output properly (especially if the venue doesn't have a very rectangular seating arrangement).

    Monday, September 30, 2013 8:43 AM
  • User-1893036225 posted

    that example was good boss, but i am stuck at one point

    i am using Visual studio 2010

    <head runat="server">
        <title></title>
        <style type="text/css">
            /* Defines your container width */
            #SeatingSection { width: 150px; }
    
            /* A generic class for each of your "seats" that specifies a size and will make them "float" */
            .seat { float : left; height: 20px; width: 20px; background : #ddd; margin: 2px; color: #fff }
    
            /* Coloring based on availability */
            .seat.available { background: green; cursor: pointer; }
            .seat.not-available { background: red; }
    </style>
    <script type="text/javascript">
        $(function () {
            //When an available seat is clicked on
            $('.seat.available').click(function () {
                //Toggle selection for this seat
                $(this).toggleClass('selected');
            });
    
            //When your "Purchase" button is clicked
            $("#Purchase").click(function () {
                //Grab the selected seats
                var selected = $(".seat.selected");
    
                if (selected.length == 0) {
                    alert("No seats were selected.");
                }
                else {
                    alert(selected.length + ' seats were selected. Proceed to Purchase screen.');
    
                    //You may want to add some additional properties to store your seat ID within your
                    //seat <div> elements so that you can read them here (look into HTML5 data-attributes)
                }
            });
        });
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:Repeater ID="SeatingSection" runat="server">
               <ItemTemplate>
                   <div class="seat <%# Convert.ToBoolean(Eval("Available")) ? "available" : "not-available" %>"><%# Eval("SeatNumber") %></div>
               </ItemTemplate>
           </asp:Repeater>
        </div>
        </form>
    </body>
    </html>

    this is my source page

    protected void Page_Load(object sender, EventArgs e)
        {
            //Build your Seats (or grab from database)
            List<Seat> seats = new List<Seat>() { new Seat("1", true, "A1"), new Seat("2", false, "A2"), new Seat("3", false, "A3"), new Seat("1", true, "A1"),new Seat("2",false,"B1"),new Seat("5",true,"B2") };
    
            //Bind these to your Repeater
            SeatingSection.DataSource = seats;
            SeatingSection.DataBind();
        }
    
        //Example Seat Class
        public class Seat
        {
            public string SeatID { get; set; }
            public bool Available { get; set; }
            public string SeatNumber { get; set; }
    
            public Seat() { }
    
            public Seat(string seatID, bool available, string seatNumber)
            {
                //Randomly generated 
                SeatID = seatID;
                Available = available;
                SeatNumber = seatNumber;
            }
        }

    and this is code behind the page

    as you can see this is a copy-paste of your snippets, i added part from last post to this page but this does not select the images, even after adding jquery, just displays them.

    Can you tell me what am i missing? 

    Monday, September 30, 2013 11:12 AM
  • User-1893036225 posted

    well i googled and found this here

    http://techbrij.com/seat-reservation-with-jquery

    this is very similar to what i want to do

    but i am not able to display /the seat arrangement, and i think cause i have not inserted jquery properly.

    i have added codes under "seat selection, seat layout, settings" under 1 single script, like this

    <script type="text/javascript" src="jquery-1.10.2.min.js">

    ........

    </script> without any breaks.

    is this what i am doing wrong? how am i supposed to place it?

     this is how it looks at jsbin

    Monday, September 30, 2013 11:19 AM
  • User281315223 posted

    You need to ensure that you have a jQuery reference that is declared prior to you actually using any jQuery code as seen below : 

    <!-- jQuery Reference (from CDN) -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    
    <!-- Your jQuery Code -->
    <script type="text/javascript">
        $(function () {
            //When an available seat is clicked on
            $('.seat.available').click(function () {
                //Toggle selection for this seat
                $(this).toggleClass('selected');
            });
    
            //When your "Purchase" button is clicked
            $("#Purchase").click(function () {
                //Grab the selected seats
                var selected = $(".seat.selected");
    
                if (selected.length == 0) {
                    alert("No seats were selected.");
                }
                else {
                    alert(selected.length + ' seats were selected. Proceed to Purchase screen.');
    
                    //You may want to add some additional properties to store your seat ID within your
                    //seat <div> elements so that you can read them here (look into HTML5 data-attributes)
                }
            });
        });
    </script>



    Monday, September 30, 2013 11:24 AM
  • User-1893036225 posted

    using this line didnt work

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    and can you look at this thing here

    http://jsbin.com/oYidUCu/1/edit?html,js,output

    Monday, September 30, 2013 11:36 AM
  • User281315223 posted

    It did improve it a bit. 

    You'll need to make sure to add it within the <head> section of your page : 

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>

    Monday, September 30, 2013 12:08 PM
  • User-1893036225 posted

    broke my head over this example you improved (thank you for that) but couldnt get it to work. i dont know what i am missing i copied it exactly the same and added script initializer in header. 

    so i am reverting back to your solution.Now i am able to select the seats, and booked seats are non-clickable, but how do i assign seats values so that i can insert the particular id's into the database?

    shall i use Image instead of <div> inside a repeater? so that i can get the id? can i have a hidden field so that it is not displayed and still i can it's value?

    Monday, September 30, 2013 3:27 PM
  • User281315223 posted

    Since you are using jQuery, you might want to leverage HTML5 data-attributes which can be added to existing HTML elements to store data which can be easily accessed through jQuery : 

    <ItemTemplate>
        <!-- Notice the data-seatid attribute that will store your actual SeatID (or other) value -->
        <div class="seat <%# Convert.ToBoolean(Eval("Available")) ? "available" : "not-available" %>" data-seatid="<%# Eval("SeatID") %>"><%# Eval("SeatNumber") %></div>
    </ItemTemplate>

    Then within your jQuery, you can simply access the data attribute from an element using either the data() function or the attr() function

    //When an available seat is clicked on
    $('.seat.available').click(function(){
          //Toggle selection for this seat
          $(this).toggleClass('selected');
            
          /Alert the seatid
          alert($(this).data('seatid')); //or $(this).attr('data-seatid');
    });

    These can be the unique Id values that will identify your seats and you can then store all of these prior to passing them to your "Purchase" function through jQuery or through some other method.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 30, 2013 3:50 PM
  • User-1893036225 posted

    ok, thats enough to go on with

    thank a ton, i'll post back with my progress

    in the meantime,can you please confirm that the last example you have posted at jsbin is working or not?

    Monday, September 30, 2013 11:59 PM
  • User281315223 posted

    The following one should be just fine (there was a missing '/' in one of the comments) : 

    Tuesday, October 1, 2013 8:36 AM
  • User-1893036225 posted

    EDIT: i got it working through data property of HTML5 itself, i was being naieve enough to overlook it and kill my time somewhere else

    thanks a lot for your help, you gave me much more than i asked for

    Tuesday, October 1, 2013 1:48 PM
  • User-1893036225 posted

    i have one more question, and i will start from begining. I have following table structure

    passengerId, seatNo, seatStatus,flightId

    as of right now, i am displaying the seats( through a repeater) on a condition that they have to exist in the database. So in database, i insert 100 "available" values for seatStatus and i am good to go.

    But, when flightId changes, the logic fails, and i have to enter 100 values in database again, or i can write 100 different div's. So can i make repeater work in such a way that it displays 100 seats without having to actually write 100 div's? And with different seatId's? and how can i determine seat availablity when seatId is same but flightId is different?

    Wednesday, October 2, 2013 2:49 PM