Category / Section
How to import the Data from word document to RTE and after the modification store it to the DataBase
6 mins read
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
- 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>
- 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;
}
- 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>
- 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;
}
- 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.
