)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to import the Data from word document to RTE and after the modification store it to the DataBase

Platform: ASP.NET Web Forms |
Control: RichTextEditor |
Published Date: September 6, 2016 |
Last Revised Date: May 8, 2019

Description

We have a word document (application form), from that the data will be fetched and set as the content for the RTE. User can give the values for fields in the application form. Once the user presses the save button, the values will be stored to the DataBase. If the user enters the email-id, the remaining fields value will be shown automatically if the email id is already present in the DataBase.

 

Solution

  1. Initialize the RTE with the custom tool for the save action.

 

C#

<ej:RTE ID="RTE1" runat="server" ClientSideOnCreate="onCreate">
    <Tools>
        <CustomTools>
            <ej:CustomTools Name="save" Text="Save" Tooltip="Save" Action="saveAction" />                           
        </CustomTools>
    </Tools>
</ej:RTE>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [SaveData]"></asp:SqlDataSource>
 

 

  1. The word document was kept in the App_Data folder and the data is fetched from the word document and set as value for the RTE in code behind.

 

C#

using Syncfusion.DocIO;
using Syncfusion.DocIO.DLS;
 
WordDocument document = null;
       
protected void Page_Load(object sender, EventArgs e)
{      
    document = new WordDocument(Server.MapPath(@"App_Data/TemplateFormFields.doc"));
    MemoryStream stream = new MemoryStream();
    document.Save(stream, FormatType.Html);
    stream.Position = 0;
    StreamReader reader = new StreamReader(stream);            
    string value = reader.ReadToEnd().ToString();
    this.RTE1.Value = value;      
}

 

 

RTE control

  1. User can only enter the text in input field, other than that user cannot edit, this can be achieved by setting the body’s contenteditable as false.

 

<script type="text/javascript">
function onCreate()
        {
            obj = $("#RTE1").data("ejRTE");
            doc = obj.getDocument();
            $(doc.body).attr("contenteditable", false);
            $(doc).find("input[name='Text_1572a88e_721c_4']").val("");
            emptyData();
        }
function emptyData()
        {
            $(doc).find("input[name='Text_e8a8b4c5_7820_4']").val("");
            $(doc).find("input[name='Text_c1030a65_b1bf_4']").val("");
            $(doc).find("input[name='Text_194b662d_e593_4']").val("");
        }
</script>

 

  1. Once user fill the form and click the save button, the data will be store to the DataBase.

Upon clicking to the Save button, the corresponding function (saveAction) will be triggered, in that all fields’ data are fetched in client side and using ajax function to call the storeData action method. The data are passed as the arguments.

 

Javascript

function saveAction()
         {
            data = getData();
            $.ajax({
                type: 'POST',
                url: "RTEFields.aspx/storeData",
                data: JSON.stringify({ saveData: data }),
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                async: false,
                success: function (Result) {
                    $(doc).find("input[name='Text_1572a88e_721c_4']").val("");
                    emptyData();
                },
                error: function (e) {
                    
                }
            });
        }
function getData()
{
    return data={         
        email: $.trim($(doc).find("input[name='Text_1572a88e_721c_4']").val()),
        name: $.trim($(doc).find("input[name='Text_e8a8b4c5_7820_4']").val()),
        address: $.trim($(doc).find("input[name='Text_c1030a65_b1bf_4']").val()),
        phone: $.trim($(doc).find("input[name='Text_194b662d_e593_4']").val()),
    }
}

 

In code behind, the data will be stored to the “SaveData” table using SQL connection string.

 

C#

[System.Web.Services.WebMethod]
        public static string storeData(Dictionary<object, object> saveData)
        {
            string Email=null, Name=null, Address=null; Int64? Number=null;
            foreach (string keys in saveData.Keys)
            {
                switch(keys)
                {
                    case "email":
                        Email = saveData["email"].ToString();
                        break;
                    case "name":
                        Name = saveData["name"].ToString();
                        break;
                    case "address":
                        Address = saveData["address"].ToString();
                        break;
                    case "phone":
                        Number = Convert.ToInt64(saveData["phone"]);
                        break;
                }
            }
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
                SqlCommand cmd = new SqlCommand();
                cmd.Connection = myConnection;
                cmd.CommandText = "insert into SaveData(Email, Name, Address, Number) values('"+Email+"','"+Name+"','"+Address+"',"+Number+")";
                cmd.CommandType = CommandType.Text;                
                if (myConnection.State == ConnectionState.Closed)
                {
                    myConnection.Open();
                }
                cmd.ExecuteNonQuery();
                myConnection.Close();
            return null;
        }        

 

  1. If user fill the data which was already present in the DataBase, the remaining fields value will be fetched from the DataBase and display in the RTE

 

The email-id input field bounded with the “change” event, once the user enter or change the value, the following function will be triggered, the value of the email-id field send as the argument in ajax call.

 

Javascript

$(function () {
            $(doc).find("input[name='Text_1572a88e_721c_4']").on("change", function () {
                datas = $.trim($(doc).find("input[name='Text_1572a88e_721c_4']").val());
                if(datas.length!=0)
                $.ajax({
                    type: 'POST',
                    url: "RTEFields.aspx/retriveData",
                    data: JSON.stringify({ data: datas }),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    async: false,
                    success: function (Result) {
                        var result = JSON.parse(Result.d);
                        if (result.length>0){
                              $(doc).find("input[name='Text_e8a8b4c5_7820_4']").val(result[0].name);
                            $(doc).find("input[name='Text_c1030a65_b1bf_4']").val(result[0].address);
                            $(doc).find("input[name='Text_194b662d_e593_4']").val(result[0].phone);
                        }
                        else
                        {
                            emptyData();
                        }
                    },
                    error: function (e) {
 
                    }
                });
            });
        });

 

Once the user enters the “email-id”, the “retriveData” action method will be triggered, which was done using ajax call.

 

C#

[System.Web.Services.WebMethod]
        public static string retriveData(string data)
        {
            
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
            SqlCommand cmd = new SqlCommand();
                cmd.Connection = myConnection;
                cmd.CommandText = "select * from SaveData where Email='" + data + "'";
              
                if (myConnection.State == ConnectionState.Closed)
                {
                    myConnection.Open();
                }               
                SqlDataReader dr = cmd.ExecuteReader();           
            List<details> dataList = new List<details>();
            while(dr.Read())
            {
                dataList.Add(new details { email = dr["Email"].ToString(), name = dr["Name"].ToString(), address = dr["Address"].ToString(), phone = Convert.ToInt64(dr["Number"]) });               
            }
            myConnection.Close();
            return new JavaScriptSerializer().Serialize(dataList);
        }
        public class details
        {            
           public string email
           {
               get;
               set;
           }
           public string name
           {
               get;
               set;
           }
           public string address
           {
               get;
               set;
           }
           public Int64? phone
           {
               get;
               set;
           }
        }

Here, data is fetched from DataBase. In the success function of ajax call, set the data to the application form fields.

Data filled in RTE on using ajax request

 

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon