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
- Understanding AJAX Editor
- Storing the text in database with formatting.
- Binding the text into Repeater.
Using the code
- Create an Empty website with Visual Studio.
- Add A new Web Form and drag and drop Toolscript manager on the form
- 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.