Angular $http post to MVC action, parameter is null - javascript

So I do this post:
$http.post(Common.blog.save, { blog: blog })
.then(saveBlogComplete)
.catch(function(message) {
});
And I get this in fiddler output:
{"blog":{"title":"Chicken Is Good","content":"#Chicken Is Good\n##Contents\n* Introduction\n* Factfile\n* Analysis\n* Evaluation\n* Conclusion\n###Introduction\n\n###Factfile","dateAuthored":"","userId":""}}
In my action:
[HttpPost]
public JsonResult Save(string blog)
{
var desBlog = JsonConvert.DeserializeObject<BlogDto>(blog);
return this.ExecuteService(() => this.blogService.Save(desBlog));
}
string blog is coming back null.... I'm not sure why this is happening?
I have done the following
Put breakpoint in JavaScript - data is getting populated
Reviewed Fiddler output - the data is the same as JavaScript obj
Put breakpoint in the Action - it's getting called, the HttpContext doesn't have any data about the POST data in it

Your code will work without stringify function, if you change your mvc action parameter from String to Blog:
public class Blog
{
public string Title {get; set;}
public string Content {get; set;}
public DateTime DateAuthored {get; set;}
public long UserId {get; set;}
}
[HttpPost]
public JsonResult Save(Blog blog)
{
This happening because your blog model on server-side doesn't match to the structure of passing parameter from angular.

I just needed to stringify the data!
$http.post(Common.blog.save, { blog: JSON.stringify(blog) })
.then(saveBlogComplete)
.catch(function(message) {
});

Related

Sending files through Axios to Asp.net Core Api?

How can I send my files from my javascript(files are through react dropzone) to my asp.net core api?
I am using axios and I have something like this
var data = new FormData();
data.append('folderName', "4141515");
data.append('file', files[0].fileObject); //dropzone wraps the fileobject
axiosInstance2.post("/inventories/ImportImage", data)
[HttpPost("ImportImage")]
public async Task<IActionResult> ImportImage(IFormFile file, string folderName){}
This does work but only the "file" is populated, "foldername" variable is empty.
I tried to put it in a model but it did not work (400 status code)
public class Test
{
public IFormFile file { get; set; }
public string folderName { get; set; }
}
Also is FormData the only way to send it to the server?
Edit
Seems like I need to use [FromForm] Test test
With the .net core api controller, you have to use the [FromBody] tag before the parameter, and change the parameter to type Test, it will bind the values to a class that you can use. Like this:
public async Task ImportImage([FromBody] Test your_values_here){}

Passing dynamic parameters to ASP MVC using Jquery

I am trying to pass dynamic parameters from jquery to mvc controller. This is my jquery function
function OpenBrowserUrl(type, params)
{
window.open("{0}?linkType={1}&{2}".format(URL.openBrowserLinkURL, type, $.param(params)), '_blank');
}
params would be different things based on who passes it in. For example, it's an object like this: var param = { P1: "Test1", P2: "Test2" }
I am trying to bind those in MVC Controller. This is what it looks like right now:
public virtual RedirectResult OpenBrowserLink(object urlParameters)
{
IDictionary<string, object> paramsPair = new RouteValueDictionary(urlParameters);
foreach (var item in paramsPair)
{
System.Diagnostics.Debug.WriteLine(item.Key);
}
}
However, it's not binding properly. the values are empty. On fiddler, this is how it's sending data: http://www.url.com?param1=1&param2=2&param3=3
Any idea what's going on? or Is there a better way to handle this? Basically I am trying to mimic the way Html Helpers send parameters and bind it from the controller side using JQuery. HtmlHelper example: Html.TextboxFor(m => m.Text, new { Param1=1, Param2=2, Param3=3 });
Thanks a lot for the help
Model binder won't work because your object urlParameters has no properties. You should either create strongly typed model:
public class UrlParamerters
{
public string Param1 {get; set;}
public string Param2 {get; set;}
public string Param3 {get; set;}
}
or change your action signature:
public virtual RedirectResult OpenBrowserLink(string[] params)
and just pass an array or parameters.

Pass HTML code trough Ajax Asp.Net MVC

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.

can't pass html tags in parameters in $.post()

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.

Submit VBArray of Binary data to MVC 3 using JSON

I am using an activex control to get images from a hardware device (front and back). These images are created as a VBArray.
data = {
FrontImageData: scanResult.MemoryScanResult.FrontImageTiff.toArray(),
BackImageData: scanResult.MemoryScanResult.BackImageTiff.toArray(),
};
This puts the VBArray into an array in my json object.
It's your standard binary/integer array. I am doing an ajax post to my server, which works fine. The problem is on the backend.
[Authorize]
[HttpPost]
public JsonResult SubmitItem(SubmitItemRequest request)
{
return Json(null);
}
And my model. There is other data that I am passing in through my ajax post, but it isn't important.
public class SubmitCheckRequest
{
public byte[] FrontImageData { get; set; }
public byte[] BackImageData { get; set; }
}
My problem is that my front and back images are coming to the server as null. When I evaluate the Request, the data is there, but MVC is not translating the data correctly into my model.
Maybe the problem is how the 'VBArray' is being translated into the array? Any ideas how to get the binary data to the server so I can save the images along with the meta data?

Categories

Resources