How to use AJAX Editor control in ASP.NET ?
In this article I am going to explain about AJAX editor and its uses with simple example code. This code snippet is may be require when you develop HTML content editing in your webpage using Editor.
Description:
How to edit HTML content through Editor and save in the database
For an example we are store html contents in the database field. Sometimes we need to edit that content using editor and save back to database. In that situation we can use AJAX Editor to edit/modify content through web page.
In below sample code I have stored editor content into database.Table Structure
create table prod (pdesc varchar(max))Client side
I have placed AJAX editor control and button in the web page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Editor Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<table cellpadding="0" cellspacing="0" width="800" align="center">
<tr>
<td height="40">
<h3><b>Ajax Editor Example</b></h3>
</td>
</tr>
<tr>
<td height="40" align="left">
Enter Html contents in the Editor
</td>
</tr>
<tr>
<td height="40" align="center">
<cc1:Editor ID="Editor1" runat="server" Height="300" Width="800" />
<br />
<br />
<asp:Button ID="btnSave" runat="server"
Text="Save Content in DB and display in gridview" onclick="btnSave_Click" /><br />
<br />
</td>
</tr>
<tr>
<td height="40" align="center">
<asp:GridView ID="GridView1" runat="server"
onrowdatabound="GridView1_RowDataBound">
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Web page design look like this.
Server Side
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ToString());
SqlCommand sqlcmd = new SqlCommand();
SqlDataAdapter da = new SqlDataAdapter();
DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LoadGrid();
}
}
void LoadGrid()
{
try
{
//Open Sql connection
sqlcon.Open();
//Pass query to get data from database table
sqlcmd = new SqlCommand("select pdesc [Description] from prod ", sqlcon);
da = new SqlDataAdapter(sqlcmd);
//Fill data into datatable
da.Fill(dt);
// Bind data into the grid view control
GridView1.DataSource = dt;
GridView1.DataBind();
}
catch (Exception ex)
{
}
finally
{
//Close Connection
sqlcon.Close();
}
}
protected void btnSave_Click(object sender, EventArgs e)
{
try
{
sqlcon.Open();
//Get Value from Editor control using Editor1.Content and insert into database
sqlcmd = new SqlCommand("insert into prod values('" + Editor1.Content + "')", sqlcon);
sqlcmd.ExecuteNonQuery();
}
catch (Exception ex)
{
}
finally
{
//Close Connection
sqlcon.Close();
}
//Refresh grid after store values in the database
LoadGrid();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//Format GRid cells to display html formatted text in to the grid view
foreach (TableCell cell in e.Row.Cells)
{
cell.Text = Server.HtmlDecode(cell.Text);
}
}
}Output
After save html contents in AJAX editor we can display it in grid view look like this 
Source Code Detail:
Here with I have attached source code download it and try to learn AJAX Editor in ASP.NET.
Front End : ASP.NET
Code Behind : C#
Conclusion:
I hope this article help to know about AJAX Editor.
Nice Article dude..Very helpful..Thank uuuu