It makes me in trouble when I write jQuery Ajax calls for each task in my whole application. I write jQuery Ajax calls to update the interface after a specific event, such as updating a dropdown list when another dropdown list selection changes.
I need the fastest way to handle Ajax requests across my application and to avoid code repetition.
// code sample to ajax request which I used
function onChange(bookid) {
$.ajax({
type: "GET",
url: '#Url.Action("books","subject")',
data : { bookid: bookid},
dataType: "json",
success: function (result) {
alert('success');
//do whatever you want
},
error: function(result){
}
});
};
If you are looking for an approach that would simplify these kind of ajax call to update interface after specific events, using asp.net mvc 4, I would suggest that you look into the awesome awesome set of helpers.
Be assured that it's a very easy to learn set of helpers.
I encourage to go to the Live demo and play with it for a while. You will rapidly realize its great potential.
Then an example with master - slave dropdown list (first element on the default demo page).
Here is the code that goes into the view:
Cascading using binding to Parent:<br />
<%:Html.Awe().AjaxDropdown("Category")
.Url(Url.Action("GetCategories","Home")) %>
<%:Html.Awe().AjaxDropdown("ChildMeal")
.Url(Url.Action("GetMeals","Home"))
.Parent("Category") %>
The first dropdown is an ÀjaxDropDownnamedCategory. It is filled by executing an action method calledGetCategoriesfound on a controller calledHomeController` (in this example these are meals categories).
Note that Awesome uses some conventions in certains cases. For example if we had limited the first AjaxDropDown declaration to <%:Html.Awe().AjaxDropdown("Category")%>then the Awesome will assume that we would fill the dropdown from an action method called GetItems and it would expect to find it on a controller called CategoryAjaxDropDownController. But since we have specified the url with the corresponding action, it would look for the specified action method on a controller called SPECIFIED_NAME+Controller (in this example HomeController)
The second's name is ChildMeal, it's parent is the Category ajax drop down and it is filled when the selected element is changed in the Category drop down, and when that happens it is filled by executing the GetMeals action method from the HomeController controller.
Here is the code for the action methods in the HomeController
public ActionResult GetCategories(int? v)
{
var items = Db.Categories
.Select(o => new SelectableItem(o.Id, o.Name, v == o.Id));// value, text, selected
return Json(items);
}
public ActionResult GetMeals(int? v, int? parent)
{
var items = Db.Meals.Where(o => o.Category.Id == parent)
.Select(o => new SelectableItem(o.Id, o.Name, v == o.Id));// key, text, selected
return Json(items);
}
As you can see from the return object the JSON handling complexity is managed by Awesome and it all becomes transparent to the developer (you just have to invoke Json(items) to have it done.
The Db object provides the datas. You may use a class that inherits from System.Data.Entity.DbContextin order to load datas from a database.
You have many other similar components (such as the AjaxRadioList, the AjaxCheckBoxList, the AjaxList, the AutoComplete component, ...) among many very interesting rich components.
I suggest that you go to the live demo, play with it, see the various examples and the source codes, then you try to create your first awesome project.
well jQUery's ajax call's about as fast as your going to get - there is not a lot of overhead on the client side at all .
as far as extra code .. for each call:
function onChange(bookid) {
$.ajax({
type: "GET", // not needed - default GET
url: '#Url.Action("books","subject")',
data : { bookid: bookid},
dataType: "json", // not needed - jQuery will guess
success: function (result) {
alert('success');
//do whatever you want
},
error: function(result){ // not needed if you're leaving empty
}
});
};
could be
$.get('#Url.Action("books" , "subject")' , { bookid: bookid}, function(result){
alert(result);
});
Related
I'm trying to make an AJAX request on a Razor Page, calling a method contained in separate class file (NOT in the pagemodel for the page - as I eventually want to make the same request from multiple different pages).
Unfortunately, the request fails. I think it may have to do with the syntax I've used, or perhaps the class I'm trying to call being of the wrong type. Note that the request DOES work if I change the url to a method in the pagemodel (no other changes required).
I'm fairly new to ASP.NET Core Razor Pages, and AJAX requests, so if there's a fundamental misunderstanding here, let me know.
AJAX Request Code (jQuery):
$(document).ready(function () {
$.ajax({
dataType: 'json',
url: '/Tools/Redirect?handler=AccessRedirect',
type: 'GET',
success: function (data) {
alert("Request Success, Data = " + data);
},
error: function () {
alert("Request Failed");
}
});
})
(I've also tried url: /Tools/Redirect/AccessRedirect using a method simply called AccessRedirect, with the [HttpGet] attribute, but that didn't work either)
C# Class Code (File is Redirect.cs in folder Tools):
public class Redirect
{
public JsonResult OnGetAccessRedirect()
{
return new JsonResult("test");
}
}
Any help is greatly appreciated. Thanks.
Your fundamental misunderstanding is that Razor Pages requests must target a handler method in a PageModel class. You can't map URLs to arbitrary methods in class files. Handler methods must be in a class that derives from PageModel, and they must follow certain conventions.
You can read more about handler methods in Razor Pages here: https://www.learnrazorpages.com/razor-pages/handler-methods
If you have code that you want to centralise, you can put that in a C# class, and then call the method in your handler method
I've just started using ASP.NET MVC 4.0 to build a web application. I've been through the tutorials that explain and demonstrate View/Controller/Models, but now I'm wanting to go a step further.
Instead of having all of my pages constantly reload as users interact with my application, i'd like to learn how to make async calls to the server side to load data.
A great example of what I would like to learn how to implement is:
http://demo.aspnetawesome.com/AjaxDropdownDemo/Index
The Drop Downs are bound to each other, and the page never refreshes. Does anyone have some suggestions on where I can go to learn how to begin learning this? Also, since I am using MVC how can I use Model Binding to help make it more simple?
To Make and async calls to your action you can make ajax call as follows
Jquery Code:
var AsyncCall = function () {
$.ajax({
type: "POST",
url: "Home/Index",
data: JSON.stringify(yourData),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
// Success implementation
},
error: function () {
}
});
};
In Controller :
[HttpPost]
public ActionResult Index(DataType model)
{
// Implementation
return View(model);
}
I have a code like below
View:
$("form").live('submit', function () {
var formData = $(this).toObject();
$.ajax({
url: "../Home/Index",
type: "POST",
dataType: "json",
data: formData,
success: function (data) {<<Some handling>>
}
Controller:
public JsonResult Index(Task task)
{
//operations on the task object like getting data from task and setting to it.
}
Task is a model here.
Here when the form is submitted, the form object is directly sent to the controller and the controller is receiving it as a model.
How this conversion takes place? I have added a file component to the form now
<input type="file" name = "file" id="file"/>
and added the file attribute to model Task.
public HttpPostedFileBase file{ get; set; }
But I am getting null for the file in the controller. But all other values are coming well.
Please help me out. Please let me know if you need any additional info to understand my question correctly.
Normally it's the model binder that is responsible for converting the request values into a model.
But in your case you seem to be attempting to send a file using AJAX. This is not supported. The reason for that is because jQuery's ajax method doesn't support that. You could use HTML5 File API if the client browser supports it because the XHR2 object allows you to asynchronously upload files to the server. Here's an example:
$(document).on('submit', 'form', function () {
var xhr = new XMLHttpRequest();
xhr.open(this.method, this.action);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText); // handle response.
}
};
xhr.send(new FormData(this));
return false;
}
Also notice that I have used the .on() method to subscribe to the submit event instead of .live() which is obsolete and has been removed in jQuery 1.9.
If on the other hand you need to support legacy browsers you could use a plugin such as Fine Uploader or jQuery form to achieve this task. What those plugins do is detect the capabilities of your browser and if it supports XHR2 it will use it, and if it doesn't it will use a different technique (such as hidden iframes, flash, ...).
You can not file upload using jquery ajax post directly. You should you some plug-in for this.
May be you can use this plug-in
This question will show you a start point for using this plug in.
Also, I learned it from #DarinDimitov suggestions, too :)
I have a method called getPersonInfo and it's header looks like this:
[WebMethod]
public static Hashtable getPersonInfo(int personID)
{
}
The problem I am having is that this method cannot access my asp.net controls. So of course I remove the "static" keyword. But then my ajax calls fail since it's not a static method any more. Any suggestions?
EDIT: After reading and searching for a bit, I've realized that it won't work. What I am asking is if there is another way of maybe getting the final result, as for now I'm unsure of how to do that.
This is fundamentally impossible.
AJAX methods do not run the page lifecycle, so the controls don't actually exist on the server.
Instead, you need to manipulate the page on the client.
You need to pass the values of controls to the getPersonInfo method from client side. For ex: if its JQuery ajax call, additional parameters can be passed using "data" property. Ofcourse, again the getPersonInfo method signature needs to be modified accordingly.
$.ajax({
url: 'adduser.aspx/getPersonInfo',
data: { personID: $('txtPersonId').val() }, //pass additional parameters here
type: "POST",
success: function (template) {
alert('success'); },
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
});
I've got some jquery that'll run ajax that runs a controller action that returns a partial view. In some cases i want to display one of several error messages (controlled by the controller), rather than replacing a DOM element with the result.
How do I achieve this?
Currently I have this:
$.ajax({
type: "POST",
cache: false,
url: '<%= Url.Action("AddPostcodeToTerritory", "Territories") %>'
}).done(function(data) {
$("#SelectedTerritoryPostcodeRows").html(data);
});
I have the element SelectedTerritoryPostcodeRows which normally gets the information, but I also want the controller to be able to give some error message which I want to display somewhere else.
Your not returning any errors, so you need some identifier in your response so your script knows what to do. Perhaps another element called errMsg, and a new if..then to handle it in this script will sort it.
if (data.errMSG) {
..show error somewhere
}
else {
$("#SelectedTerritoryPostcodeRows").html(data);
}