Resources » Code Snippets » AJAX

How to use AJAX Editor control in ASP.NET ?


Posted Date: 25-Mar-2012  Last Updated:   Category: AJAX    
Author: Member Level: Diamond    Points: 25


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.

AJax_Editor_Design_Page

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
AJax_Editor_Output

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.


Did you like this resource? Share it with your friends and show your love!

Responses to "How to use AJAX Editor control in ASP.NET ?"
Guest Author: Kiran     23 Nov 2012
Nice Article dude..Very helpful..Thank uuuu


Author: Aman Gandhi    20 Aug 2013Member Level: Gold   Points : 0
very helpful article but i have a question.

How can we insert image in it?



Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India