How to keep image as background image in master page?


Recently i was keeping Image as background in master page of one of my persnal project . Firsly i was implementing the direct approach to do this task. But in master page, directly we cant keep the image as background image.

Here is some trick to do this task

Steps 1: Create the master page as per as your requirement

Step2 : In div keep the img background syntax like this

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Imgae_BackGround_MasterPage.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div style="background-image: url('<%= imgPath %>') " >
<br />
<br />
<b style="font-style: italic; color: #fff"> This is the Header menu part of master page</b>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
<b style="font-style: italic; color: #fff"> This is the Footer menu part of master page</b>
<br />
<br />
</div>

</form>
</body>
</html>

Step3: Write the code in code behind of master page like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Imgae_BackGround_MasterPage
{
public partial class Site1 : System.Web.UI.MasterPage
{
public string imgPath = System.Web.VirtualPathUtility.ToAbsolute("~/Img/Hydrangeas.jpg");

protected void Page_Load(object sender, EventArgs e)
{

}
}
}

Step4: Now create the content page and compile it.

I hope it will help to some one

How to create 4 tier archecture application in asp.net with C# ?




Hi

So many my close friend requested me to write the tier archecture project in asp.net. I m not a expert developer,but whatever i m knowing i will share here. If you think, this is not a good approach or good practice then feel free to correct me.

Here i m assuming that you have the basis knowledge of store procedure, asp.net and C#

In this artical, we will learn the following concept

a. How to use “Multiview Control” of asp.net. It is one of the excellent control which came with asp.net 2.0. Using this control we can display different view of one page without writing the tedious code.

b. How to write the conditional store procedure. Using condition store procedure we can reduce so much C# code. It will also give good performance as compare to doing every things with C# or vb.net code.

c. How to insert,update and delete with image and displaying in DataGridview

d.How to customize the DataGridview on basis of our requirement

e.How to seperate the code in different layer

In this sample project, we will create 4 tier i.e

1. UI part
2. BE(Bussiness Entity)
3. BAL(Bussiness Access Layer)
4. DAL(Data Acess Layer)

Now we will start like this steps

Step1: Create one asp.net web site from visual studio. Here i have used Visual studio 2011

Step2: Add the new project like this img and give name BE

Step3: Like this img you create BAL and DAL

Now in asp.net project add new page i.e Home.aspx and html design will be like this

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="_3Tier_Sample.Home" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 78%;
}
.auto-style3 {
width: 130px;
}
.auto-style4 {
width: 159px;
}
.auto-style5 {
width: 340px;
}
.auto-style6 {
width: 340px;
height: 26px;
}
.auto-style7 {
width: 130px;
height: 26px;
}
.auto-style8 {
width: 159px;
height: 26px;
}
.auto-style9 {
height: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />

<asp:MultiView ID="MV1" runat="server">
<asp:View ID="View1" runat="server">
<fieldset style="width: 739px">
<legend>Emp Details</legend>
<table class="auto-style1">
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">EmpName</td>
<td class="auto-style4">
<asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
</td>
<td>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ForeColor="Red"
ControlToValidate="txtEmpName" ErrorMessage="(Required)" SetFocusOnError="True"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">&nbsp;</td>
<td class="auto-style4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">EmpAddress</td>
<td class="auto-style4">
<asp:TextBox ID="txtEmpAddress" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
<td>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
ControlToValidate="txtEmpAddress" ErrorMessage="(Required)" ForeColor="Red"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">&nbsp;</td>
<td class="auto-style4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">MobileNo</td>
<td class="auto-style4">
<asp:TextBox ID="txtMobileNo" runat="server"></asp:TextBox>
</td>
<td>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server"
ControlToValidate="txtMobileNo" ErrorMessage="(Required)" ForeColor="Red"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">&nbsp;</td>
<td class="auto-style4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="auto-style6"></td>
<td class="auto-style7">EmailId</td>
<td class="auto-style8">
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
</td>
<td class="auto-style9">
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server"
ControlToValidate="txtEmailId" ErrorMessage="(Required)" ForeColor="Red"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">&nbsp;</td>
<td class="auto-style4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">Emp Pic</td>
<td class="auto-style4">
<asp:FileUpload ID="fileUploadEmpImg" runat="server" />
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">&nbsp;</td>
<td class="auto-style4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">&nbsp;</td>
<td class="auto-style4">
<asp:Button ID="BtnSubmit" runat="server" Text="Submit"
OnClick="BtnSubmit_Click" />
</td>
<td>
<asp:HiddenField ID="HiddenField1" runat="server" />
</td>
</tr>
<tr>
<td class="auto-style5">&nbsp;</td>
<td class="auto-style3">
<asp:LinkButton ID="LnkViewAll" OnClick="LnkViewAll_Click" CausesValidation="false" runat="server">View All Emp</asp:LinkButton>
</td>
<td class="auto-style4">
<asp:Label ID="lblmsg" runat="server" ForeColor="#FF0066"></asp:Label>
</td>
<td>&nbsp;</td>
</tr>
</table>
</fieldset>

</asp:View>
<asp:View ID="View2" runat="server">
<div style="margin-left: 100px">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" Width="748px"
OnPageIndexChanging="GridView1_PageIndexChanging"
OnRowCommand="GridView1_RowCommand" OnRowDeleting="GridView1_RowDeleting"
OnRowEditing="GridView1_RowEditing" ForeColor="#333333">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="SI.No">
<ItemTemplate>
<%#Container.DataItemIndex 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmpName" HeaderText="EmpName" />
<asp:BoundField DataField="EmpAddress" HeaderText="EmpAddress" />
<asp:BoundField DataField="MobileNo" HeaderText="MobileNo" />
<asp:BoundField DataField="EmailId" HeaderText="EmailId" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Img1" runat="server" Height="100px"
ImageUrl='<%#"~/EmpImg/" Eval("Img1")%>' Width="100px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="LnkEdit" runat="server" CausesValidation="false"
CommandArgument='<%#Eval("Id") %>' CommandName="Edit1"
OnClientClick="return confirm('Are you sure?')" Text="Edit" />
<asp:LinkButton ID="LnkDelete" runat="server" CausesValidation="false"
CommandArgument='<%#Eval("Id") %>' CommandName="Delete1"
OnClientClick="return confirm('Are you sure?')" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />

</asp:GridView>
<br />

<asp:LinkButton ID="lnkEntryPage" OnClick="lnkEntryPage_Click" CausesValidation="false" runat="server">Add New Emp</asp:LinkButton>
</div>
</asp:View>
</asp:MultiView>

</div>
</form>
</body>
</html>

Step4: Create the BE layer and write the code like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BE
{
public class EmpBE
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpAddress { get; set; }
public string MobileNo { get; set; }
public string EmailId { get; set; }
public string Img1 { get; set; }

}
}

Step 5: Create the DAL layer, write all database related code like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Threading.Tasks;
using BE;

namespace DAL
{
public class EmpDAL
{
public int SaveEmpData(EmpBE objBE)
{
using (SqlConnection con = new SqlConnection(Helper.GetConnectionString()))
{
// Note:Change this code to store procedure
using (SqlCommand cmd = new SqlCommand("InsertEmpDetail", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Id", objBE.Id);
cmd.Parameters.AddWithValue("@EmpName", objBE.EmpName);
cmd.Parameters.AddWithValue("@EmpAddress", objBE.EmpAddress);
cmd.Parameters.AddWithValue("@MobileNo", objBE.MobileNo);
cmd.Parameters.AddWithValue("@EmailId", objBE.EmailId);
cmd.Parameters.AddWithValue("@Img1", objBE.Img1);

con.Open();
return cmd.ExecuteNonQuery();

}
}

}

public int UpdateEmpData(EmpBE objBE)
{
using (SqlConnection con = new SqlConnection(Helper.GetConnectionString()))
{
// here we have wiiten main logic in store procedure, Please check the storeprocedure
using (SqlCommand cmd = new SqlCommand("UpdateEmpData", con))
{
cmd.CommandType = CommandType.StoredProcedure;
if (objBE.Img1 == string.Empty)
{
cmd.Parameters.AddWithValue("@Img1", DBNull.Value);
}
else
{
cmd.Parameters.AddWithValue("@Img1", objBE.Img1);
}
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Id", objBE.Id);
cmd.Parameters.AddWithValue("@EmpName", objBE.EmpName);
cmd.Parameters.AddWithValue("@EmpAddress", objBE.EmpAddress);
cmd.Parameters.AddWithValue("@MobileNo", objBE.MobileNo);
cmd.Parameters.AddWithValue("@EmailId", objBE.EmailId);

con.Open();
return cmd.ExecuteNonQuery();

}
}

}

public int DeleteEmpData(EmpBE objBE)
{
using (SqlConnection con = new SqlConnection(Helper.GetConnectionString()))
{
// here we have wiiten main logic in store procedure, Please check the storeprocedure
using (SqlCommand cmd = new SqlCommand("DeleteEmpDetail", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Id", objBE.Id);
con.Open();
return cmd.ExecuteNonQuery();

}
}

}

public List<EmpBE> GetEmpDetail(EmpBE objBE)
{
List<EmpBE> emps = new List<EmpBE>();
using (SqlConnection con = new SqlConnection(Helper.GetConnectionString()))
{

using (SqlCommand cmd = new SqlCommand("SelectEmpDetailOnId", con))
{
con.Open();

cmd.CommandType = CommandType.StoredProcedure;
if (objBE.Id == 0)
{
cmd.Parameters.AddWithValue("@Id", DBNull.Value);
}
else
{
cmd.Parameters.AddWithValue("@Id", objBE.Id);
}

SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
EmpBE obj = new EmpBE();
obj.Id = Convert.ToInt32(dr["Id"]);
obj.EmpAddress = dr["EmpAddress"].ToString();
obj.EmpName = dr["EmpName"].ToString();
obj.MobileNo = dr["MobileNo"].ToString();
obj.Img1 = dr["Img1"].ToString();
obj.EmailId = dr["EmailId"].ToString();
emps.Add(obj);
}

return emps;

}
}

}

}
}

Step6: Create one helper class for storing the connection string like this in DAL

public class Helper
{
public static string GetConnectionString()
{
string Conn = "Data Source=.\\SQLEXPRESS;Initial Catalog=Test;Integrated Security=True";
return Conn;

}
}

Step 7: Create BAL layer. This layer is mainly used to pasing data from UI layer to DAL. We can also keep the bussiness validation logic.The code will be like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using BE;
using DAL;

namespace BAL
{
public class EmpBAL
{
public int SaveEmpData(EmpBE objBE)
{
EmpDAL objDAL = new EmpDAL();
return objDAL.SaveEmpData(objBE);

}
public int DeleteEmpData(EmpBE objBE)
{
EmpDAL objDAL = new EmpDAL();
return objDAL.DeleteEmpData(objBE);

}

public List<EmpBE> GetSelectedEmp(EmpBE objBE)
{
EmpDAL objDAL = new EmpDAL();
return objDAL.GetEmpDetail(objBE);
}

public int UpdateEmpData(EmpBE objBE)
{
EmpDAL objDAL = new EmpDAL();
return objDAL.UpdateEmpData(objBE);

}

}
}

Step8: Now the write code for code behind page of Home.aspx like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using BE;
using BAL;

namespace _3Tier_Sample
{
public partial class Home : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MV1.ActiveViewIndex = 1;
FillGrid();
}
}
bool CheckFileType(string fileName)
{
string ext = Path.GetExtension(fileName);
switch (ext.ToLower())
{
case ".jpeg":
return true;
case ".jpg":
return true;
case ".gif":
return true;
default:
return false;
}

}
private void FillGrid()
{
try
{
EmpBE objEmpBE = new EmpBE();
EmpBAL objEmpBLL = new EmpBAL();
GridView1.DataSource = objEmpBLL.GetSelectedEmp(objEmpBE);
GridView1.DataBind();
}
catch
{
}
}
protected void BtnSubmit_Click(object sender, EventArgs e)
{
try
{

EmpBE objEmpBE = new EmpBE();
EmpBAL objEmpBLL = new EmpBAL();
objEmpBE.EmpName = txtEmpName.Text;
objEmpBE.EmpAddress = txtEmpAddress.Text;
objEmpBE.EmailId = txtEmailId.Text;
objEmpBE.MobileNo = txtMobileNo.Text;
if (HiddenField1.Value != string.Empty)
{
objEmpBE.Id = Convert.ToInt32(HiddenField1.Value);
}

if (fileUploadEmpImg.HasFile)
{
if (CheckFileType(fileUploadEmpImg.FileName))
{
String filePath = "~/Empimg/" fileUploadEmpImg.FileName;
fileUploadEmpImg.SaveAs(MapPath(filePath));
}
}
objEmpBE.Img1 = fileUploadEmpImg.FileName;
if (BtnSubmit.Text == "Submit")
{
int flag = objEmpBLL.SaveEmpData(objEmpBE);
if (flag == -1)
{
MV1.ActiveViewIndex = 1;
FillGrid();
clearData();

}
}
else if (BtnSubmit.Text == "Update")
{
int flag = objEmpBLL.UpdateEmpData(objEmpBE);
if (flag == -1)
{
MV1.ActiveViewIndex = 1;
FillGrid();
clearData();
}
}
}

catch
{
}

}
private void clearData()
{
txtMobileNo.Text = string.Empty;
txtEmpName.Text = string.Empty;
txtEmpAddress.Text = string.Empty;
txtEmailId.Text = string.Empty;

}

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
try
{
EmpBE objEmpBE = new EmpBE();
EmpBAL objEmpBLL = new EmpBAL();
if (e.CommandName == "Delete1")
{
int id1 = Convert.ToInt32(e.CommandArgument);
MV1.ActiveViewIndex = 1;

objEmpBE.Id = id1;
int flag = objEmpBLL.DeleteEmpData(objEmpBE);
if (flag == -1)
{
FillGrid();
}

}
else
{
MV1.ActiveViewIndex = 0;
int id1 = Convert.ToInt32(e.CommandArgument);
objEmpBE.Id = id1;
List<EmpBE> emps = new List<EmpBE>();
emps = objEmpBLL.GetSelectedEmp(objEmpBE);

txtEmailId.Text = emps[0].EmailId.ToString();
txtEmpAddress.Text = emps[0].EmpAddress.ToString();
txtEmpName.Text = emps[0].EmpName.ToString();
txtMobileNo.Text = emps[0].MobileNo.ToString();
HiddenField1.Value = emps[0].Id.ToString();
BtnSubmit.Text = "Update";

}
}
catch
{
}

}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{

}

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{

}

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{

}

protected void LnkViewAll_Click(object sender, EventArgs e)
{
MV1.ActiveViewIndex = 1;
}

protected void lnkEntryPage_Click(object sender, EventArgs e)
{
MV1.ActiveViewIndex = 0;
clearData();
}
}
}

In this application i have used the following store procedure
1. For delete operation

CREATE PROCEDURE [dbo].[DeleteEmpDetail]
@Id int
AS
BEGIN

SET NOCOUNT ON;
Delete from tblEmpDetail where Id=@Id
END

2. For Insert operation

CREATE PROCEDURE [dbo].[InsertEmpDetail]
@Id int,
@EmpAddress varchar(250),
@EmpName varchar(150),
@MobileNo varchar(20),
@EmailId varchar(150),
@Img1 varchar(250)
AS
BEGIN
SET NOCOUNT ON;

— Insert statements for procedure here
Insert into tblEmpDetail(EmpName,EmpAddress,MobileNo,EmailId,Img1) values(@EmpName,@EmpAddress,@MobileNo,@EmailId,@Img1)
END

3. For select operation

CREATE PROCEDURE [dbo].[SelectEmpDetailOnId]
— Add the parameters for the stored procedure here
@Id int
AS
BEGIN

SET NOCOUNT ON;
If @Id is null
Select * from tblEmpDetail
else
Select * from tblEmpDetail where Id=@Id

END

4. For update operation

CREATE PROCEDURE [dbo].[UpdateEmpData]
@Id int,
@EmpAddress varchar(250),
@EmpName varchar(150),
@MobileNo varchar(20),
@EmailId varchar(150),
@Img1 varchar(250)

AS
BEGIN
SET NOCOUNT ON;
If @Img1 is null
Update tblEmpDetail set EmpName=@EmpName,EmpAddress=@EmpAddress,MobileNo=@MobileNo,EmailId=@EmailId where Id=@Id
else
Update tblEmpDetail set EmpName=@EmpName,EmpAddress=@EmpAddress,MobileNo=@MobileNo,EmailId=@EmailId,Img1=@Img1 where Id=@Id
END

I hope this post will help to some one.