Thursday 20 June 2013

How to edit HTML content through Editor and save in the database

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 

No comments:

Post a Comment