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.
Related
I'm working with Razor pages and can't get my dto object in javascript map to a class in the model using the jquery .load function.
So, a user clicks on a button in the UI and the following javascript runs:
$('#btnGoToResults').click(function (e) {
var dto = {
ID: 1,
CODE: 5
};
$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', dto); // Gives error 400
}
I've tried the following as well without getting it to work:
$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', JSON.stringify(dto)); // "works" since the code behind is hit but the dto values are 0
Also tried rewriting with ajax:
// Gives error 400
$.ajax({
url: '/PerformanceSearch?handler=ResultsPartial',
data: JSON.stringify(dto),
dataType: 'json',
contentType: 'application/json',
type: 'POST',
success: function (data) {
$('#divPerformanceResults').html(data);
}
});
This is the model I'm trying to map it to:
public class RequestResultModel
{
public int ID { get; set; }
public int CODE { get; set; }
}
It is the in-parameter for the method creating and returning the partial view which will contain all logic for filtering:
public PartialViewResult OnGetResultsPartial(RequestResultModel dto)
{
Results = new List<PerformanceResultModel>()
{
...
};
return new PartialViewResult
{
ViewName = "_PerformanceResults",
ViewData = new ViewDataDictionary<List<PerformanceResultModel>>(ViewData, Results)
};
}
The method works and the partial is rendered so all of that is good. It's just the dto I need to get working so I can filter the result list. I did get the following to work by switching the method parameter to an int but it's only one parameter, I'm going to need several inputs later.
$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', 'ID=15'); // This works. Only one param though
Attached the chrome log as well if that gives anything:
It feels like I'm just missing something easy here but I can't find any answers online.
Thanks!
Ok. After some more testing and research I ended up at:
https://www.learnrazorpages.com/security/request-verification
Where I found out that there are tokens added to razor pages preventing posts without it.
SO you can either ignore the token validation on global level or by class level, example:
[IgnoreAntiforgeryToken(Order = 1001)]
public class IndexModel : PageModel
{
public void OnPost()
{
}
}
Or you can do as I did in the following:
First of all, rename the method to OnPost instead of OnGet:
public PartialViewResult OnPostResultsPartial(RequestResultModel dto)
Then in the javascript call include the token like the following:
$('#btnGoToResults').click(function (e) {
var dto = {
ID: 1,
CODE: 5
};
$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial',
{ dto: dto, __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() });
}
And that is it! It now maps the javascript object correctly with the class in the pagemodel :) Hope this will help others out there!
your first version of .load() was good, jquery load() method will do http post if it detects dto param as object:
$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', dto);
and then you can add [HttpPost] attribute to your Action to accept post methods
[HttpPost]
public PartialViewResult OnGetResultsPartial(WebApplication1.Models.RequestResultModel dto)
{
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!
I am trying to create controller actions which will return either JSON or partial html depending upon a parameter. What is the best way to get the result returned to an MVC page asynchronously?
In your action method, return Json(object) to return JSON to your page.
public ActionResult SomeActionMethod() {
return Json(new {foo="bar", baz="Blech"});
}
Then just call the action method using Ajax. You could use one of the helper methods from the ViewPage such as
<%= Ajax.ActionLink("SomeActionMethod", new AjaxOptions {OnSuccess="somemethod"}) %>
SomeMethod would be a javascript method that then evaluates the Json object returned.
If you want to return a plain string, you can just use the ContentResult:
public ActionResult SomeActionMethod() {
return Content("hello world!");
}
ContentResult by default returns a text/plain as its contentType.
This is overloadable so you can also do:
return Content("<xml>This is poorly formatted xml.</xml>", "text/xml");
I think you should consider the AcceptTypes of the request. I am using it in my current project to return the correct content type as follows.
Your action on the controller can test it as on the request object
if (Request.AcceptTypes.Contains("text/html")) {
return View();
}
else if (Request.AcceptTypes.Contains("application/json"))
{
return Json( new { id=1, value="new" } );
}
else if (Request.AcceptTypes.Contains("application/xml") ||
Request.AcceptTypes.Contains("text/xml"))
{
//
}
You can then implement the aspx of the view to cater for the partial xhtml response case.
Then in jQuery you can fetch it passing the type parameter as json:
$.get(url, null, function(data, textStatus) {
console.log('got %o with status %s', data, textStatus);
}, "json"); // or xml, html, script, json, jsonp or text
Another nice way to deal with JSON data is using the JQuery getJSON function. You can call the
public ActionResult SomeActionMethod(int id)
{
return Json(new {foo="bar", baz="Blech"});
}
Method from the jquery getJSON method by simply...
$.getJSON("../SomeActionMethod", { id: someId },
function(data) {
alert(data.foo);
alert(data.baz);
}
);
I found a couple of issues implementing MVC ajax GET calls with JQuery that caused me headaches so sharing solutions here.
Make sure to include the data type "json" in the ajax call. This will automatically parse the returned JSON object for you (given the server returns valid json).
Include the JsonRequestBehavior.AllowGet; without this MVC was returning a HTTP 500 error (with dataType: json specified on the client).
Add cache: false to the $.ajax call, otherwise you will ultimately get HTTP 304 responses (instead of HTTP 200 responses) and the server will not process your request.
Finally, the json is case sensitive, so the casing of the elements needs to match on the server side and client side.
Sample JQuery:
$.ajax({
type: 'get',
dataType: 'json',
cache: false,
url: '/MyController/MyMethod',
data: { keyid: 1, newval: 10 },
success: function (response, textStatus, jqXHR) {
alert(parseInt(response.oldval) + ' changed to ' + newval);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error - ' + errorThrown);
}
});
Sample MVC code:
[HttpGet]
public ActionResult MyMethod(int keyid, int newval)
{
var oldval = 0;
using (var db = new MyContext())
{
var dbRecord = db.MyTable.Where(t => t.keyid == keyid).FirstOrDefault();
if (dbRecord != null)
{
oldval = dbRecord.TheValue;
dbRecord.TheValue = newval;
db.SaveChanges();
}
}
return Json(new { success = true, oldval = oldval},
JsonRequestBehavior.AllowGet);
}
To answer the other half of the question, you can call:
return PartialView("viewname");
when you want to return partial HTML. You'll just have to find some way to decide whether the request wants JSON or HTML, perhaps based on a URL part/parameter.
Alternative solution with incoding framework
Action return json
Controller
[HttpGet]
public ActionResult SomeActionMethod()
{
return IncJson(new SomeVm(){Id = 1,Name ="Inc"});
}
Razor page
#using (var template = Html.Incoding().ScriptTemplate<SomeVm>("tmplId"))
{
using (var each = template.ForEach())
{
<span> Id: #each.For(r=>r.Id) Name: #each.For(r=>r.Name)</span>
}
}
#(Html.When(JqueryBind.InitIncoding)
.Do()
.AjaxGet(Url.Action("SomeActionMethod","SomeContoller"))
.OnSuccess(dsl => dsl.Self().Core()
.Insert
.WithTemplate(Selector.Jquery.Id("tmplId"))
.Html())
.AsHtmlAttributes()
.ToDiv())
Action return html
Controller
[HttpGet]
public ActionResult SomeActionMethod()
{
return IncView();
}
Razor page
#(Html.When(JqueryBind.InitIncoding)
.Do()
.AjaxGet(Url.Action("SomeActionMethod","SomeContoller"))
.OnSuccess(dsl => dsl.Self().Core().Insert.Html())
.AsHtmlAttributes()
.ToDiv())
You may want to take a look at this very helpful article which covers this very nicely!
Just thought it might help people searching for a good solution to this problem.
http://weblogs.asp.net/rashid/archive/2009/04/15/adaptive-rendering-in-asp-net-mvc.aspx
PartialViewResult and JSONReuslt inherit from the base class ActionResult. so if return type is decided dynamically declare method output as ActionResult.
public ActionResult DynamicReturnType(string parameter)
{
if (parameter == "JSON")
return Json("<JSON>", JsonRequestBehavior.AllowGet);
else if (parameter == "PartialView")
return PartialView("<ViewName>");
else
return null;
}
For folks who have upgraded to MVC 3 here is a neat way
Using MVC3 and Json
public ActionResult GetExcelColumn()
{
List<string> lstAppendColumn = new List<string>();
lstAppendColumn.Add("First");
lstAppendColumn.Add("Second");
lstAppendColumn.Add("Third");
return Json(new { lstAppendColumn = lstAppendColumn, Status = "Success" }, JsonRequestBehavior.AllowGet);
}
}
Flexible approach to produce different outputs based on the request
public class AuctionsController : Controller
{
public ActionResult Auction(long id)
{
var db = new DataContext();
var auction = db.Auctions.Find(id);
// Respond to AJAX requests
if (Request.IsAjaxRequest())
return PartialView("Auction", auction);
// Respond to JSON requests
if (Request.IsJsonRequest())
return Json(auction);
// Default to a "normal" view with layout
return View("Auction", auction);
}
}
The Request.IsAjaxRequest() method is quite simple: it merely checks the HTTP headers for the incoming request to see if the value of the X-Requested-With header is XMLHttpRequest, which is automatically appended by most browsers and AJAX frameworks.
Custom extension method to check whether the request is for json or not so that we can call it from anywhere, just like the Request.IsAjaxRequest() extension method:
using System;
using System.Web;
public static class JsonRequestExtensions
{
public static bool IsJsonRequest(this HttpRequestBase request)
{
return string.Equals(request["format"], "json");
}
}
Source : https://www.safaribooksonline.com/library/view/programming-aspnet-mvc/9781449321932/ch06.html#_javascript_rendering
I have a web application in MVC3 and i'm using Telerik Grid Batch Editing.
Batch Editing have save changes button which returns UPDATED COLUMNS to controller IEnumerable list like
[GridAction]
public ActionResult Update(IEnumerable<Customers> updated)
{
///user codes
}
but how to collect updated rows and make array send like IEnumerable list from Javascript with ajax to Controller ?
EDIT
I'm putting my view png
I just want to send updated rows data to Controller and Save Changes button can do this but before thje send values i just want to ask to user "Are you sure to Load?" and after the send data I want to refresh all the page
So i thinked to do this with ajax request because i'm also using batch editing with ajax requests
Do you have any exprience for this situation?
Use the AJAX POST as I have used in my Tested Javascript function as::
function TestAjax() {
var Test = [];
for (var i = 0; i < 5; i++) {
Test.push({ ID: i, Name: "RJ" });
}
$.ajax({
type: 'POST',
url: rootUrl('Home/TestPost'),
contentType: "application/json",
//data: { Test: JSON.stringify( data) },
data:JSON.stringify( {Test: Test}),
success: function (data) {
alert("Succeded");
}
});
}
And on Server Side(i.e. In Controller) use something Like::
public ActionResult TestPost(IEnumerable<TestViewModel> Test)
{
return Json(3);
}
The ViewModel Contains different propeties which are of different datatypes as::
public class TestViewModel
{
public long ID { get; set; }
public string Name { get; set; }
}
This is working fine. May be this will help you.
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..