I'm currently attempting to retrieve a list of objects from my database using jQuery. I have been attempting to use getJSON but the callback is never fired. However, if I use
$.post(url, data, callback)
... then it seems to fire just fine.
My controller actions is thus:
public ActionResult GetTemplates()
{
IEnumerable<Template> templates = TemplateDAO.GetTemplates();
List<TemplateViewModel> jsonTemplates = new List<TemplateViewModel>();
foreach(Template t in templates)
{
TemplateViewModel tvm = new TemplateViewModel(t.ID, t.TemplateName);
jsonTemplates.Add(tvm);
}
return Json(jsonTemplates.ToList());
}
and the TemplateViewModel is:
public class TemplateViewModel
{
public int ID {get; set; }
public string TemplateName {get; set; }
}
The javascript I'm attempting to use is:
function LoadTemplates() {
alert("loading templates");
var url = '<%= Url.Action("GetTemplates", "Project") %>';
$.getJSON(url, null, function(data) {
alert("Succeeded" + data);
});
}
This javascript does not show the "Succeeded" alert for some reason, whereas replacing the getJSON call with
$.post(url, null, updateTemplates, 'json');
works.
Any ideas?
It's more of a curiosity thing now that $.post works, but I'd like to know what I'm doing wrong, as every example I've seen looks exactly like mine!
Cheers,
Chris
Try this:
return Json(jsonTemplates.ToList(), JsonRequestBehavior.AllowGet);
Related
I'm running the following AJAX call.
var submission = {};
submission.input = [];
submission.input.push({ Id: "{ab684cb0-a5a4-4158-ac07-adff49c0c30f}" });
submission.input.push({ Id: "{bb684cb0-a5a4-4158-ac07-adff49c0c30f}" });
$.ajax({
url: "http://" + "localhost:49642/Controller/Action",
data: submission
});
It works as supposed to and in my controller I can see two elements. However, the Id fields is all-zeros. I'm certain I failed to match the definition of the object on the server-side but I'm to annoyed and frustrated right now to generate more suggestions how to shove the data to the service.
The data model is like this.
public class Thingy
{
public Guid Id { get; set; }
public IEnumerable<Guid> Blobb { get; set; }
}
I've tried to use different bracket types, apostrophes and such enclosing the guids on client-side. To no avail. What can I have forgotten?!
Edit
I need to clarify the structural definition of my information object. The controller is set up to receive the following.
public ActionResult SelectionStorage(IEnumerable<Stuff> stuff)
{
Session["Stuff"] = stuff;
return null;
}
The definition of the Stuff class is more complex but the following will suffice as a POC.
public class Stuff
{
public Guid Id { get; set; }
public IEnumerable<Guid> Ids { get; set; }
public Dictionary<String, decimal> Amounts { get; set; }
}
So, on the client, I'm performing the following set up of the submitted data object.
var submission = {};
var subIds = [];
subIds.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
subIds.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
submission.input = [];
submission.input.push({
Id: "{cb684cb0-a5a4-4158-ac07-adff49c0c30f}",
Ids: subIds,
Amounts: null
});
Note that the Amounts will differ from null but that headache I haven't even got to, yet.
Edit 2
New try - a simpler approach. In JS I send the following.
var stuff = {};
stuff.input = [];
stuff.input.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
stuff.input.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
$.ajax({
url: ...,
data: stuff,
type: "POST",
success: ...,
error: ...
});
On recieving end in C# I have this.
public ActionResult MyAction(List<String> input) { ... }
This gives null. I can't see why.
You should be able to simplify the jquery. With what you have here you don't need the submission. If you are sending a complex list back to the controller you need to name your variables but since you are just sending a string back you don't need to do that. Try changing your data to
var input = [];
input.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
input.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
then in the ajax call
data: input,
or
data: Json.stringify(input);
then on your controller
public ActionResult Action(List<String> input){...
Edit:
try changing your jquery to this:
var stuff= {};
stuff.Id = "{cb684cb0-a5a4-4158-ac07-adff49c0c30f}";
stuff.Ids= [];
stuff.Ids.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
stuff.Ids.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
then in your ajax have data: stuff, or data: Json.stringify(stuff),
I'm using knockout mapping to help map a serverside object into JSON. I have an object with numerous collections in it so I don't want to have to recreate and map each piece manually in javascript. So, I'm using knockout-mapping to do this for me.
I was having issues, so I decided to try it with a simple example, so here is what I have for an ASP.NET MVC application:
C# Model:
public class Vaccinations
{
public string Vaccination { get; set; }
public System.DateTime VaccinationDate { get; set; }
}
public class Dog
{
public string Name { get; set; }
public int Age { get; set; }
public Dog()
{
this.Vaccinations = new System.Collections.Generic.List<Vaccinations>();
}
public System.Collections.Generic.List<Vacinations> Vacinations { get; set; }
}
As you can see, each Dog has a list of vaccinations they may or may not have.
In my controller, I create and return a pre-populated Dog object:
public ActionResult Load()
{
Dog rambo = new Dog
{
Name = "Rambo",
Age = 5
};
rambo.Vacinations = new System.Collections.Generic.List<Vacinations> {
new Vacinations { Vacination = "Rabies", VacinationDate = DateTime.Now.AddYears(-1) },
new Vacinations { Vacination = "Mumps", VacinationDate = DateTime.Now.AddYears(-2) }
};
return Json(rambo, JsonRequestBehavior.AllowGet);
}
In my view (Index.cshtml), I have it set up to show the dog and a list of it's vaccinations. I want to allow the user to click on an Add Vaccination button to add a new line to the collection and allow them to enter the data.
Again, I'm using knockout.mapping to do the mapping for me. In the javascript section, this is what I have:
var ViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
self.isValid = ko.computed(function () {
return self.Name().length > 3;
});
// Operations
self.save = function () {
$.ajax({
url: "Dog/Save",
type: "post",
contentType: "application/json",
data: ko.mapping.toJSON(self),
success: function (response) {
alert(response.Status);
}
});
};
self.addVaccination = function () {
self.Vaccinations.push(new self.Vaccination()); // <--- This doesn't work and I know why, so how do I do this?
}
};
$(function () {
$.getJSON("Dog/Load", null, function (data) {
ko.applyBindings(new ViewModel(data));
});
});
My question revolves around the "addVaccination" function that I've added to the ViewModel object. How do I specify a new "Vaccination" object without having to "code" one in Javascript? That was the entire reason for me using knockout mapping so I don't have to do that. But, I don't see any other way around it.
Is there a way to access the base Vaccination object from the Vaccinations observable array so I can create a new one?
And then the final question is, how to I pass this back to my controller? I'm not sure if this will work or not.
You can't directly. But what you can do is define a Vaccination instance at the server side and return it as a the default instance.
So, you need to return the old data and the default instance.
public ActionResult Load()
{
...
var data = new {
defaultVacination = new Vacination(),
rambo = rambo,
};
return Json(data , JsonRequestBehavior.AllowGet);
}
And on the client side you receive the same data and the default instance.
var ViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data.rambo, {}, self);
var defaultInstance = data.defaultVacination;
...
self.addVaccination = function () {
// clone the default instance.
self.Vaccinations.push(ko.utils.extend({}, defaultInstance));
}
I hope it helps.
I have a view (Index.cshtml) with a grid (Infragistics JQuery grid) with an imagelink. If a user clicks on this link the following jquery function will be called:
function ConfirmSettingEnddateRemarkToYesterday(remarkID) {
//Some code...
//Call to action.
$.post("Home/SetEnddateRemarkToYesterday", { remarkID: remarkID }, function (result) {
//alert('Succes: ' + remarkID);
//window.location.reload();
//$('#remarksgrid').html(result);
});
}
Commented out you can see an alert for myself and 2 attempts to refresh the view. The location.reload() works, but is basically too much work for the browser. The .html(result) posts the entire index.cshtml + Layout.cshtml double in the remarksgrid div. So that is not correct.
This is the action it calls (SetEnddateRemarkToYesterday):
public ActionResult SetEnddateRemarkToYesterday(int remarkID) {
//Some logic to persist the change to DB.
return RedirectToAction("Index");
}
This is the action it redirects to:
[HttpGet]
public ActionResult Index() {
//Some code to retrieve updated remarks.
//Remarks is pseudo for List<Of Remark>
return View(Remarks);
}
If I don't do window.location.reload after the succesfull AJAX post the view will never reload. I'm new to MVC, but i'm sure there's a better way to do this. I'm not understanding something fundamental here. Perhaps a nudge in the right direction? Thank you in advance.
As you requesting AJAX call, you should redirect using its response
Modify your controller to return JSONResult with landing url:
public ActionResult SetEnddateRemarkToYesterday(int remarkID) {
//Some logic to persist the change to DB.
var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "Controller");
return Json(new { Url = redirectUrl });
}
JS Call:
$.post("Home/SetEnddateRemarkToYesterday", { remarkID: remarkID }, function (result) {
window.location.href = result.Url
});
After Ajax post you need to call to specific Url..
like this..
window.location.href = Url
When using jQuery.post the new page is returned via the .done method
jQuery
jQuery.post("Controller/Action", { d1: "test", d2: "test" })
.done(function (data) {
jQuery('#reload').html(data);
});
HTML
<body id="reload">
For me this works. First, I created id="reload" in my form and then using the solution provided by Colin and using Ajax sent data to controller and refreshed my form.
That looks my controller:
[Authorize(Roles = "User")]
[HttpGet]
public IActionResult Action()
{
var model = _service.Get()...;
return View(model);
}
[Authorize(Roles = "User")]
[HttpPost]
public IActionResult Action(object someData)
{
var model = _service.Get()...;
return View(model);
}
View:
<form id="reload" asp-action="Action" asp-controller="Controller" method="post">
.
.
.
</form>
Javascript function and inside this function I added this block:
$.ajax({
url: "/Controller/Action",
type: 'POST',
data: {
__RequestVerificationToken: token, // if you are using identity User
someData: someData
},
success: function (data) {
console.log("Success")
console.log(data);
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html'); // parse result (type string format HTML)
console.log(htmlDoc);
var form = htmlDoc.getElementById('reload'); // get my form to refresh
console.log(form);
jQuery('#reload').html(form); // refresh form
},
error: function (error) {
console.log("error is " + error);
}
});
I've got two models, there are.
public class CreateAssignmentViewModel {
...
public List<CreateAssignmentSelectedItem> SelectedItems { get; set; }
}
public class CreateAssignmentSelectedItem {
...
}
Now I've got a view where contains CreateAssignmentViewModel, as you can see above this class contains a property where is a List<CreateAssignmentSelectedItem>
#model Contoso.MvcApplication.Models.Assignment.CreateAssignmentViewModel
#{
ViewBag.Title = "Create Assignment";
...
}
#using (Html.BeginForm()) {
...
}
Inside of the Html.BeginForm, I've got a partial view. And in it I've got a button using ajax where updates the partial view.
Look the following events. Where says data: I do not know what to enter to access only the property SelectedItems
var addQuestionToAssignmentContent = function (questionId)
{
$.ajax({
url: "/Assignment/AddItemToAssignmentContent",
type: "post",
data: { model: $(this).serialize() /* HERE I DON'T KNOW TO ACCESS THE */, itemId: questionId },
success: function (response) {
var $target = $("#assignmentContent");
var $newHtml = response;
$target.replaceWith($newHtml);
}
});
};
public ActionResult AddItemToAssignmentContent(List<CreateAssignmentSelectedItem> model, string itemId)
{
...
PartialView(..);
}
How can I do to pass only the object in the method?
First, give your form an ID:
#using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new{id = "frmUpdate"})) {
Second, change your code to be like this:
var f = $("#frmUpdate");
$.ajax({
url: f.attr('action'),
type: f.attr('method'),
data: f.serialize(),
//etc..
I use this in most cases and it works just nice. The data should automatically be bound to the model you have in your update action. So, for example... if you have a #model of type MyModel then in the update action it should look something like this:
[HttpPost]
public ActionResult Update(MyModel updatedModel)
Sometimes I work with a front end guy and he might not adhere to pass in the correct model, he might change the form fields or whatever. In this case I just let him serialize the form and pass it to the action an any way he wants.
I then use the FormCollection object to get the data I need.
Your json call
var addQuestionToAssignmentContent = function (questionId)
{
$.ajax({
url: "/Assignment/AddItemToAssignmentContent",
type: "post",
data: { model: $(this).serialize() /* HERE I DON'T KNOW TO ACCESS THE */, itemId: questionId },
success: function (response) {
var $target = $("#assignmentContent");
var $newHtml = response;
$target.replaceWith($newHtml);
}
});
};
Get a form collection object
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddItemToAssignmentContent(FormCollection collection)
{
vars someValue = collection.GetValue("somefield").AttemptedValue;
}
But if I would have control of front-end as you do then as Matt suggested you should use an pass a model;
Anyone have any examples of javascript actionresults? I am having a hard time getting the script to execute once it has been returned. Thanks
Here's an example I found on a blog post, which actually describes it as an anti-pattern, because the Controller has to have in-depth knowledge of the View in order to function.
public ActionResult DoSomething() {
string s = "$('#some-div').html('Updated!');";
return JavaScript(s);
}
The only way I have found to return a JavascriptResult and execute it on the client is with JQuery:
<script>
$(document).ready(function () {
$("button").click(function () {
$.getScript("/Home/ShowAlert");
});
});
</script>
<button>Use Ajax to get and then run a JavaScript</button>
In the controller:
public JavaScriptResult ShowAlert() {
var script = "alert('Hello');";
return new JavaScriptResult() { Script = script };
}
This might work..
public ActionResult Search(string name)
{
// var someScript = Server.HtmlEncode("<script>alert('Hello')</script>");
return Content("<script>alert('Hello')</script>" );
}