We Keep Coding

Ajax call in Razor View sends null data in controller method?

I'm trying to make a simple post call in a controller method using an ajax call from a razor view.The ajax call does call the controller method but it does not send the object from that I'm trying to send.I tried multiple solutions from Stackoverflow without success including using Json.stringify() method and using the [HttpPost] attribute in controller method.I also have the name of the object from View the same as the name of the controller method parameter.This is the script where I make the Ajax call:
<script>
$(document).ready(function () {
$('.send-all').on('click', function() {
var data = $('#verticalScroll tr').map(function () {
var $row = $(this);
return {
id: $row.find('.id').text().trim(),
companyName: $row.find('.companyname').text().trim(),
price: $row.find('.price').text().trim(),
quantity: $row.find('.quantity').text().trim(),
}
}).get();
var BID = [];
for (var i = 0; i < data.length; i++) {
if (data[i].id != null && data[i].id != "") {
BID.push(data[i]);
}
}
$.ajax(
{
type: "POST",
url: "/User/UpdateBID",
data: BID,
cache: false,
async: true,
dataType: "json",
success: function (data) {
alert(data);
},
});
});
});
</script>
and this is the method from the controller :
public ActionResult UpdateBID(object BID)
{
string c = JsonConvert.SerializeObject(BID);
//Context.UpdateBID(b);
return RedirectToAction("SesionIndividual", TempData["LoginModel"]);
}
The controller method is called,but the object is null.I also made sure the JavaScript object is not null.I also tried to send other objects just to test it,and I have the same result,the parameter in the controller method is null.

I have the name of the object from View the same as the name of the controller method parameter.
The name of the object is irrelevant, as it's just a variable name. This gets converted to the name data anyway - ie data:BID = data=BID so the "variable name" passed via ajax is "data". The properties in that variable need to match.
The short answer is you your "data" variable needs a property that matches the action parameter name, ie:
data: { BID: BID },
The long(er) answer is that the MVC model binder will attempt to match property names with your parameter names. In this case you've made it difficult on yourself by using object BID instead of an actual model, so there are no properties to match so it can only match on the parameter itself.
If you created a model that matched the data being passed:
public class BIDModel {
public string companyName { get;set; }
public string price { get;set; }
public string quantity { get;set; }
}
and used that in your action
public ActionResult UpdateBID(BIDModel BID)
then passing data: BID would work as the properties of data would be matched with the properties of BIDModel - you could still use data: { BID: BID } and the MVC model binder would match the data.BID property to your parameter name directly (and the properties within each would then be mapped).
To cover:
[HttpPost] attribute in controller method.
the [HttpPost] attribute does not make it a post method - instead of restricts the http verb to POST. You generally don't need this. It's useful where you have two methods with the same name but different overloads and one for the GET with an equivalent POST (where the GET parameter is just an id but the POST is the full model). It can also be used as additional security.
In your case, you are getting inside the action (just with a null parameter) so that part is clearly working fine.

MVC will try to bind from model properties so there should be a property called BID
data: { BID: BID }

For anyone interested I realize what the problem was.I was trying to send an JavaScript array of objects to a method which theoretically accepted an array of those objects.Well,apparently this did not work.What I did was to create a new object in C# with a property which had a type of UpdateOrder[],something like that:
public class UpdateOrder
{
public int id { get; set; }
public string companyName { get; set; }
public string price { get; set; }
public int quantity { get; set; }
}
public class Term
{
public UpdateOrder[] Terminal { get; set; }
}
I created a similar Term object in Javascript and send it through AJAX in controller method and it worked.So,instead of sending directly an array,I created an object with a property which holds that array.

Post knockout.js viewmodel to .Net Core (2.0) MVC Controller

Overview:
Currently, I try to create an ASP.NET Core MVC website which gets data from the server on page load. After that, the page uses knockout.js to maintain a viewmodel to update the data sent from the server (in the first step). Finally, there is a button which sends the edited data back to the server (through an AJAX request). But the corresponding value in my server method is always empty.
Current Approach:
First, there is my model class.
public class Order
{
public string Name { get; set; }
public int TemplateId { get; set; }
public decimal Price { get; set; }
public int Contingent { get; set; }
public int MaximumOrder { get; set; }
public int UserOrderCount { get; set; }
public Order() { }
public Order(SnackOffer offer)
{
Name = offer.Template.Name;
TemplateId = offer.Template.SnackTemplateId;
Price = offer.Price;
}
}
In my view I use the model class as a List (List) and load the data like this:
var model = new viewModel();
#(Json.Serialize(Model.Offers)).forEach(function (item, index) {
model.offers.push({
name: item.name,
templateId: item.templateId,
contingent: ko.observable(item.contingent),
userOrderCount: ko.observable(item.userOrderCount),
price: item.price,
maximumOrder: item.maximumOrder
});
})
The viewModel is defined like this (shortend for readability):
function viewModel() {
var self = this;
self.offers = ko.observableArray();
}
Now after someone hits the mentioned update button I call this javascript function:
self.ConfirmOrder = function () {
var data = ko.toJSON(self.offers);
$('#overlay').css('display', 'block');
$.ajax({
type: 'post',
url: '/Snack/ConfirmOrder',
data: data,
contentType: 'application/json; charset=utf-8',
success: function (result) {
$('#overlay').css('display', 'none');
},
error: function (result) {
console.log(result);
$('#overlay').css('display', 'none');
}
});
}
Here you can see that I use the ko.toJSON method to convert the observableArray to a JSON String and use this string as the data argument for the ajax post.
The ConfirmOrder method in the MVC Controller looks like this currently:
[HttpPost]
public void ConfirmOrder(List<OrderSnackViewModel.Order> offers)
{
foreach (var item in offers)
{
_logger.LogInformation(item.Name);
}
}
There is no logic yet cause the offers list is created (so not null) but the count of list items is always 0.
In a concret example this is the JSON string I receive from the server while load the view:
[{"name":"Test","templateId":1,"price":1.94,"contingent":4,"maximumOrder":7,"userOrderCount":0},{"name":"Test 1","templateId":2,"price":1.50,"contingent":30,"maximumOrder":7,"userOrderCount":0}]
And this is the string i produce with the ajax call:
[{"name":"Test","templateId":1,"contingent":4,"userOrderCount":0,"price":1.94,"maximumOrder":7},{"name":"Test 1","templateId":2,"contingent":30,"userOrderCount":0,"price":1.5,"maximumOrder":7}]
What have I tried already:
I have tried to use FromBody in my MVC Controller
I have tried to prefix the JSON output with the name offer so my controller method can map the JSON string items to the object. (e.g. data = '{ "offers":' + data + '}'; )
I have tried to rename the Properties of my model to match exactly the JSON names. So I renamed Name to name and Contingent to contingent and so on.
I have tried to use an array instead of the List in the MVC controller action
Is there a master somewhere which can help me with this problem?
(If you need some more information please do not hesitate to ask)

Thanks to the input of #adiga I have found the solutions for (my) error.
[HttpPost]
public JsonResult ConfirmOrder([FromBody]List<Order> offers)
{
_logger.LogInformation("COUNT -> " + offers.Count());
foreach (var item in offers)
{
_logger.LogInformation(item.Name);
}
}
This is the working solution. I thought I already have tried it but maybe I have forgoten the content-type for the ajax post.
var data = ko.toJSON(self.offers);
$('#overlay').css('display', 'block');
$.ajax({
type: 'post',
url: '/Snack/ConfirmOrder',
data: data,
contentType: 'application/json; charset=utf-8',
success: function (result) {
//location.reload();
$('#overlay').css('display', 'none');
},
error: function (result) {
console.log(result);
$('#overlay').css('display', 'none');
}
});
Thanks again for all responses!

Call c# function from javascript function [duplicate]

I want to call CsharpFunction, a C# function in code-behind, from JavaScript. I tried the code below but whether the JavaScript condition is True or False, CsharpFunction was called regardless!
JavaScript code:
if (Javascriptcondition > 0) {
<%CsharpFunction();%>
}
C# code behind:
protected void CsharpFunction()
{
// Notification.show();
}
How do I call a C# function from JavaScript?

You can use a Web Method and Ajax:
<script type="text/javascript"> //Default.aspx
function DeleteKartItems() {
$.ajax({
type: "POST",
url: 'Default.aspx/DeleteItem',
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#divResult").html("success");
},
error: function (e) {
$("#divResult").html("Something Wrong.");
}
});
}
</script>
[WebMethod] //Default.aspx.cs
public static void DeleteItem()
{
//Your Logic
}

.CS File
namespace Csharp
{
public void CsharpFunction()
{
//Code;
}
}
JS code:
function JSFunction() {
<%#ProjectName.Csharp.CsharpFunction()%> ;
}
Note :in JS Function when call your CS page function.... first name of project then name of name space of CS page then function name

A modern approach is to use ASP.NET Web API 2 (server-side) with jQuery Ajax (client-side).
Like page methods and ASMX web methods, Web API allows you to write C# code in ASP.NET which can be called from a browser or from anywhere, really!
Here is an example Web API controller, which exposes API methods allowing clients to retrieve details about 1 or all products (in the real world, products would likely be loaded from a database):
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
[Route("api/products")]
[HttpGet]
public IEnumerable<Product> GetAllProducts()
{
return products;
}
[Route("api/product/{id}")]
[HttpGet]
public IHttpActionResult GetProduct(int id)
{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
The controller uses this example model class:
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
Example jQuery Ajax call to get and iterate over a list of products:
$(document).ready(function () {
// Send an AJAX request
$.getJSON("/api/products")
.done(function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});
Not only does this allow you to easily create a modern Web API, you can if you need to get really professional and document it too, using ASP.NET Web API Help Pages and/or Swashbuckle.
Web API can be retro-fitted (added) to an existing ASP.NET Web Forms project. In that case you will need to add routing instructions into the Application_Start method in the file Global.asax:
RouteTable.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = System.Web.Http.RouteParameter.Optional }
);
Documentation
Tutorial: Getting Started with ASP.NET Web API 2 (C#)
Tutorial for those with legacy sites: Using Web API with ASP.NET Web Forms
MSDN: ASP.NET Web API 2

Use Blazor
http://learn-blazor.com/architecture/interop/
Here's the C#:
namespace BlazorDemo.Client
{
public static class MyCSharpFunctions
{
public static void CsharpFunction()
{
// Notification.show();
}
}
}
Then the Javascript:
const CsharpFunction = Blazor.platform.findMethod(
"BlazorDemo.Client",
"BlazorDemo.Client",
"MyCSharpFunctions",
"CsharpFunction"
);
if (Javascriptcondition > 0) {
Blazor.platform.callMethod(CsharpFunction, null)
}

Server-side functions are on the server-side, client-side functions reside on the client.
What you can do is you have to set hidden form variable and submit the form, then on page use Page_Load handler you can access value of variable and call the server method.
More info can be found here
and here

If you're meaning to make a server call from the client, you should use Ajax - look at something like Jquery and use $.Ajax() or $.getJson() to call the server function, depending on what kind of return you're after or action you want to execute.

You can't. Javascript runs client side, C# runs server side.
In fact, your server will run all the C# code, generating Javascript. The Javascript then, is run in the browser. As said in the comments, the compiler doesn't know Javascript.
To call the functionality on your server, you'll have to use techniques such as AJAX, as said in the other answers.

Posting/Binding multiple forms on backend ASP.NET MVC (MEF)

We are trying to send multiple forms with one Ajax (jQuery) Call to an ASP application.
We use the following jQuery code:
var formContainer = {
Form1 : form1.serialize(),
Form2 : form2.serialize()
}
$.ajax({
type: "POST",
url: '#Url.Action("CreateModel", "Controller")',
data: formContainer,
success: function (result) { }
});
On the server we receive the following in the Request.Form property:
Key : Value
Form1 : All serialized form elements for Form1
Form2 : All serialized form elements for Form2
Normally we use the following method so ASP is automaticly creating the object with the right property value:
public ActionResult CreateModel(ClassForForm1 obj)
But because the two forms are send together the modelbinder cannot bind and build the class.
So for this action we want the modelbuilder to use the values in Request.Form["Form1"].
We can't use a custom modelbinder, because we use an extern library (DevExpress ,they wrote an own implementation above this).
We are using the MEF framework to add functionalities (these functionalities are added as forms on the view). For this reason we do not know what too expect on the backend. So writing a wrapper ViewModel is not acceptable.
The functionality for proccessing the other forms data will be handeled inside other modules.
Any solutions are welcome!
Thanks in advance.

This is typically done using a combined view model. Otherwise, you would need to manually parse the request parameters. Here is a fiddle showing how to combine the data from multiple forms.
$(function() {
$('button').click(function(e) {
var form1 = $('#form1');
var form2 = $('#form2');
$.ajax({
type: "POST",
url: '/echo/html/',
data: form1.serialize()+"&"+form2.serialize(),
success: function (result) {
alert(result);
}
});
});
});
On the server, your view model would require:
public class IndexViewModel {
// properties from form1
public string first { get; set; }
// properties from form2
public string last { get; set; }
}
public class First {
public string first { get; set; }
}
public class Last {
public string last { get; set; }
}
And your action signature:
[HttpPost]
public ActionResult Index(IndexViewModel model) {
var firstModel = (new First()).CloneMatching(model);
var lastModel = (new Last()).CloneMatching(model);
return RedirectToAction("Thanks");
}
See Best way to clone properties of disparate objects for the CloneMatching extension method.

If you create you javascript object like this:
var formContainer = { obj : {
Form1 : form1.serialize(),
Form2 : form2.serialize()
}
}
The controller should match it up with the name 'obj' you created in the javascript with the 'obj' in your method....
public ActionResult CreateModel(ClassForForm1 obj)

My previous sample worked just because my class has name and value props. I'm realy sorry for that. But now you can see working DEMO
JS
function mapForm(form)
{
var result = {};
$.map($(form).serializeArray(),
function(el){
mapFormProperty(result, el);
});
return result;
}
function mapFormProperty(form, property)
{
form[property.name] = property.value;
}
$('.submit').click(function(){
var form1 = mapForm($('#form1'));
var form2 = mapForm($('#form2'));
var formContainer = {
'Form1': form1,
'Form2': form2};
$.ajax({
type: "POST",
url: '#Url.Action("CreateModel", "Controller")',
data: JSON.stringify(formContainer),
success: function (result) { }
});
Operations with forms and form container should give you next json string
"{"Form1":{"Prop1":"Value1","Prop2":"Value2"},"Form2":{"Prop1":"Value1","Prop2":"Value2"}}"
And your model binder will be able solve this, if you change your action signature
Action
public ActionResult CreateModel(ClassForForm1 Form1) //argument name must be equal to data property
//but not equal to class name
And it should work. it works in my test sample

ASP.NET MVC - Returning a PartialView to Ajax along with another object

I am writing a single page ajax app with ASP.NET MVC - making heavy use of jQuery. I do something similar to the following throughout the app:
JS:
$.ajax({
type: "GET",
url: "/Home/GetSomePartialView/",
data: someArguments,
success: function (viewHTML) {
$("#someDiv").html(viewHTML);
},
error: function (errorData) { onError(errorData); }
});
Controller C#:
public ActionResult GetSomePartialView(SomeArgumentModel someArguments)
{
return PartialView("_CaseManager");
}
This works great. The viewHTML (in the ajax success function) is returned as a string and I can shove it on the page no problem.
Now what I would like to do is to return not only the PartialView HTML string, but also some sort of status indicator. This is a permissions thing - for instance, if someone tries to get to a portion of they app they don't have permission to, I want to return a different PartialView than they asked for and also display a message in a popup window telling them why they got an View different from what they asked for.
So - to do this, I would like to do the following:
Controller C#:
public ActionResult GetSomePartialView(SomeArgumentModel someArguments)
{
ReturnArgs r = new ReturnArgs();
bool isAllowed = CheckPermissions();
if (isAllowed)
{
r.Status = 400; //good status ... proceed normally
r.View = PartialView("_CaseManager");
}
else
{
r.Status = 300; //not good ... display permissions pop up
r.View = PartialView("_DefaultView");
}
return Json(r);
}
public class ReturnArgs
{
public ReturnArgs()
{
}
public int Status { get; set; }
public PartialViewResult View { get; set; }
}
JS:
$.ajax({
type: "GET",
url: "/Home/GetSomePartialView/",
data: someArguments,
success: function (jsReturnArgs) {
if (jsReturnArgs.Status === 300) { //300 is an arbitrary value I just made up right now
showPopup("You do not have access to that.");
}
$("#someDiv").html(jsReturnArgs.View); //the HTML I returned from the controller
},
error: function (errorData) { onError(errorData); }
});
This SORTA works right now. I get a good object in JavaScript (what I am expecting to see), however I cannot see how to get at the full HTML string of the jsReturnArgs.View property.
I am really just looking for the same string that would be returned if I were just returning the PartialView by itself.
(As I mentioned at the beginning, this is a single page app - so I can't just redirect them to another View).

So - using the following posts I got this working:
Partial Views vs. Json (or both)
Render a view as a string
They both lay it out nicely, then I changed my code to the following:
C#:
public ActionResult GetSomePartialView(SomeArgumentModel someArguments)
{
ReturnArgs r = new ReturnArgs();
bool isAllowed = CheckPermissions();
if (isAllowed)
{
r.Status = 400; //good status ... proceed normally
r.ViewString = this.RenderViewToString("_CaseManager");
}
else
{
r.Status = 300; //not good ... display permissions pop up
r.ViewString = this.RenderViewToString("_DefaultView");
}
return Json(r);
}
public class ReturnArgs
{
public ReturnArgs()
{
}
public int Status { get; set; }
public string ViewString { get; set; }
}
JS:
$.ajax({
type: "GET",
url: "/Home/GetSomePartialView/",
data: someArguments,
success: function (jsReturnArgs) {
if (jsReturnArgs.Status === 300) { //300 is an arbitrary value I just made up right now
showPopup("You do not have access to that.");
}
$("#someDiv").html(jsReturnArgs.ViewString); //the HTML I returned from the controller
},
error: function (errorData) { onError(errorData); }
});

one way to skip having to return a json with multiple parameters and your html encoded as json is to send an HTML always but you send a hidden field that has the status set in it or something like that..
success: function(data)
{
if(data.find("#ajax-status").val()==="success")
{
$("#someDiv").html(data);
}
else
{
showPopup("You do not have access to that.");
}
}
I wouldnt recommend this appraoch I would have two partial views one for the normal view and the other for the error/unauthorized case..