How to reference Microsoft.JQuery.Unobtrusive.Ajax within my ASP.NET Core MVC project

Question

I am trying to use Microsoft.JQuery.Unobtrusive.Ajax. I started by installing the package using NuGet and as expected I am able to see it among my dependencies.

My problem is that I cant find a way to reference the script so I can use it within my view. Here I saw that I should add this to my layout:

<script src="~/lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax.min.js"></script>

but that path leads to no file:

Here is my controller action:

[HttpPost]
public IActionResult OrderItem([Bind("Id,Quantity")] Item item)
{
    return Json(new { foo= item.Id, boo= item.Quantity});
}

The form:

<form asp-action="OrderItem" asp-controller="Menu" method="POST" data-ajax="true" data-ajax-update="#divEmp" data-ajax-mode="replace" data-ajax-complete="onComplete" data-ajax-failure="onFailed" data-ajax-success="onSuccess">
    <input asp-for="@i.Id" value="@i.Id" type="hidden" name="Id" />
    <input asp-for="@i.Quantity" value="@i.Quantity" type="number" name="Quantity" class="form-group" />
    <button class="btn btn-primary" type="submit">Add to Order</button>
</form>

I am returning a JSON from the controller but I am getting redirected to the page showing the JSON data. My goal is to use the data in the JSON object to update components within the same view.

Answer 1

Here's a really nice YouTube tutorial on AJAX forms YoutubeLink , and you can download the project from this GitHub Project Link. It contain the script to be used for AJAX Form.

Sample style copied from the above project:

<form asp-controller="Home1" asp-action="SaveForm" 
      data-ajax="true" 
      data-ajax-method="POST"
      data-ajax-mode="replace" 
      data-ajax-update="#content"
      data-ajax-loading  ="#divloading"
      data-ajax-success="Success"
      data-ajax-failure ="Failure">
    <div class="form-group">
        <div>  <h4>@Html.Label("Name")</h4> </div>
        <div>  @Html.TextBox("Name","",htmlAttributes:new { @class="form-control",id="Name"})</div>
    </div>
    <div class="form-group">
        <div><h4>@Html.Label("Age")</h4></div>
        <div>@Html.TextBox("Age", "", htmlAttributes: new { @class = "form-control", id ="Age" })</div>
    </div>
    <br/>
    <input type="submit" name="Submit"  class="btn btn-block btn-success" />
</form>

Answer 2

Bower is deprecated and Libman should be used for new projects. However, jquery-ajax-unobtrusive is not available in cdnjs yet. There are a few requests to add it, so feel free to vote on them. In the meantime, you can add it using unpkg. The GUI for Libman doesn't currently show it, so you'll have to add it to the libman.json file manually:

{
    "provider": "unpkg",
    "library": "[email protected]",
    "destination": "wwwroot/lib/jquery-ajax-unobtrusive/",
    "files": [ "dist/jquery.unobtrusive-ajax.js", "dist/jquery.unobtrusive-ajax.min.js" ]
}

If you want to get all the files in the library, remove the last line, but those two JavaScript files are all you need.

Currently, the latest version hosted on Microsoft's CDN is 3.2.5. If you wanted the 3.2.6 version, the only CDN that hosts it at the moment is jsdelivr.com:

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.unobtrusive-ajax.min.js"
integrity="sha256-PAC000yuHt78nszJ2RO0OiDMu/uLzPLRlYTk8J3AO10="
crossorigin="anonymous"></script>

Answer 3

I found that within the .NET ecosystem, Bower fills the void left by NuGet's inability to deliver static content files. Sow I need to use Bower to install the libraries that need to be accessible from the client side. Bower creates the required static content.

in my case, my asp.net core project was not set up to use Bower so I had to add a Bower configuration file to my project.

for references check this

Answer 4

jquery-ajax-unobtrusive is now available via cdnjs. Please check here for the docs

The short answer to your question is to add the following line to reference this library (this is for the current version 3.2.6):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>