How can I return a JSON result to a Ajax.BeginForm

后端 未结 6 1148
独厮守ぢ
独厮守ぢ 2021-02-02 08:49

I have got this simple form:

@using (Ajax.BeginForm(\"CreateProductFromAjaxForm\",\"Product\" , 
                  null, 
                  new AjaxOptions() {           


        
相关标签:
6条回答
  • 2021-02-02 09:08

    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
    
    0 讨论(0)
  • 2021-02-02 09:12

    Instead of:

    var getresult = function (data) {
        alert(data.result);
    };
    

    Try

    function getresult(data) {
        alert(data.result);
    };
    
    0 讨论(0)
  • 2021-02-02 09:14

    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.

    0 讨论(0)
  • 2021-02-02 09:16

    you need to include jquery.unobtrusive-ajax.js file.

    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    
    0 讨论(0)
  • 2021-02-02 09:32

    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))
    {
        ....
    }
    
    0 讨论(0)
  • 2021-02-02 09:33

    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);
    } 
    
    0 讨论(0)
提交回复
热议问题