items.Add().Text(
"myTabName").LoadContentFrom("myPartialView", "myView", new { PartId = "<#= PartId #>", StationId = 1 });
In the partial view I have a submit button which calls the SaveEditor action in my controller. In the SaveEditor action I save the contents of the editor in the database.
The problem is what to do after I save the data. Right now I simply:
return view("index")
That works, but it essentially reloads my grid and I lose the state of the grid and have to renavigate down to the correct row in the grid. What I would prefer is a "save" button in the Editor's toolbar that saves the data to the database, but doesn't affect the current state of the grid/tabstrip.
I know how to use client events to display a "Saved" alert, but I don't know how to save the data to the database using Javascript. Suggestions? I'm very new to MVC.
7 Answers, 1 is accepted
To achieve this you should add a click event to either a custom tool in the Editor`s toolbar or to a button and make an Ajax post request in the handling function, to the SaveEditor action. For example :
function
saveToDateBase(id) {
var
editorName =
"editor"
+ id;
var
editor = $(
"#"
+ editorName).data(
"tEditor"
);
var
data ={stationID: id, value: editor.value() };
$.ajax({
url:
"Home/SaveEditor"
,
data: data,
type:
"POST"
});
}
For your convenience, I attached sample project which implements this.
Best wishes,
Daniel
the Telerik team
For others, here are some notes -- the standard buttons are 24px by 24px. I'm using the Metro theme so I modifide the site CSS file with the following:
input[type="image"]
{
vertical-align:bottom;
border: 1px solid #25a0da;
cursor: hand;
}
input[type="image"]:hover
{
border: 1px solid white;
}
I have one question, because I'm completely ignorant of javascript and jquery... How can I capture the success or failure of the "save" function and provide an appropriate alert?
Here is my current script, but it simply assumes the save was successful:
function saveToDatabase(_PartId, _StationId) {
var editorName = "Editor_" + _PartId + "_" + _StationId
var editor = $("#" + editorName).data("tEditor");
var data = { PartId: _PartId, StationId: _StationId, instruction: editor.value() };
$.ajax({
url: "Parts/Save2DB",
data: data,
type: "POST"
});
alert("Saved");
}
You can capture whether or not your ajax call completed successfully by adding the 'success' and 'error' attributes as follows:
function
saveToDatabase(_PartId, _StationId) {
var
editorName =
"Editor_"
+ _PartId +
"_"
+ _StationId
var
editor = $(
"#"
+ editorName).data(
"tEditor"
);
var
data = { PartId: _PartId, StationId: _StationId, instruction: editor.value() };
$.ajax({
url:
"Parts/Save2DB"
,
data: data,
type:
"POST"
,
success:
function
(result) {
// your code here for success
},
error:
function
(xhr, ajaxOptions, thrownError){
// your code here for failures
}
});
alert(
"Saved"
);
}
The functions you see within 'success' and 'error' can be written however you wish to handle them.
Regards,
Pr3vention
I suspected an encoding problem. I didn't really want to encode the data when writing to the database but I can live with that. I thought the data being passed in "data: data" would have already been encoded since in the editor template I have "Encode(true)" specified, but it does not appear to be so.
I updated my script as follows and it fixed the problem. I found the script change via Google, but I don't understand the purpose of the '<div />' . What's that all about?
function saveToDatabase(_PartId, _StationId) {
var editorName = "Editor_" + _PartId + "_" + _StationId
var editor = $("#" + editorName).data("tEditor");
var etext = $('<
div
/>').text(editor.value()).html();
var data = { PartId: _PartId, StationId: _StationId, instruction: etext };
$.ajax({
url: "Parts/Save2DB",
data: data,
type: "POST",
success: function(result) {
alert("Saved");
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
}
You are absolutely right. When I wrote the jQuery sample, I mistakenly left a comma out. I have adjusted my previous code sample accordingly. Thank you for making note of it.
As for your current issue, many symbols (such as & and escaped commands) generate a <div/> in memory but are not appended to the DOM. Using that jQuery statement, you are effectively looking for <div/> elements throughout the page and returning the encoded result in its place. A similar explanation of this event, as well as an example run-time link, can be found on this StackOverflow page (will open in new tab/window).
Regards,
Pr3vention
I changed my data specification in the jquery call to: var etext = $('<div />').text(editor.value()).html();
and then in my controller i had to convert the string to System.Web.HttpUtility.HtmlDecode(EditorValue);
Now it works perfectly - thanx for feedback!
Your issue is coming from your data definition in your ajax call.
data:
'{"chargeInfoTextID": "'
+ id +
'", "EditorValue": "'
+ editor.value() +
'", "chargeInfoTextName": "'
+ cName +
'"}'
,
Change the line to the following-
data: { chargeInfoTextID: id, EditorValue: editor.value(), chargeInfoTextName: cName},
Regards,
Pr3vention