In first part we created a database for our blog. Now we’ll add web pages and logic to our blog. we’ll create three web pages, one for showing all blogs , other one for reading those blogs and one for writing a blog.I’ll use only textbox for writing blog. You can add WYSIWYG editor if you want. These pages will be Default.aspx , details.aspx and write.aspx. But first we’ll create a master page.
Go in solution explorer and right click on you project. Select add and then select add new item. In Add new item box select Master Page template. Be sure that your language is C#. Check the Place code in separate file option. Leave the name as MasterPage.master.
Now add default.aspx by selecting web Form template. Check both, select master page and place code in separate file option. Click add button. On select a master page box select our masterpage.master file and hit OK.

Same way, add details.aspx and write.aspx web forms to the project using our master page.
Now create a stylesheet to give our blog a basic style. I am not using a very nice looking css. As i have very poor designing skills i must say that this tutorial has not a good style. You can style your css as you want. For adding style sheet right click on your project, select add, select Add New Item, select stylesheet template. Go with the default name given to the stylesheet by VS. Now Put the following style in this css file.


body {
}

.container{
    width:960px;
    margin:0 auto;
}

.header{
    width:auto;
    height:100px;
}
.menu{
    width:auto;
    height:50px;
    background-color:flavor;
}
.content{
    width:auto;
}
.footer{
    width:auto;
    height:100px;
}

Open your masterpage file and update it as shown below :


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="header"><h1>Our Blog</h1></div>
        <div class="menu">
            <a href="Default.aspx">Home</a>
        </div>
    <div class="content">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
        <div class="footer">This is footer</div>
    </div>
    </form>
</body>
</html>

Open your write.aspx web form and add these lines in it’s body ContentPlaceHolder ( ContentPlaceHolder1 ) :

<div>
    <div>
        Title:<asp:TextBox ID="txbxTitle" runat="server"></asp:TextBox>
    </div>
    <div>
        Author:<asp:TextBox ID="txbxAuthor" runat="server"></asp:TextBox>
    </div>
    <div>
        Blog<br />
        <asp:TextBox ID="txbxContent" runat="server" TextMode="MultiLine"></asp:TextBox>
    </div>
    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</div>

Open your default.aspx web form and add these lines in it’s body ContentPlaceHolder ( ContentPlaceHolder1 ) :

<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" class="gridview" ShowHeader="false" GridLines="None">
<Columns>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<tr>
<td>
<div class="BlogHead">
<h2><a href='<%# Eval("Id", "details.aspx?Id={0}") %>' class="BlogHead">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Title") %>'></asp:Label></a></h2>
    
</div>
<div class="post_meta">
    <span class="post_author blackLink nocursor"><asp:Label ID="Label2" runat="server" Text='<%#Eval("Author") %>'></asp:Label>,</span>
    <span class="date blackLink nocursor"><asp:Label ID="Label11" runat="server" Text='<%#Eval("BlogDate") %>'></asp:Label></span>
</div>
<br />
<div id="blbodythumb" style="text-align:justify;">
<p><asp:Label ID="Label100" runat="server" Text='<%#Eval("Content") %>' ></asp:Label></p></div><hr class="style-one" />
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No data
</EmptyDataTemplate>
</asp:GridView>
</div>

Open your details.aspx web form and add these lines in it’s body ContentPlaceHolder ( ContentPlaceHolder1 ) :

<div>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false" Width="100%" GridLines="None">
<Fields>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<tr>
<div>
<h2>
<asp:Label ID="lblBlogPostTitle" runat="server" Text='<%#Eval("Title") %>'></asp:Label></h2>
<div>
<span>
<asp:Label ID="lblAuthor" runat="server" Text='<%#Eval("Author") %>'></asp:Label></span>
<span>
<asp:Label ID="lblBlogDate" runat="server" Text='<%#Eval("BlogDate") %>'></asp:Label></span>
</div>
<div style="text-align: justify;">
<p>
<asp:Label ID="lblMessage" runat="server" Text='<%#Eval("Content") %>'></asp:Label></p>
</div>
</div>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
</div>
<div>
<hr />
comments:
<br />
<asp:GridView ID="GridViewcomment" runat="server" AutoGenerateColumns="false" ShowHeader="false" GridLines="None" Width="100%" CellSpacing="10">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td>
<div>
<asp:Label ID="lblauthor" runat="server" Text='<%#Eval("Name") %>' Font-Bold="true" Font-Italic="true" Font-Size="Large"></asp:Label>
<asp:Label ID="LabelCommentDate" runat="server" Text='<%# Eval("Date") %>' Font-Size="Smaller"></asp:Label>
</div>
<div>
<p>
<asp:Label ID="Lblcomment" runat="server" Text='<%#Eval("Comment") %>'></asp:Label></p>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="LabelNoComment" runat="server" Text="No comments yet." Visible="false"></asp:Label>
</div>
<div id="comment_form">
<h3>Post a comment</h3>
<label>Name</label>
<asp:TextBox ID="txbxcommentauthor" runat="server" MaxLength="30"></asp:TextBox>
<br />
<label>Comment</label>
<asp:TextBox ID="txbxcomment" runat="server" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</div>

Now in next post we’ll add logic to our blogging application. Click here for the next part of this tutorial.