Screen Layout Designing in a Movie Theater using GridView

In this article I will show designing of GridView control as a movie screen layout in ASP.Net.


In this article I will show you the GridView control as a movie screen layout like shown in below images in ASP.Net.

New Picture (2).JPG

New Picture (3).JPG

 

  •  First of all create the database in SQL Server and name it as a "GridView_As_A_MOVIE_ScreenLayout" and in that database create the two tables like below.

    untitled.JPG


  • Create the stored procedures for adding screen, getting  all screens, adding screen layout and getting screen layout.

    /*(1st StoredProcedure)*/
    /*This stored procedure is for adding screen which takes one parameter */
    Create Proc sp_AddScreen
    ( 
    @ScreenName varchar(20)
    ) 
    as 
    Begin 
    if not exists (select ScreenId from tbl_Screens where ScreenName = @ScreenName) 
    begin 
    insert into tbl_Screens(ScreenName) values (@ScreenName) 
    end 
    End

    /*(2nd StoredProcedure)*/
    /*This stored procedure is for getting all screens from tbl_Screens  */
    Create procedure sp_GetScreens as
    select * from tbl_Screens

    /*(3rd StoredProcedure)*/
    /*This stored procedure is for adding screen layout*/
    CREATE Procedure sp_AddScreenLayout
    (
    @RowName varchar(5),@ScreenId int,@1 varchar(5),@2 varchar(5),@3 varchar(5),@4 varchar(5),@5 varchar(5),@6 varchar(5),@7 varchar(5),@8 varchar(5),
    @9 varchar(5),@10 varchar(5),@11 varchar(5),@12 varchar(5),@13 varchar(5),@14 varchar(5),@15 varchar(5),@16 varchar(5),@17 varchar(5),@18 varchar(5),
    @19 varchar(5),@20 varchar(5),@21 varchar(5),@22 varchar(5),@23 varchar(5),@24 varchar(5),@25 varchar(5),@26 varchar(5),@27 varchar(5),@28 varchar(5),
    @29 varchar(5),@30 varchar(5),@Message varchar(150) out
    )
    As
    Begin
    if @RowName = 'Line'
    begin
    insert into tbl_ScreenLayout (RowName,ScreenId,[1],[2],[3],[4],[5],[6],[7],[8],[9],[10],[11],[12],[13],[14],[15],[16],[17],[18],[19],
    [20],[21],[22],[23],[24],[25],[26],[27],[28],[29],[30])
       values
    @RowName,@ScreenId,@1,@2,@3,@4,@5,@6,@7,@8,@9,@10,@11,@12,@13,@14,@15,@16,@17,@18,@19,
    @20,@21,@22,@23,@24,@25,@26,@27,@28,@29,@30)
    set @Message = 'Added Successfully.'
    end
    else
    begin
    if (select ColumnId from tbl_ScreenLayout where RowName=@RowName and ScreenId=@ScreenId) is null
    begin
    insert into tbl_ScreenLayout (RowName,ScreenId,[1],[2],[3],[4],[5],[6],[7],[8],[9],[10],[11],[12],[13],[14],[15],[16],[17],[18],[19],
    [20],[21],[22],[23],[24],[25],[26],[27],[28],[29],[30])
                  values
    @RowName,@ScreenId,@1,@2,@3,@4,@5,@6,@7,@8,@9,@10,@11,@12,@13,@14,@15,@16,@17,@18,@19,
    @20,@21,@22,@23,@24,@25,@26,@27,@28,@29,@30)
    set @Message = 'Added Successfully.'
    end
    end
    End

    /*(4th StoredProcedure)*/
    /*This stored procedure is to get screen layout */
    CREATE procedure sp_GetScreenLayout(@ScreenId int) as
    select * from tbl_Screens s
                        inner join
                        tbl_ScreenLayout sl
                                     on
          sl.ScreenId=s.ScreenId and sl.ScreenId=@ScreenId  
  • In Web.config file  write a connection string in <connectionStrings/> tag.

       <connectionStrings>
               <add name="constr" connectionString="User Id = sa; Password = 123; Database = GridView_As_A_MOVIE_ScreenLayout; Data Source=      KatareRaju"/>
        </connectionStrings> 

  •  Add New Class by  right clicking on solution explorer and name it as a DAL (DAL = Data Access Layer) and define three methods like follows.

        
    static SqlConnection con;
        static SqlCommand cmd;
        static DataSet ds;
        static SqlDataAdapter da;
        /*(1st method in DAL.cs)*/
        /*GetConnectionString method reads the connection string from web.config
          file and returns connection string*/
        public static string GetConnectionString()
        {
            return
               ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        }
        /*(2nd method in DAL.cs)*/
        /*This method is for performing operations like Insert, Update and Delete*/
        public static int ExecuteNonQuery(string connectionString, CommandType commandType, string commandText, SqlParameter[] parameters)
        {
            try
            {
                con = new SqlConnection(connectionString);
                cmd = new SqlCommand(commandText, con);
                cmd.CommandType = commandType;
                foreach (SqlParameter p in parameters)
                {
                    if (p.Value == null)
                    {
                    }
                    cmd.Parameters.Add(p);
                }
                con.Open();
                return cmd.ExecuteNonQuery();
            }
            catch (SqlException ex)
            {
                throw new ArgumentException(ex.Message);
            }
            finally { con.Close(); }
        }
        /*(3rd method in DAL.cs)*/
        /*This method is for retrieving data from database*/
        public static DataSet ExecuteDataSet(string connectionString, CommandType
                     commandType, string commandText, SqlParameter[] parameters)
        {
            try
            {
                con = new SqlConnection(connectionString);
                cmd = new SqlCommand();
                cmd.Connection = con;
                cmd.CommandText = commandText;
                cmd.CommandType = commandType;
                if (parameters == null)
                {
                    da = new SqlDataAdapter(cmd);
                    ds = new DataSet();
                    da.Fill(ds);
                    return ds;
                }
                else
                {
                    foreach (SqlParameter p in parameters)
                    {
                        if ((p.Direction == ParameterDirection.InputOutput) && (p.Value == null))
                        {
                        }
                        //if (p.Value != null)
                        //{
                        cmd.Parameters.Add(p);
                        //}
                    }
                    da = new SqlDataAdapter(cmd);
                    ds = new DataSet();
                    da.Fill(ds);
                    return ds;
                }
            }
            catch (SqlException ex)
            {
                throw new ArgumentException(ex.Message);
            }
        }   
  • Add another New Class by  right clicking on solution explorer and name it as a BOL (BOL = Business Object Layer) and define following methods.

        /*(1st method in BOL.cs)*/
        /*AddScreen method adds screen name to tbl_Screens table in the database using stored procedure sp_AddScreen*/
        public int AddScreen(string screenName)
        {
            try
            {
                SqlParameter[] p = new SqlParameter[1];
                p[0] = new SqlParameter("@ScreenName", screenName);
                return DAL.ExecuteNonQuery(DAL.GetConnectionString(),CommandType.StoredProcedure, "sp_AddScreen", p);
            }
            catch (ArgumentException ex)
            {
                throw new ArgumentException(ex.Message);
            }
        }

       
    /*(2nd method in BOL.cs)*/
        /*GetScreens method gets all screens which are present in tbl_Screens table from the database using stored procedure sp_GetScreens*/
        public DataSet GetScreens()
        {
            try
            {
                SqlParameter[] p = new SqlParameter[0];
                return DAL.ExecuteDataSet(DAL.GetConnectionString(),CommandType.StoredProcedure, "sp_GetScreens", p);
            }
            catch (Exception)
            {
                throw;
            }
        }

        /*(3rd method in BOL.cs)*/
        /*AddScreenLayout method inserts the screen layout to the tbl_ScreenLayout table using stored procedure sp_AddScreenLayout*/
    public string AddScreenLayout(string rowName, int screenId,  string one, string two, string three, string four, string five, string six, string seven,   string eight, string nine, string ten, string eleven, string twelve, string thirteen, string fourteen, string fifteen, string sixteen, string seventeen, string eighteen, string nineteen, string twenty, string twentyone, string twentytwo, string twentythree, string twentyfour, string twentyfive, string twentysix, string twentyseven, string twentyeight, string twentynine, string thirty)
        {
            try
            {
                SqlParameter[] p = new SqlParameter[33];
                p[0] = new SqlParameter("@RowName", rowName);
                p[1] = new SqlParameter("@ScreenId", screenId);
                p[3] = new SqlParameter("@1", one);
                p[4] = new SqlParameter("@2", two);
                p[5] = new SqlParameter("@3", three);
                p[6] = new SqlParameter("@4", four);
                p[7] = new SqlParameter("@5", five);
                p[8] = new SqlParameter("@6", six);
                p[9] = new SqlParameter("@7", seven);
                p[10] = new SqlParameter("@8", eight);
                p[11] = new SqlParameter("@9", nine);
                p[12] = new SqlParameter("@10", ten);
                p[13] = new SqlParameter("@11", eleven);
                p[14] = new SqlParameter("@12", twelve);
                p[15] = new SqlParameter("@13", thirteen);
                p[16] = new SqlParameter("@14", fourteen);
                p[17] = new SqlParameter("@15", fifteen);
                p[18] = new SqlParameter("@16", sixteen);
                p[19] = new SqlParameter("@17", seventeen);
                p[20] = new SqlParameter("@18", eighteen);
                p[21] = new SqlParameter("@19", nineteen);
                p[22] = new SqlParameter("@20", twenty);
                p[23] = new SqlParameter("@21", twentyone);
                p[24] = new SqlParameter("@22", twentytwo);
                p[25] = new SqlParameter("@23", twentythree);
                p[26] = new SqlParameter("@24", twentyfour);
                p[27] = new SqlParameter("@25", twentyfive);
                p[28] = new SqlParameter("@26", twentysix);
                p[29] = new SqlParameter("@27", twentyseven);
                p[30] = new SqlParameter("@28", twentyeight);
                p[31] = new SqlParameter("@29", twentynine);
                p[32] = new SqlParameter("@30", thirty);
                p[2] = new SqlParameter("@Message", SqlDbType.VarChar, 150);
                p[2].Direction = ParameterDirection.Output;
                DAL.ExecuteDataSet(DAL.GetConnectionString(),CommandType.StoredProcedure, "sp_AddScreenLayout", p);
                return Convert.ToString(p[2].Value);
            }
            catch (ArgumentException ex)
            {
                throw new ArgumentException(ex.Message);
            }
        }

       
    /*(4)*/
        /*This method gets the screen layout from tbl_ScreenLayout table using stored procedure sp_GetScreenLayout*/
        public DataSet GetScreenLayout(int screenId)
        {
            try
            {
                SqlParameter[] p = new SqlParameter[1];
                p[0] = new SqlParameter("@ScreenId", screenId);
                return DAL.ExecuteDataSet(DAL.GetConnectionString(),CommandType.StoredProcedure, "sp_GetScreenLayout", p);
            }
            catch (ArgumentException ex)
            {
                throw new ArgumentException(ex.Message);
            }
        } 
  • Add New WebForm and drag  & drop three(3) panels on it and design Panel1, Panel2, and Panel3 as follows and design those panels like below.

    ADDSCREEN_Panel.JPG

    ADDSCREENLAYOUT_Panel.JPG

    ViewScreenLayout_Panel.JPG
     
  • And CodeBehind file(i.e., .cs file) of webform declare variables for using thorugh out the file and in default constructor create instance for Business Object Layer class. 

        int
    val;
        BOL obj;  //Business Object Layer class
        //Default Constructor   
        public GridView_As_A_MOVIE_ScreenLayout()
        {
             obj = new BOL();
        } 
  • Write a method bind the screen names to the DropDownList of Panel2 i.e., ddlScreens and call this method when the page is loading for at the first time.

     /// <summary>
    /// BindScreens method binds the all screens to the ddlScreens DropDownList of Panel2(GroupingText="ScreenDesign";)
    /// </summary>
    void BindScreens()
    {
        try
        {
            ddlScreens.Items.Clear();
            ddlScreens.DataSource = obj.GetScreens();
            ddlScreens.DataTextField = "ScreenName";
            ddlScreens.DataValueField = "ScreenId";
            ddlScreens.DataBind();
            ddlScreens.Items.Insert(0, "Select");
        }
        catch (Exception)
        {
            throw;
        }
    }
    //Page Load
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) { BindScreens(); }
    } 

  •   Call the AddScreen method of BOL class  for adding the screen to the tbl_Screens table in the Button (ID="btnSubmit")Click event.

        
    /// <summary>
        /// This is for adding screen
        /// </summary>
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            try
            {
                int val = obj.AddScreen(Convert.ToString(txtScreenName.Text));
                if (val >= 0)
                {
                    Response.Write("Screen addeed successfully.");
                    BindScreens();
                }
                else
                    Response.Write("Screen you added is already existed.");
            }
            catch (Exception)
            {
                throw;
            }
        } 
  •  In DesignScreen panel, write code for SelectedIndexChanged event of CheckBoxList (ID="chkbSeats") like below.

        protected
    void chkbSeats_SelectedIndexChanged(object sender, EventArgs e)
        {
            foreach (ListItem lt in chkbSeats.Items)
            {
                if (lt.Selected)
                {
                    val += 1;
                    lt.Text = Convert.ToString(val);
                }
                else { lt.Text = ""; }
            }
        } 
  •   Call the AddScreenLayout method of BOL class  for adding the screen layout to the tbl_ScreenLayout table in the Button (ID="btnSubmitScreenLayout") Click event.

        
    /// <summary>
        /// This is for adding screen layout
        /// </summary>
        protected void btnSubmitScreenLayout_Click(object sender, EventArgs e)
        {
            try
            {
                string one = chkbSeats.Items.FindByValue("1").Text.ToString();
                string two = chkbSeats.Items.FindByValue("2").Text.ToString();
                string three = chkbSeats.Items.FindByValue("3").Text.ToString();
                string four = chkbSeats.Items.FindByValue("4").Text.ToString();
                string five = chkbSeats.Items.FindByValue("5").Text.ToString();
                string six = chkbSeats.Items.FindByValue("6").Text.ToString();
                string seven = chkbSeats.Items.FindByValue("7").Text.ToString();
                string eight = chkbSeats.Items.FindByValue("8").Text.ToString();
                string nine = chkbSeats.Items.FindByValue("9").Text.ToString();
                string ten = chkbSeats.Items.FindByValue("10").Text.ToString();
                string eleven = chkbSeats.Items.FindByValue("11").Text.ToString();
                string twelve = chkbSeats.Items.FindByValue("12").Text.ToString();
                string thirteen = chkbSeats.Items.FindByValue("13").Text.ToString();
                string fourteen = chkbSeats.Items.FindByValue("14").Text.ToString();
                string fifteen = chkbSeats.Items.FindByValue("15").Text.ToString();
                string sixteen = chkbSeats.Items.FindByValue("16").Text.ToString();
                string seventeen = chkbSeats.Items.FindByValue("17").Text.ToString();
                string eighteen = chkbSeats.Items.FindByValue("18").Text.ToString();
                string nineteen = chkbSeats.Items.FindByValue("19").Text.ToString();
                string twenty = chkbSeats.Items.FindByValue("20").Text.ToString();
                string twentyone = chkbSeats.Items.FindByValue("21").Text.ToString();
                string twentytwo = chkbSeats.Items.FindByValue("22").Text.ToString();
                string twentythree = chkbSeats.Items.FindByValue("23").Text.ToString();
                string twentyfour = chkbSeats.Items.FindByValue("24").Text.ToString();
                string twentyfive = chkbSeats.Items.FindByValue("25").Text.ToString();
                string twentysix = chkbSeats.Items.FindByValue("26").Text.ToString();
                string twentyseven = chkbSeats.Items.FindByValue("27").Text.ToString();
                string twentyeight = chkbSeats.Items.FindByValue("28").Text.ToString();
                string twentynine = chkbSeats.Items.FindByValue("29").Text.ToString();
                string thirty = chkbSeats.Items.FindByValue("30").Text.ToString();
                lblMsg.Text = obj.AddScreenLayout(Convert.ToString(txtRowName.Text), Convert.ToInt32(ddlScreens.SelectedValue), one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen, eighteen, nineteen, twenty, twentyone, twentytwo, twentythree, twentyfour, twentyfive, twentysix, twentyseven, twentyeight, twentynine, thirty);
                if (lblMsg.Text == "Added Successfully.")
                {
                    GetScreenLayout(Convert.ToInt32(ddlScreens.SelectedValue));
                }
            }
            catch (Exception)
            { throw; }
        } 
  •  In ScreenLayout panel, Set the AutoGenerateColumns property of GridView(ID="gvScreenLayout") to False. And take 30 TemplateField's and design each templatefield as follows.

    <
    asp:TemplateField>
    <ItemTemplate>
      <asp:ImageButton ID="ImageButton1"  CommandArgument='<%# Eval("1") %>'
      CommandName="ib1" Visible='<%# MyVisible(Eval("1").ToString()) %>'
                   runat="server" ImageUrl="~/images/wchair.jpg" />
     </ItemTemplate>
    <ItemStyle BorderStyle="None" />
    </asp:TemplateField> 
  • And lastly , call the GetScreenLayout method of BOL and bind it to GridView to looks like a movie screen layout.

        ///
    <summary>
        /// Binds the Screen Layout to gvScreenLayout GridView which is present in Panel3(GroupingText="Screen Layout";)
        /// </summary>
        /// <param name="screenId"></param>
        void GetScreenLayout(int screenId)
        {
            try
            {
                gvScreenLayout.DataSource = obj.GetScreenLayout(screenId);
                gvScreenLayout.DataBind();
            }
            catch (ArgumentException ex)
            {
                Response.Write(ex.Message);
            }
        }