How to reference Microsoft.JQuery.Unobtrusive.Ajax

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": "jquery-ajax-unobtrusive@3.2.6",
    "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/jquery-ajax-unobtrusive@3.2.6/dist/jquery.unobtrusive-ajax.min.js"
integrity="sha256-PAC000yuHt78nszJ2RO0OiDMu/uLzPLRlYTk8J3AO10="
crossorigin="anonymous"></script>

Answer 3

Libman would be the suggested solution according to Microsoft and is available by right clicking the project and selecting "Manage Client Side Libraries". Unfortunately it does not appear that jquery-ajax-unobtrusive is available via Libman, though it is available via Bower. One still-legitimate option is to add and use it via Bower, or if like me you can't seem to get Bower to save things to the correct folder and really just need the js file, just copy/paste the file from bower_components into the lib folder.

Answer 4

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