• Download source - 1,005.31 KB

Introduction

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

First of all, create the database in SQL Server and name it as a “GridView_As_A_MOVIE_ScreenLayout” and in that database creates the two tables like below:

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 the 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:

And CodeBehind file (i.e., .cs file) of webform declares variables for using throughout 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 to bind the screen names to the DropDownList of Panel2, i.e., ddlScreens and call this method when the page is loading for 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 TemplateFields 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 look 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);
        }
    }

History

• 6^th March, 2011: Initial version