Sample on AJAX Editor

Raj.Trivedi
Posted by in ASP.NET AJAX category on for Intermediate level | Points: 250 | Views : 4388 red flag

In this article, we will see how we can use the AJAX Editor.We will store the data in the database after formatting it in the AJAX Editor.

Introduction


Hello Friends,

Lot of times we have an task where we need to create a Blog where the user can format the text and enter it into database and the webapp has to display in the same fashion.

This can be achieved by using the AJAX Editor.


Objective


  1. Understanding AJAX Editor
  2. Storing the text in database with formatting.
  3. Binding the text into Repeater.

Using the code


  1. Create an Empty website with Visual Studio.
  2. Add A new Web Form and drag and drop Toolscript manager on the form
  3. Incase if you do not have ajaxtool control kit and to know how to embed it please use this article as resource.Link :- http://www.dotnetfunda.com/articles/article2344-upload-image-using-ajax-async-file-uploader-in-database.aspx

    Follow the 1 - 12 Steps.

    Remember :- We are working with AJAX Editor so we need to drag and drop AJAX Editor  and not A SYNC Up-loader.

    AJAX Editor :- 

    This editor allows us to format text and save it into the database with the formatting done using the editor.The styles and the fonts and color values are also stored in the database.To insert the the content into database we have to use the content  property of the Editor Control.

    Let us start Implementation


// Table and Stored Procedure
-- Table
create table AJAXEDITOR
(
ID int identity(1,1),
Content varchar(max)
)
-- Inserting Content
create proc InsertContent
(
@Content varchar(max)
)
as
begin
insert into AJAXEDITOR(Content) values (@Content)
end
--Fetching Content
create Proc GetContent
as
begin
select * from AJAXEDITOR
end
//HTML Mark up
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HTMLEditor.aspx.cs" Inherits="HTMLEditor" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="cc1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div style="text-align: center">
        <span class="style1"><strong>Sample Project on AJAX Editor.</strong></span><br />
        <br />
        <cc1:Editor ID="ajxEditor" Width="50%" runat="server" /> <br />
        <asp:button ID="btnSave" runat="server" text="Save" onclick="btnSave_Click" />
        </div><br />
        <br />
    
    </form>
    <asp:Repeater ID="xrptEditor" runat="server">
    <ItemTemplate>
    <%#Eval("Content")%> <br /><br /><br />
    </ItemTemplate>
    </asp:Repeater>
    
</body>

</html>
//Code behind 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class HTMLEditor : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Binding the Editor Content to Repeater
            BindRepeater();
        }
    }


    protected void btnSave_Click(object sender, EventArgs e)
    {
        try
        {
            // Saving the content into database.
            SqlConnection con = new SqlConnection("Data Source=AG-KKC;Initial Catalog=DNF;Persist Security Info=True;User ID=sa;Password=sqluser");
            con.Open();

            // calling the stored procedure
            SqlCommand insertpathindb = new SqlCommand("InsertContent", con);
            insertpathindb.CommandType = CommandType.StoredProcedure;
            // passing the content as paramerter to the stored procedure the value to send is the ajaxeditor.Content
            insertpathindb.Parameters.AddWithValue("@Content", SqlDbType.VarChar).Value = ajxEditor.Content;
            insertpathindb.ExecuteNonQuery();
            con.Close();
            BindRepeater();
        }
        catch (Exception ex)
        {

        }
    }

        private void BindRepeater()
        {
            try
            {
                // Function to bind the data to repeater.
                SqlConnection con = new SqlConnection("Data Source=AG-KKC;Initial Catalog=DNF;Persist Security Info=True;User ID=sa;Password=sqluser");
                con.Open();
                SqlCommand getcontent = new SqlCommand("GetContent", con);
                getcontent.CommandType = CommandType.StoredProcedure;
                SqlDataAdapter da = new SqlDataAdapter(getcontent);
                DataSet ds = new DataSet();
                da.Fill(ds);
                xrptEditor.DataSource = ds;
                xrptEditor.DataBind();
            }
            catch (Exception ex)
            {

            }
        }
}   
Binding the data to Repeater

In this function we are getting the data from database.But the database contains the formatting as well like the font type,color etc.We do not need to worry about that as we are binding the data to repeater.To bind the repeater we have used the Eval Function that will render the data from database as HTML and applying the styles as we formatted in the editor.(Check the output Screen)


Screen 1 :- User Interface



Screen 2 : Ouput




Conclusion


This editor can be used for creating blogs where we need the user to apply styles.

 


Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)