Return JSON using AJAX in ASP.NET CORE form

Question

I am having trouble returning JSON from a controller in response to an AJAX form post. The form posts, but after the response, it just replaces the current view's markup with the JSON string written to the page: "{"test":"test1","test2":"test2","test3":"test3"}"

I am using .NET Core 3.1, and I have jQuery JavaScript Library v3.3.1 and jquery.validate.unobtrusive v3.2.11 installed and referenced in my layout page.

I am transitioning to Asp.Net Core MVC from Asp.Net MVC 5. In the past I would use Ajax.Beginform like this, and I thought I would be able to do something similar in Core MVC. I have scoured a few different tutorials on this topic, but I am not sure where I am going wrong. I did add the, "AddMvc()" references in the Startup.cs but results in the same thing happening.

What I am trying to accomplish: I have a Modal window that pops up to upload a file. I am looking for feedback that it uploaded properly to alert the user. So I figure I would respond with JSON using Ajax to do so.

Form:

<form asp-controller="Home" asp-action="Upload" data-ajax="true" data-ajax-begin="onBegin" 
                            data-ajax-complete="onComplete" data-ajax-failure="onFailure">

Functions (Basic setup for testing):

function onFailure(result) {
    alert("onFailure ");
};

function onComplete(result) {
    alert("onComplete " + result.test + " " + result.test2 + " " + result.test3);
};

function onSuccess(result) {
    alert("onSuccess " + result.test + " " + result.test2 + " " + result.test3);
};

function onBegin(result) {
    alert("onBegin ");

};

Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Upload(UploadViewModel model)
{
    //File handling logic..

    return Json(new
    {
        test = "test1",
        test2 = "test2",
        test3 = "test3"
    });
}

Yiyi You · Accepted Answer · 2021-04-02 02:43:46Z

1

Firstly,you need to add jquery.unobtrusive-ajax.min.js or 'jquery.unobtrusive-ajax.js'.If you want to post file,you need to add enctype="multipart/form-data".Here is a demo(It will trigger onBegin and onComplete):

View:

<form asp-controller="Home" asp-action="Upload" data-ajax="true" data-ajax-begin="onBegin"
      data-ajax-complete="onComplete" data-ajax-failure="onFailure" enctype="multipart/form-data">
    <input type="submit" value="submit"/>
 </form>

js:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
<script>
    function onFailure(result) {
        alert("onFailure ");
    };

    function onComplete(result) {
        alert("onComplete " + result.responseJSON.test + " " + result.responseJSON.test2 + " " + result.responseJSON.test3);
    };


    function onSuccess(result) {
        alert("onSuccess " + result.responseJSON.test + " " + result.responseJSON.test2 + " " + result.responseJSON.test3);
    };

    function onBegin(result) {
        alert("onBegin ");

    };
</script>

Model:

public class UploadViewModel
    {
        public IFormFile File { get; set; }
    }

result:

answered Apr 2, 2021 at 2:43

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eaglei22 Over a year ago

Perfect! Thank you. I did have enctype added originally, but I must have removed it during troubleshooting. I won't be back at work to try for a couple days, but missing jquery.unobtrusive-ajax.js is most likely my issue, as I overlooked that! I will follow up once I do to mark your answer as accepted or with another question. Thanks again!

eaglei22 Over a year ago

Worked great! Thanks! I realized my mistake was when I used Nuget to install Microsoft.jQuery.Unobtrusive.Ajax. It never updated wwwroot, and I assumed it did. Not thinking i dragged in the reference to jquery.validate.unobtrusive and it all went down hill from there. I ended up installing through cdnjs using Add Client-Side Library option. Anyway, thanks for getting me on track.

Collectives™ on Stack Overflow

Return JSON using AJAX in ASP.NET CORE form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related