I have got this simple form:
@using (Ajax.BeginForm(\"CreateProductFromAjaxForm\",\"Product\" ,
null,
new AjaxOptions() {
JsonResult is just a kind of ActionResult derived class that indicates that this action will return JSON instead of a view or something else.
For example:
@using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , null,
new AjaxOptions() { OnSuccess = "getresult" }, null))
This will generate a element which will send an AJAX request when submitted to the action. For this to work you need to include the following script to your page:
Now all that's left is to write this onSuccess javascript function and process the JSON results returned by the server:
<script type="text/javascript">
var onSuccess = function(data) {
alert(data.result);
};
</script
Instead of:
var getresult = function (data) {
alert(data.result);
};
Try
function getresult(data) {
alert(data.result);
};
I faced the same issue with my project. Ajax library is not being loaded is the problem. When I checked my bundleconfig
and my layout file, it did have the include but I'm including the absolute name for ajax library like
bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
"~/Scripts/jquery.unobtrusive-ajax.min.js"));
My friend asked me to use the wild card instead. Surprisingly
bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include("~/Scripts/jquery.unobtrusive-ajax*"));
started including the ajax library.
Now my OnSuccess
functions are loading as expected rather than looking at the blank screen with json response on it.
you need to include jquery.unobtrusive-ajax.js
file.
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
Try specifying the HTTP method:
new AjaxOptions() {
OnSuccess = "getresult",
HttpMethod = "post"
}
Example:
@using (Ajax.BeginForm("CreateProductFromAjaxForm", "Product" , null, new AjaxOptions() { OnSuccess = "getresult", HttpMethod = "post" }, null))
{
....
}
in page
new AjaxOptions() {
OnSuccess = "getresult",
}
in javascript
function getresult(data){
alert(data.x);
}
in c#
[HttpPost]
public ActionResult CreateProductFromAjaxForm(CreateProductModel model)
{
if (!ModelState.IsValid)
{
return Json("error", JsonRequestBehavior.AllowGet);
}
//add to database
return Json(model, JsonRequestBehavior.AllowGet);
}