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.
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
No comments:
Post a Comment