How to create CMS website using C# and asp.net?

 

Introduction

In this Article, i will tell you how to create Content Management System (CMS) website using C# and ASP.Net.

History

In the Previous articles i explained how to backup and restore access database using c#.nethow to fill dataset using c#.nethow to pick data from dataset using c#.nethow to send value from one form to another using c#.net, allow only alpha numeric values in a textbox using asp.net and many more about C#.Net.

What actually is a CMS?

CMS stands for Content Management System. CMS or a 'Content Management System' quite literally allows you to control and manage the content within your web site - without technical training. If you have just a little experience with Microsoft Word then you will be able to manage the content of your own website very easily indeed. You need have no programming or HTML experience. Editing can be done with any normal web browser from anywhere in the world - or with your iPhone.

Using this uncomplicated system you can very easily add, delete images and edit text in your website on the fly. You can also have an unlimited number of pages and a full site-search engine.

You can use many editors to add CMS Functionality in your website. But i will suggest you to use CKeditor which is very easy to use. If you’ve not heard of CKEditor, it’s a free and open-source rich text HTML editor for use on websites such as this one. In fact, I’m typing into a CKEditor text box right now as I write this article via our administration back-end of the web site. It’s useful for Content Management Systems, Blogs, or anywhere else where you need you users to be able to enter rich text and change styles such as font, size and colour but without the need for technical expertise. Even for those of us who are happy using HTML, it is still a far more elegant and professional-looking way of entering content into a site. So, Now i will tell you how to add ckeditor for creating CMS websites. Let's Start :

Step1.

Create a new ASP.NET website and name it as Demo_application.

Step 2.

Download Ckeditor from here and Extract Ckeditor to the root Folder of your Application.

Step 3.

Open your web.config file . And add Connection string like below.

Also Add Below code between <system.web> tag if you are using Asp.Net 4.0.

  <httpRuntime requestValidationMode="2.0" />

Step 4.

Add a new .aspx Page and name it as "content-management.aspx" . From "content-management.aspx" page we will Enter data using CKeditor. 

Step 5.

Replace Top 1 line of the "content-management.aspx" with following line.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="content-mangement.aspx.cs" Inherits="Content-management" ValidateRequest="false"%>

Step 6. 

Call the Ckeditor Scripts in your "content-management.aspx" page like below.

<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>

Step 7.

Add Ckeditor TextBox to your "content-management.aspx" file with id  "txtCkEditor".

   <asp:FormView ID="FormView1" runat="server" DataKeyNames="Page" 
           DataSourceID="dsSiteAdministration" DefaultMode="Edit">
            <EditItemTemplate>
    <asp:TextBox ID="txtCkEditor" runat="server" TextMode="MultiLine" Text='<%# Bind("html") %>'></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Save changes" CommandName="Update" />
     </EditItemTemplate>
        </asp:FormView>

Use the CKEDITOR.replace() method to replace the existing <textarea> element with CKEditor.

  <script type="text/javascript">
    $(function () {
        CKEDITOR.replace('FormView1$txtCkEditor');
    });
</script>

Also Add SqlDataSource for fetching and Updating Ckeditor Text.

 <asp:SqlDataSource ID="dsSiteAdministration" runat="server" 
           
            SelectCommand="SELECT * FROM [T_Pages] WHERE page=@page" 
            UpdateCommand="UPDATE T_Pages SET HTML = @HTML WHERE (Page = @page)" 
                                                 ProviderName="<%$ ConnectionStrings:database_con.ProviderName %>" 
                                                 ConnectionString="<%$ ConnectionStrings:database_con %>">
           
    <SelectParameters>
        <asp:QueryStringParameter Name="page" QueryStringField="page" Type="string" />
    </SelectParameters>
    
    <UpdateParameters>
        <asp:Parameter Name="html" Type="string"/>
  
        <asp:QueryStringParameter Name="page" QueryStringField="page" Type="string" />
     </UpdateParameters>
    
       </asp:SqlDataSource>

Congratulations! You have successfully integrated CKeditor in your website. Now the Next Step is How to integrate CKeditor with database so that we can create CMS Dynamic Pages.

 

Step 8.

Create a new table into your sql database and name it as "T_Pages". Create two columns into "T_Pages" table 1. Page  2. html. Data type of "page"  column is "nvarchar(50)" and it contains page titles.  Data type of "html"  column is "ntext" and it contains page content.

ScreenShot

Step 9.

Suppose you want create two CMS pages AboutUs and ContactUs. 

Add two new .aspx files and name it as "AboutUs.aspx" and "ContactUs.aspx" respectively.

Step 10.

Open your database and enter two values into "page" column : AboutUs and ContactUs.

Screenshot

Step 11.

Add two menu items in "content-management.aspx" page for navigating between two pages :

<a href="content-management.aspx?page=AboutUs">Edit About Us Page</a>
<a href="content-management.aspx?page=ContactUs">Edit Contact Us Page</a>

Step 12.

Open "ContactUs.aspx" Page and Add following html Code. This code will read data for contactUs page from database and display data.

 <asp:SqlDataSource ID="dsPage" runat="server" 
                                                ConnectionString="<%$ ConnectionStrings:database_con %>" 
                                                ProviderName="<%$ ConnectionStrings:database_con.ProviderName %>" 
                                                SelectCommand="SELECT * FROM [T_Pages] WHERE page=@page">
                                                <SelectParameters>
                                                    <asp:Parameter DefaultValue="contactus" Name="page" Type="string" />
                                                </SelectParameters>
                                            </asp:SqlDataSource>
                                            <div style="padding-right: 15px; padding-left: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 14px;">
                                                <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsPage">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblPage" runat="server" Text='<%# Eval("html") %>' />
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                            </div>

Step 13.

Open "AboutUs.aspx" Page and Add following html Code. This code will read data for AboutUs page from database and display data.

 <asp:SqlDataSource ID="dsPage" runat="server" 
                                                ConnectionString="<%$ ConnectionStrings:database_con %>" 
                                                ProviderName="<%$ ConnectionStrings:database_con.ProviderName %>" 
                                                SelectCommand="SELECT * FROM [T_Pages] WHERE page=@page">
                                                <SelectParameters>
                                                    <asp:Parameter DefaultValue="aboutus" Name="page" Type="string" />
                                                </SelectParameters>
                                            </asp:SqlDataSource>
                                            <div style="padding-right: 15px; padding-left: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 14px;">
                                                <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsPage">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblPage" runat="server" Text='<%# Eval("html") %>' />
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                            </div>

You Are Done. Now Test Your Application.

1. Run "content Management.aspx" Page.

2. Click on "Edit About Us Page" Link.

3. Enter Content for "AboutUs" Page. And Format the Text as you want using CKeditor. After that Click "Save Changes" Button.

ScreenShot

You can set Font Size, Alignment,Font Style and many more using CKeditor.

4. Now Run "AboutUs.aspx" Page. There You can see the content which you have added using CKeditor. It also contains Same FontSize and other Styles For text which you have given using CKeditor.

Give your Valuable Comments.
comments powered by Disqus
 
Follow me on twitter
About Me
Harpreet Singh
I began programming with C++ when i was 17. Then at the middle of my study .NET came. Then I began to read C# and VB.NET. By the time i learnt SQL and ASP.NET, and developed some websites such as news portals that are active now. Currently i am running my own Software company.
More Articles