How to fix this ajax request to stop failing in MVC5 - ajax

I'm the similar ajax requests to get other database info working. Perhaps its something minor that is causing the issue. Each time I execute this function it fails and throws the alert.
It is returning the 13 user records stored in my database, during debugging I can see that these 13 records are all correct.
My dissertation is due on Friday, so any help with this would be much appreciated.
function FetchUsers() {
userinfo = [];
$.ajax({
type: "GET", url: "/home/GetUsers",
success: function (data) {
$.each(data, function (i, v) {
userinfo.push({
usersId: v.UserID,
username: v.Username,
});
})
},
error: function (error) {
alert('failed - error 01.000x unable to load users');
}
})
}
public JsonResult GetUsers()
{
using (MyDatabaseEntities1 dc = new MyDatabaseEntities1())
{
var users = dc.Users.ToList();
return new JsonResult { Data = users, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}

Related

Is there a way to show "Loading data.." option in Rally Grid(ext JS) while making the Ajax request to load the data?

I am trying to set the message to "Data Loading.." whenever the data is loading in the grid. It is working fine if I don't make an Ajax call. But, when I try to make Ajax Request, It is not showing up the message "Loading data..", when it is taking time to load the data. Can someone please try to help me with this.. Thanks in Advance.
_loadData: function(x){
var that = this;
if(this.project!=undefined) {
this.setLoading("Loading data..");
this.projectObjectID = this.project.value.split("/project/");
var that = this;
this._ajaxCall().then( function(content) {
console.log("assigned then:",content,this.pendingProjects, content.data);
that._createGrid(content);
})
}
},
_ajaxCall: function(){
var deferred = Ext.create('Deft.Deferred');
console.log("the project object ID is:",this.projectObjectID[1]);
var that = this;
console.log("User Reference:",that.userref,this.curLen);
var userObjID = that.userref.split("/user/");
Ext.Ajax.request({
url: 'https://rally1.rallydev.com/slm/webservice/v2.0/project/'+this.projectObjectID[1]+'/projectusers?fetch=true&start=1&pagesize=2000',
method: 'GET',
async: false,
headers:
{
'Content-Type': 'application/json'
},
success: function (response) {
console.log("entered the response:",response);
var jsonData = Ext.decode(response.responseText);
console.log("jsonData:",jsonData);
var blankdata = '';
var resultMessage = jsonData.QueryResult.Results;
console.log("entered the response:",resultMessage.length);
this.CurrentLength = resultMessage.length;
this.testCaseStore = Ext.create('Rally.data.custom.Store', {
data:resultMessage
});
this.pendingProjects = resultMessage.length
console.log("this testcase store:",resultMessage);
_.each(resultMessage, function (data) {
var objID = data.ObjectID;
var column1 = data.Permission;
console.log("this result message:",column1);
if(userObjID[1]==objID) {
console.log("obj id 1 is:",objID);
console.log("User Reference 2:",userObjID[1]);
if (data.Permission != 'Editor') {
deferred.resolve(this.testCaseStore);
}else{
this.testCaseStore = Ext.create('Rally.data.custom.Store', {
data:blankdata
});
deferred.resolve(this.testCaseStore);
}
}
},this)
},
failure: function (response) {
deferred.reject(response.status);
Ext.Msg.alert('Status', 'Request Failed.');
}
});
return deferred;
},
The main issue comes from your Ajax request which is using
async:false
This is blocking the javascript (unique) thread.
Consider removing it if possible. Note that there is no guarantee XMLHttpRequest synchronous requests will be supported in the future.
You'll also have to add in your success and failure callbacks:
that.setLoading(false);

Submit Multipart/form-data form to ASP Web Api using ajax

I know this question has been asked alot and i tried every single solution, but it just won't work for me.
I have a ASP WEB API which looks like this:
private string uploadFolder = ("~/uploads");
[HttpPost]
public async Task<HttpResponseMessage> PostFile()
{
var provider = new MultipartFormDataStreamProvider(uploadFolder);
try
{
StringBuilder sb = new StringBuilder();
await Request.Content.ReadAsMultipartAsync(provider);
foreach (var key in provider.FormData.AllKeys)
{
foreach (var a in provider.FormData.GetValues(key))
{
sb.Append(a.ToString());
}
}
return Request.CreateResponse(HttpStatusCode.OK);
}
catch (Exception e)
{
return null;
}
}
As you can see, it is a pretty simple one that is able too accept multipart/form-data.
The Ajax code i am using is the following:
$("#form1").submit(function (e) {
var formData = $(this).serializeArray();
var submitUrl = "api/upload";
$.ajax({
url: submitUrl,
type: "POST",
data: formData,
success: function() {
//window.location("Upload.html");
alert("Success");
},
error: function() {
alert("Error");
}
});
e.preventDefault();
});
$(this).submit();
The form i am sending only contains a textfield and a submit button. When i click the submit button, i get an error: 405 Method not allowed.
When i insert the script into chrome and run it from there it gets to the API, but on
await Request.Content.ReadAsMultipartAsync(provider)
it throws an exception in my catch.
Any idea what could cause this?

MVC OutputCache JsonResult returns html

I have the following controller:
[HttpPost]
[OutputCache(Duration=3600, VaryByParam="*", Location=OutputCacheLocation.Server)]
public JsonResult FreeTextQuery(SearchFiltersQuery filters)
{
Trace.TraceInformation("Entering method SearchController.FreeTextQuery");
SearchResults aResults = new SearchResults();
if (ModelState.IsValid)
{
try
{
ClaimsPrincipal user = User as ClaimsPrincipal;
aResults = _objectRepository.GetFullTextResults(filters, user);
}
catch (Exception ex)
{
if (!(#Url == null))
{
return Json(new { redirectUrl = #Url.Action("ShowError", "Error", new { message = ex.Message }), isRedirect = true });
}
}
}
Trace.TraceInformation("Exiting method SearchController.FreeTextQuery");
return Json(aResults);
}
which is called by the following ajax function
function GetResults(aFilters) {
var aEndPointUrl = "/Search/FreeTextQuery";
var jSonString = JSON.stringify(aFilters);
$.ajax({
type: 'POST',
url: aEndPointUrl,
traditional: true,
contentType: 'application/json; charset=utf-8',
data: jSonString,
success: function (data) {
// omitted for brevity
},
error: function (xhr, ajaxOptions, error) {
window.location.href = "/Error/ShowError?message=" + encodeURIComponent("Onbekende fout bij het zoeken.");
}
});
This code works fine without the OutputCache attribute on the controller. With it it always hits the error function of the ajax call and I see that the response is not JSON but HTML content (error is a parser error therefore).
What could be going wrong with the outputcaching and how do I get it working correctly? I've tried many ways of supplying VaryByParams but they all have the same result.
This post revealed the answer. The problem was outputting the trace to the page: page outputcache not working with trace

BreezeJs - How to make simultaneous AJAX calls?

I wrote two Ajax calls that request data from stored procedures (in SQL Server), sp_ahtreatmentselect and sp_inventoryselect. Here is how the functions look like in the Breeze controller.
[HttpPost]
[ActionName("getinventories")]
public object GetInventories(HttpRequestMessage request)
{
var data = request.Content.ReadAsFormDataAsync().Result;
var opId = data["operationid"];
string query = "sp_inventoryselect #operationId";
SqlParameter operationId = new SqlParameter("#operationId", opId);
return UnitOfWork.Context().ExecuteStoreQuery<GetInventories>(query, operationId);
}
[HttpPost]
[ActionName("gettreatments")]
public object GetTreatments(HttpRequestMessage request)
{
var data = request.Content.ReadAsFormDataAsync().Result;
var opId = data["operationid"];
string query = "sp_ahtreatmentselect #operationId";
SqlParameter operationId = new SqlParameter("#operationId", opId);
return UnitOfWork.Context().ExecuteStoreQuery<GetTreatments>(query, operationId);
}
Now, on client-side, the Ajax calls look like this:
var ajaxImpl = breeze.config.getAdapterInstance('ajax');
function treatments(id) {
return ajaxImpl.ajax({
type: 'POST',
url: serviceName + '/gettreatments',
data: { operationid: id },
success: function(data) {
console.log('Success!');
},
error: function(error) {
console.log('Error!');
}
});
}
function inventories(id) {
return ajaxImpl.ajax({
type: 'POST',
url: serviceName + '/getinventories',
data: { operationid: id },
success: function (data) {
console.log('Success!');
},
error: function(error) {
console.log('Error!');
}
});
}
return inventories(id).then(treatments(id))
.then(function() {
// Do something
})
.fail(function(error) {
// Display error
});
Both Ajax calls work fine, BUT problem is, // Do something is run BEFORE inventories(id) and treatments(id) are run. I would like it to work the other way around instead. I also tried $.when(inventories(id), treatments(id)).then(...) and $.when(ajaxImpl.ajax(...), ajaxImpl.ajax(...)).then(...), but same problem occurs. How do I solve this?
Thanks in advance.
I realized that the issue lay on synchronous calls, not Breeze. I used queue.js to make Ajax calls and // Do something and the calls are completed. Here is how.
var ajaxImpl = breeze.config.getAdapterInstance('ajax'),
serviceName = 'some/service',
id = 1; // Could be any number
return queue()
.defer(function(callback) {
ajaxImpl.ajax({
type: 'POST',
url: serviceName + '/getinventories',
data: { operationid: id },
success: function (data) {
console.log('Success!');
callback(null, data);
});
})
.defer(function(callback) {
ajaxImpl.ajax({
type: 'POST',
url: serviceName + '/gettreatments',
data: { operationid: id },
success: function (data) {
console.log('Success!');
callback(null, data);
});
})
.awaitAll(function(error, results) {
if (error) {
console.log('Error! ' + error);
} else {
// Do something, given that:
// results[0] are inventories, and
// results[1] are treatments
}
});
I don't know what this has to do with Breeze. Did you get your ajaxImpl from a Breeze ajax adapter? I've looked at both ajax adapters shipped with Breeze and neither of them returns anything from a call to the ajax method!
Accordingly, you're expression should have died immediately with a reference error when it got to the .then in return inventories(id).then(.... I don't see how it could have gotten to \\ do something at all.
Something isn't right with the way you've posed this question.
Once you get beyond this I still don't see how this involves Breeze. Breeze won't do anything with the results of your service requests.
I'm completely flummoxed by your question.

mvc3 ajax submission on the controller side. How?

I don't understand once button clicked
How to handle ajax call on the server side so that my DataAnnotation work
and I get success or error message.
<script src="../../../../Content/Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript"></script
<script type="text/javascript">
$(function ()
{
$("#createButton").click(function ()
{
var profile = {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Email: $("#Email").val()
};
$.ajax({
url: "/Profile/Create",
type: "Post",
data: JSON.stringyfy(profile),
dataType: "json",
contentType: "Application/json; charset=utf-8",
success: function () {
$("#message").html("Profile Saved.");
},
error: function () {
$("#message").html("Error occured");
}
});
return false;
});
});
</script>
//Server side
public ActionResult Create(string confirmButton, CreateViewModel userVm)
{
if (confirmButton != "Create Profile") return RedirectToAction("Index");
if (!ModelState.IsValid)
return View("Create", userVm);
User user = new User();
Mapper.Map(userVm, user);
_repository.Create(user);
return RedirectToAction("Details", new { id = user.UserId });
}
If I remember correctly (it's been a while since I played with jquery), the success and error are indicative of the return value of the actual HTTP request itself. For example, if you hit a 404, you'd get an error message.
Regardless of whether or not a profile was created successfully through your page logic, if the request itself was processed, then the success message will be hit - you need to interpret the return value yourself at that point.
Try returning a JsorResult in place of redirecting to a view, then client side, parse the JsonResult and act accordingly.
[HttpPost]
public JsonResult DeleteDoc(int Id, int DocCode, SomeObject Model)
{
try
{
// Check annotations stuffs
if (!Model.IsValid) {
var jsonDataM = new { ExitCode= -100, message = "Invalid Model" };
return Json(jsonDataM, JsonRequestBehavior.DenyGet);
}
// My logic in here
var jsonData = new { ExitCode= 0, message = "Everything's ok" };
return Json(jsonData, JsonRequestBehavior.DenyGet);
}
catch (Exception e)
{
var jsonData2 = new { ExitCode= -1, message = "Everything's Ko" + e.Message };
return Json(jsonDat2a, JsonRequestBehavior.DenyGet);
}
}
in the OnSuccess callback you can refer to this with:
<script type="text/javascript">
function MyAjaxCallBack(context) {
var code = context.ExitCode;
if (code != 0) {
alert (context.message);
}
}
</script>
Please note that this code is simplified. When managing the IsValid on Model, I usually iterate del ModelState in order to build up a message.

Resources