I am using tinyMCE (a rich text editor in js).
Currently, I have a function as such:
function GetEditorValue() {
var val = tinyMCE.get('valueTextArea').getContent()
}
which returns the text that was entered into the rich text editor.
Now, is there a way to pass this data using POST to my mvc controller
and access it there?
(All this is being done in ASP.NET MVC 2 using C#)
You could send this value using AJAX. For example jQuery provides the .post() function:
var val = tinyMCE.get('valueTextArea').getContent();
$.post('<%= Url.Action("foo") %>', { value: val }, function(result) {
// TODO: handle the success
alert('the value was successfully sent to the server');
});
and inside your controller action:
[HttpPost]
public ActionResult Foo(string value)
{
// Do something with the value
}
Now obviously because this is a RichText editor the value might contain dangerous characters and ASP.NET will reject them by throwing an exception. To avoid this you could decorate your controller action with the [ValidateInput(false)] attribute:
[HttpPost]
[ValidateInput(false)]
public ActionResult Foo(string value)
{
// Do something with the value
}
and if you are using ASP.NET 4.0 you should also add the following to your web.config:
<httpRuntime requestValidationMode="2.0" />
Related
I want to do this:
public ActionResult SaveStuff(dynamic vm) {
StoreTheValue(vm.myvalue);
return Content("Saved :)");
}
This doesn't work, MVC doesn't seem to want to create a dynamic object with properties that correspond to the post data of the request.
Now I know that the whole point of properly defined view models is to create strongly typed data structures and have MVC bind data into them, but given that I'm posting data from javascript using ajax it's not strongly typed data anyway, so I don't see that I'm loosing any maintainability by doing this, and it will save me time and effort creating view model classes.
Can anyone help suggest how I can bind post data to a dynamic object, posssibly using a custom model binder?
One possible way to achieve this would be to use a custom model binder, assuming that you are posting Json to the action
public class DynamicBinder : IModelBinder
{
public object BindModel( ControllerContext controllerContext, ModelBindingContext bindingContext )
{
using( var streamReader = new StreamReader( controllerContext.HttpContext.Request.InputStream ) )
{
return JsonConvert.DeserializeObject< dynamic >( streamReader.ReadToEnd() );
}
}
}
then in your action you can tell it, to use the custom binder
public ActionResult SaveStuff([ModelBinder(typeof(DynamicBinder))]dynamic vm) {
StoreTheValue(vm.myvalue);
return Content("Saved :)");
}
then post your json as such :
{
"myvalue":{...}
}
dynamic type and ajax request that you do with javascript is not corresponding.
You always can create your strongly typed object properties on javascript side.
Anyway you can use FormCollection like this:
[HttpPost]
public ActionResult yourAction(FormCollection collection)
{
StoreTheValue(Convert.ToString(collection["myvalue"]));
return Content("Saved :)");
}
But I think it's better to think of a strongly typed way.
So I have an HttpPost in my controller that requires an object from my model. It then returns an HttpStatusCodeResult depending on success of the action. On my view, I want to run some basic javascript based on the status code result instead of redirecting to a new page. I would simply do this with AJAX but I need to send the object with a form. How would I go about doing this?
You can serialize your form and send it via ajax. Your model binding will work fine. Send a response which your client side js code can read and execute your CUSTOM functions then.
Example, You might have a create view with a form like this
#model CreateCustomerVM
#using(Html.Beginform())
{
#Html.TextBoxFor(s=>s.Name)
<input type="submit" id="btnSubmit" />
}
and the script to handle the form posting
$(function(){
$("#btnSubmit").click(function(e){
e.preventDefault();
var frm=$(this).closest("form");
$.post(frm.attr("action"),frm.serialize(),function(res){
//do something with res here'
// if(res.Success)
// {
// alert(res.Message)
// }
});
});
});
So your HttpPost action method should read the posted form, Do whatever it needs to do and send a response back, like this
[HttpPost]
public ActionResult Create(CreateCustomerVM model)
{
// to do : Read from model and save
// someService.Save(model)
return Json(new { Success = true, Message="Saved successfully"});
}
I'm trying pass a html code trough Ajax like this:
Using plugin 'summernote' (WYSIWYG Editor)
var description = $('#ticketDescription').code();
This give me for example:
<span style="font-weight: bold;">asdasdasd<span>sadasd
and when Ajax process this give an 500 internal error
$.ajax({
url: '/Ticket/NewTicket',
type: 'POST',
data: {
companyId: companyId,
subject: subject,
ticketDescription: description
},
success: function(result) {
....
},
error: function(result) {
}
});
The problem is solved by removing the '<' character from string.
Any solution to this?
Thanks
Edit: The only way I found so far is:
In javascript:
description = escape(description);
and in the controller:
ticketDescription = HttpUtility.UrlDecode(ticketDescription);
Is it correct?
ValidateInput and AllowHtml attribute is what you need to set in the property
By default Asp.Net MVC doesn't allow a user to submit html for avoiding Cross Site Scripting attack to your application.
ValidateInput Attribute
This is the simple way to allow the submission of HTML. This attribute can enable or disable input validation at the controller level or at any action method.
ValidateInput at Controller Level
[ValidateInput(false)]
public class HomeController : Controller
{
public ActionResult AddArticle()
{
return View();
}
[HttpPost]
public ActionResult AddArticle(BlogModel blog)
{
if (ModelState.IsValid)
{
}
return View();
}
}
Now, the user can submit Html for this Controller successfully.
ValidateInput at Action Method Level
public class HomeController : Controller
{
public ActionResult AddArticle()
{
return View();
}
[ValidateInput(false)]
[HttpPost]
public ActionResult AddArticle(BlogModel blog)
{
if (ModelState.IsValid)
{
}
return View();
}
}
Now, the user can submit Html for this action method successfully.
Limitation of ValidateInput attribute
This attribute also has the issue since this allow the Html input for all the properties and that is unsafe. Since you have enable Html input for only one-two properties then how to do this. To allow Html input for a single property, you should use AllowHtml attribute.
AllowHtml Attribute
This is the best way to allow the submission of HTML for a particular property. This attribute will be added to the property of a model to bypass input validation for that property only. This explicit declaration is more secure than the ValidateInput attribute.
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
public class BlogModel
{
[Required]
[Display(Name = "Title")]
public string Title { get; set; }
[AllowHtml]
[Required]
[Display(Name = "Description")]
public string Description{ get; set; }
}
Make sure, you have removed the ValidateInput attribute from Conroller or Action method. Now, the user can submit Html only for the Description property successfully.
I am using Telerik.MVC extensions and certain controls to not pass data to the controller on events.
Tee dropdown must call this.form.submit during an OnChange event to register that the user made a selection.
function ddl_OnChange(e)
{
this.form.submit();
}
In the controller I have:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index([Bind()] ViewModel.Designer model, string ddlDatabase,
string ddl, string cboTemplate, string command)
{
if (ModelState.IsValid)
{.....
On the OnChange, the value of the ddl control is passed through the ddl value.
My problem is, I have multiple dropdown and combos and would like to control the action taken by the controller depending on the choice made. How can I direct the this.form.submit();
to other functions. Also, how can I pass data additional data back to this other method.
Solution:
In the script, set the action property:
function ddlTable_OnChange(e)
{
this.form.action += '\\ddlTable_OnChange';
this.form.submit();
}
In the controller, create matching function:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult ddlTable_OnChange([Bind()] ViewModel.Designer model, string ddlDatabase,
string ddlTable, string cboTemplate, string command)
{
return Index();
}
I am using a userControl in MVC 4 that has a telerik radeditor.
I want to submit the content of the radeditor the the action method but if I user editor.get_html() the code doesn't execute.
the javascript call to the action method is the following:
function Save() {
var editor = $find("<%=radEdit.ClientID%>");
var editorHtmlContent = editor.get_html();
var entityId = document.getElementById('hdEntityId').value;
var url = '<%=Url.Action("SaveNote", "staticController")%>';
$.post(url, { EntityId: entityId, Desc: editorHtmlContent }, function (result) { });
}
any clue?
Posting HTML tags is being considered a security threat (HTML Injection and Cross-site Scripting (XSS)), so it is blocked by default. You have three ways out of this:
Encode your HTML on client side before sending to the server. You can find a lot of reading about that on SO, for example here: Fastest method to escape HTML tags as HTML entities?
If you have strongly typed model class and want to get the actual HTML, you can use AllowHtmlAttribute:
public class XMLModel
{
public int EntityId { get; set; }
[AllowHtml]
public string Desc { get; set; }
}
Last option is to disable input validation for entire action, which can be done with ValidateInputAttribute:
[ValidateInput(false)]
[HttpPost]
public ActionResult SaveNote(...)
{
...
}
You should choose the option most suitable for you.