Vue.js code
methods:{
update(){
axios({
method: 'post',
url: 'http://localhost:56304/api/BrandVendor/Post',
data: {
test: "testing123",
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
debugger
console.log(error);
});
}
},
asp.net web api
public class BrandVendorController : ApiController
{
private BrandVendorRepository brandVendorRepository;
public BrandVendorController()
{
this.brandVendorRepository = new BrandVendorRepository();
}
[HttpPost]
public string Post(string test)
{
var text = test;
string textReturn = "Return from API";
return textReturn;
}
}
It gives me 404, can i know where did i do wrong?
POST http://localhost:56304/api/BrandVendor/Post 404 (Not Found)
App.vue?d27e:44 Error: Request failed with status code 404
at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15)
at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:18:12)
at XMLHttpRequest.handleLoad (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:77:7)
Its really frustrating.
Thanks
UPDATE
Somehow i am able to get it work by adding the [FromBody], but then axios seems to send empty object.
I am very new to both web api and vue js
public class BrandVendorController : ApiController
{
private BrandVendorRepository brandVendorRepository;
public BrandVendorController()
{
this.brandVendorRepository = new BrandVendorRepository();
}
[HttpPost]
public string Post([FromBody]string test)
{
var text = test;
string textReturn = "Return from API";
return textReturn;
}
}
Related
I've an async action method that return a partial view.
this action method called from a function with ajax.
my problem : when this method invoked every thing looks good except returned partial view.
I got error 500.
this is my action method Code :
[HttpPost]
public async Task<ActionResult> ChangeStateGroup(int[] lstCustomerServiceId, int newState)
{
int _counter = 0;
try
{
var _isOk = await CommonFunctions.ChangeState(_customerServiceId, _stateId, string.Empty);
if (_isOk)
{
//------do somthing
}
}
TempData[MyAlerts.SUCCESS] = string.Format("succeed Operation {0}", _counter);
}
catch (Exception ex)
{
TempData[MyAlerts.ERROR] = string.Format("Error: {0}", ex.Message);
}
return PartialView("_AlertsPartial");
}
and this is my jquery Code:
function postCustomerChangeStateGroup(lstCustomersId) {
var arrCustomersId = lstCustomersId.split(',');
$.ajax({
type: "POST",
url: "../Customer/ChangeStateGroup",
data: {
lstCustomerServiceId: arrCustomersId,
newState: $("#fk_state").val()
},
success: function (data) {
if (data.indexOf("error") !== -1) {
$("#inlineAlert_Wrapper").append(data);
}
else {
getCustomerReport();
$('#modal-container').modal('toggle');
$("#alert_Wrapper").append(data);
}
},
failure: function (errMsg) {
alert("An Error Accoured: " + errMsg);
}
});
}
Partial views cannot be asynchronous in ASP.NET pre-Core. You can have asynchronous partial views in ASP.NET Core.
So, your options are:
Update to ASP.NET Core.
Remove the asynchronous code and make it synchronous instead.
Error 500 means the error inside of the action.It maybe because ot the empty input parameters. Check them in debugger and if they are empty,
try to use application/json content type,sometimes it works better
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Customer/ChangeStateGroup",
data: JSON.stringify( {
lstCustomerServiceId: arrCustomersId,
newState: $("#fk_state").val()
}),
success: function (data) {
....
create viewModel
public class ViewModel
{
public int[] lstCustomerServiceId {get; set;}
public int newState {get; set;}
}
and fix the action
public async Task<ActionResult> ChangeStateGroup([FromBody] ViewModel model)
i write web api.
web api controller:
public class TaskApiController : ApiController
{
[HttpPost]
public IHttpActionResult PostNewTask(string xx,string yy,CommonTask Task)
{
...
}
}
and ajax:
var task = new Object();
task.Description = 'kjk';
task.ID = null;
var req = $.ajax({
url: 'http://localhost:3641/api/TaskApi',
contentType: "application/json",
data: {"xx":'admin',"yy":'123',"task": JSON.stringify(task) },
type: 'Post',
success: function (data) {
alert('success');
}
});
req.fail(function (jqXHR, textStatus) {
alert("Request failed: " + jqXHR.responseText);
});
and WebApiConfig:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
when run ajax, return error:
No action was found on the controller 'TaskApi' that matches the request
Always feed the POST methods with class type parameters. Please do the following modification on the API and JavaScript.
1. Create a model class
<pre>
public class Model
{
public string xx { get; set; }
public string yy { get; set; }
public CommonTask Task { get; set; }
}
</pre>
Then modify your Web API to accept a type of your class model
<pre>
public class TaskApiController : ApiController
{
[HttpPost]
public IHttpActionResult PostNewTask([FromBody] Model model)
{
}
}
</pre>
Change your ajax method to pass a json object similar to the Model class
<pre>
var task = new Object();
task.Description = 'kjk';
task.ID = null;
var data = {
"xx": 'admin',
"yy": '123',
"task" : JSON.stringify(task)
};
var req = $.ajax({
url: 'http://localhost:3641/api/TaskApi',
contentType: "application/json",
data: {"model": JSON.stringify(data) },
type: 'Post',
success: function (message) {
alert('success');
}
});
req.fail(function (jqXHR, textStatus) {
alert("Request failed: " + jqXHR.responseText);
});
</pre>
var form_data = {
itemid: globalSourceItem.substr(globalSourceItem.indexOf("-") + 1),
columnName: jqInputs[0].value,
displayName: jqInputs[1].value,
format: jqInputs[2].value,
KBE: jqInputs[3].value,
dgroup: jqInputs[4].value,
dupkey: jqInputs[5].value ,
measurement: jqInputs[6].value ,
times: new Date().getTime()
};
// console.log(form_data);
// console.log($("#tourl").html());
$.ajax({
url: $("#tourl").html(),
type: 'POST',
datatype: 'json',
data: form_data,
success: function(message) {
var j_obj = $.parseJSON(message);
// console.log(j_obj);return false;
if (j_obj.hasOwnProperty('success')) {
toastr.info('Item updated successfully');
setTimeout(function(){
window.location.reload();
},1000);
} else {
toastr.info('There was a problem.');
}
},
error: function(xhr, textStatus, errorThrown)
{
toastr.info('There seems to be a network problem. Please try again in some time.');
}
});
}
Hii friends , this code is working for php and i need to send the same data to the spring mvc through the ajax , can anyone please help me with the exact solution where to make changes as Iam struckup with the same doubt for like 2 weeks...
public class TestController {
#RequestMapping(value = "url", method = RequestMethod.POST)
public ModelAndView action(#RequestBody FormData formData) {
...
}
}
public class FormData {
private String itemid;
public String getItemid() {
return itemid;
}
public void setItemid(String itemid) {
this.itemid = itemid;
}
//...
}
Try sth like this. You should be able to map JSON Object to Java Object.
Maybe you could use annotation #ResponseBody and convert JSONObject to String:
#RequestMapping(value = "/ajax", method = RequestMethod.POST, produces="application/json")
#ResponseBody
public String ajax(#RequestBody ListDataDefinition listDataDefinition) {
System.out.println("id="+listDataDefinition.getItemid());
int i=SchemaDAOI.updateldd(listDataDefinition);
String message="success";
JSONObject obj = new JSONObject();
try {
obj.put("success", "success");
}
catch (JSONException e) {
e.printStackTrace();
}
if(i==1){
System.out.println("success");
}
else{
System.out.println("failure");
}
return obj.toString();
}
}
If you send String to View as ResponseBody and set produces as JSON it should be treated as pure JSON RQ.
I'm trying to setup my controllers so that they can use http error codes to send the responses to ajax calls. So for example I have my login ajax call and controller action:
[System.Web.Mvc.HttpPost, System.Web.Mvc.AllowAnonymous]
public ActionResult Login(string userName, string password, bool rememberMe, string returnUrl)
{
[...]
var loginError = new HttpResponseMessage(HttpStatusCode.Unauthorized)
{
Content = new StringContent("Lorem ipsum 2 " + ErrorMessages.LOGINERROR),
ReasonPhrase = "Lorem ipsum 2 " + ErrorMessages.LOGINERROR
};
throw new HttpResponseException(loginError);
}
$.ajax({
type: "POST",
url: url,
data: data,
dataType: "text",
success: callBack,
error: function () { console.log("Error..."); },
statusCode : {
401: function (result) {
console.log("Login failed (401): " + result);
}
}
});
I'm thinking there are a couple of things I'm not doing right, if someone can point them out that would be lovely!
Thanks!
Look at this solution: ASP.NET MVC Ajax Error handling
Darin Dimitrov write very nice solutions with action filter:
public class MyErrorHandlerAttribute : FilterAttribute, IExceptionFilter
{
public void OnException(ExceptionContext filterContext)
{
filterContext.ExceptionHandled = true;
filterContext.Result = new JsonResult
{
Data = new { success = false, error = filterContext.Exception.ToString() },
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
Then you could write your client error handling for all status codes and use it for ajax requests.
Instead of throw exception just return ActionResult that provide some content and setup response code. For your case you can create something that I call ExtendedJsonResult:
public class ExtendedJsonResult : JsonResult
{
public ExtendedJsonResult(object data)
{
base.Data = data;
}
public int StatusCode { get; set; }
public override void ExecuteResult(ControllerContext context)
{
context.HttpContext.Response.StatusCode = this.StatusCode;
base.ExecuteResult(context);
}
}
and then in controller
return new ExtendedJsonResult("Some error")
{
StatusCode = 401,
};
You can also just return existing HttpStatusCodeResult.
I want to post a form via ajax call also model will be passed into the action method, but want to get Model errors via json. How can I do this?
You could write a custom action filter:
public class HandleJsonErrors : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var modelState = (filterContext.Controller as Controller).ModelState;
if (!modelState.IsValid)
{
// if the model is not valid prepare some JSON response
// including the modelstate errors and cancel the execution
// of the action.
// TODO: This JSON could be further flattened/simplified
var errors = modelState
.Where(x => x.Value.Errors.Count > 0)
.Select(x => new
{
x.Key,
x.Value.Errors
});
filterContext.Result = new JsonResult
{
Data = new { isvalid = false, errors = errors }
};
}
}
}
and then put it into action.
Model:
public class MyViewModel
{
[StringLength(10, MinimumLength = 5)]
public string Foo { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
[HandleJsonErrors]
public ActionResult Index(MyViewModel model)
{
// if you get this far the model was valid => process it
// and return some result
return Json(new { isvalid = true, success = "ok" });
}
}
and finally the request:
$.ajax({
url: '#Url.Action("Index")',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
foo: 'abc'
}),
success: function (result) {
if (!result.isvalid) {
alert(result.errors[0].Errors[0].ErrorMessage);
} else {
alert(result.success);
}
}
});
Something like this?
$.ajax({
type: "POST",
url: $('#dialogform form').attr("action"),
data: $('#dialogform form').serialize(),
success: function (data) {
if(data.Success){
log.info("Successfully saved");
window.close();
}
else {
log.error("Save failed");
alert(data.ErrorMessage);
},
error: function(data){
alert("Error");
}
});
[HttpPost]
public JsonResult SaveServiceReport(Model model)
{
try
{
//
}
catch(Exception ex)
{
return Json(new AdminResponse { Success = false, ErrorMessage = "Failed" }, JsonRequestBehavior.AllowGet);
}