How to generate HTML and CSS dynamically in ASP.NET C#

See more:

C#

ASP.NET

Javascript

SQL

jQuery

I am integrating this photoalbum into my asp.net website. I am able to fetch the photos into the album from database(urls) but now the problem i am facing is that there is just one album at the moment. I want to generate multiple albums depending upon the number of albums in the database.

<pre lang="xml"><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
ul#pics li {/*css style for the single photo only **/
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 1px 1px 1px #999999;
    display: inline-block;
    width: 153px;
    height:157px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
ul#pics li img {/*css style for the single photo only **/
    width: 150px;
    height:150px;
    display: block;
}
ul#pics li:hover {/*css style for the single photo only **/
    -moz-transform: scale(1.1) rotate(0deg);
    -webkit-transform: scale(1.1) rotate(0deg);
    -o-transform: scale(1.1) rotate(0deg);
    -ms-transform: scale(1.1) rotate(0deg);
    transform: scale(1.1) rotate(0deg);
}
.single_photo {/*css style for the single photo only **/
    margin-top : 80px;
    margin-left:100px;

    margin-top:65px;
}
h3 {
    margin:25px;
}
a, a:visited, a:hover {
    color: #54A6DE;
    outline: medium none;
    text-decoration: none;
}
#footer { /* demo footer text */
    font-size:9px;
    margin-top:300px;
    margin-left: 250px;
    color: #888888;
}
#text {
    margin-top:10px;
    margin-left:10px;
    color: #DD4B39;
    font-type: arial, sans-serif;
    font-size:17px;
}
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" ></script>
    <script src="Scripts/jquery.min.js" type="text/javascript" ></script>

<script src="Scripts/app.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnsave" runat="server" Text="Upload" onclick="btnsave_Click" />
</div>
&nbsp; AlbumName
    <asp:TextBox ID="txtAlbumName" runat="server"></asp:TextBox>
<div>



    <br />
    <div id="page_wrap" runat="server">
        <div id="text">
            Google Plus Album Photo</div>


 <div class="image_stack" style="margin-left:300px" runat="server" >


 <img  id="photo1" class="stackphotos"  runat="server" clientidmode="static" >
    <img  id="photo2" class="stackphotos"  runat="server" clientidmode="static">
     <img   id="photo3" class="stackphotos"  runat="server" clientidmode="static" >

     </div>



    </div>



</asp:Content>

public DataTable dt = new DataTable();
dboperation dbo = new dboperation();

protected void Page_Load(object sender, EventArgs e)
{

string q = "select photourl ,AlbumName from PhotoAlbum where UserId=42";
dt = dbo.Getdt(q);
string a = dt.Rows[0]["photourl"].ToString();
string b = dt.Rows[1]["photourl"].ToString();
string c = dt.Rows[2]["photourl"].ToString();

photo1.Src = a.Substring(1, a.Length - 1);
photo2.Src = b.Substring(1, b.Length - 1);
photo3.Src = c.Substring(1, c.Length - 1);

q = " select PhotoAlbum.AlbumId,PhotoAlbum.AlbumName from PhotoAlbum where UserId=42";

dt = dbo.Getdt(q);
drpalbum.DataSource = dt;
drpalbum.DataTextField = "albumname";
drpalbum.DataValueField = "albumid";
drpalbum.DataBind();
}


protected void btnsave_Click(object sender, EventArgs e)
{
string imgName = txtAlbumName.Text.ToString();
SqlConnection con = new SqlConnection(@"Data Source=INFOKONN_SUMIT; Initial Catalog=SLIITComDB; Integrated Security = true;");

con.Open();
SqlCommand command = new SqlCommand("select Max(albumid)+1 as PhotoID from PhotoAlbum", con);
SqlDataReader dr = command.ExecuteReader();
dr.Read();
//string albumid = dr["albumid"].ToString();



//random alphanumeric number
Guid g = Guid.NewGuid();
string random = g.ToString();
string ran= (random.Substring(0, 8));



string filename = ran + System.IO.Path.GetExtension(FileUpload1.FileName);
string location = "/Images/" + filename;
FileUpload1.SaveAs(Server.MapPath(".") + location);
dr.Close();

command = new SqlCommand("INSERT INTO PhotoAlbum (Albumname,photourl,userid,Date) VALUES ( @Albumname, @photourl,@userid,@Date)", con);
SqlParameter param0 = new SqlParameter("@Albumname", SqlDbType.VarChar, 50);
param0.Value = imgName;
command.Parameters.Add(param0);

SqlParameter param1 = new SqlParameter("@photourl", SqlDbType.VarChar);
param1.Value = location;
command.Parameters.Add(param1);


SqlParameter param2 = new SqlParameter("@userid", SqlDbType.Int);
param2.Value = Session["userid"].ToString(); ;
command.Parameters.Add(param2);

SqlParameter param3 = new SqlParameter("@Date", SqlDbType.DateTime);
param3.Value = DateTime.Now;
command.Parameters.Add(param3);

int numRowsAffected = command.ExecuteNonQuery();

con.Close();
}

protected void Button1_Click(object sender, EventArgs e)
{
int albumnid = Convert.ToInt32( drpalbum.SelectedValue);
string imgName = txtAlbumName.Text.ToString();

//random alphanumeric number
Guid g = Guid.NewGuid();
string random = g.ToString();
string ran= (random.Substring(0, 8));

string filename = ran + System.IO.Path.GetExtension(FileUpload1.FileName);
string location = "/Images/" + filename;
FileUpload1.SaveAs(Server.MapPath(".") + location);
string q = "insert into photos (Name,imageurl,albumid,date) values('blah','"+location+"','"+albumnid+"','"+DateTime.Now+"')";
dbo.insert(q);
}