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

asp.net core ajax form post
jquery ajax call in asp net core mvc
asp.net core 2.1 ajax
asp.net core mvc ajax
ajax begin form in asp net core
asp.net core ajax call controller
libman jquery-ajax-unobtrusive
jquery unobtrusive ajax nuget package

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.

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

jQuery Unobtrusive AJAX in ASP.NET Core Razor Pages, The jQuery Unobtrusive AJAX library has been around for almost 10 years, and NET MVC 3.0, just as adoption of HTML5 custom data-* attributes was Then you can reference it in the page that you want to use it in directly� Let's create an MVC Project. If you don't know how to create a simple MVC Project, refer to my previous blogs. Once you have successfully created a MVC Project, we need to make sure that we have added reference to jquery.unobtrusive-ajax.js and

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>

jQuery Unobtrusive AJAX For Partial Updates In ASP.NET MVC, Ajax and Microsoft.Jquery.Unobtrusive.Validation and Install in your project. JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by� This article shows how to send Ajax requests in an ASP.NET Core MVC application using jquery-unobtrusive. This can be tricky to setup, for example when using a list of data items with forms using the onchange Javascript event, or the oninput event.

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.

Using Unobtrusive Ajax In Razor Pages, NET MVC 3.0 along with the introduction of the Razor View engine. Since then, the library has been added to GitHub, where is forms part of ASPNET Core. So you can either use npm ( npm i jquery-ajax-unobtrusive from the Package And then reference it in the page that you want to use it in either� ASP.NET Core JQuery Unobtrusive. This post is about getting jQuery Unobtrusive Ajax helpers in ASP.NET Core. AjaxHelper Class represents support for rendering HTML in AJAX scenarios within a view. If you’re migrating your existing ASP.NET MVC project to ASP.NET Core MVC, but there is no tag helpers available out of the box as replacement.

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>

how to get microsoft.jQuery.Unobtrusive.Ajax, I tried the directions at this location, but it doesn't lead to what appears to me https://github.com/aspnet/jquery-ajax-unobtrusive. I tried the package manager console and pasted in the suggested line from Prior to Dot Net Core, you could just have your entire database code re-write itself with just a click. Setting up the ASP.NET Core MVC Application. We will start off by creating a new ASP.NET Core 3.1 MVC Project with Authenication Mode selected as Individual User Accounts. This activates Microsoft Identity by default.

Microsoft.jQuery.Unobtrusive.Ajax 3.2.6, Microsoft.jQuery.Unobtrusive.Ajax 3.2.6. jQuery plugin that unobtrusively sets up jQuery Ajax. Package Manager .NET CLI; PackageReference� The following releases of the ASP.NET Ajax Library are hosted on the CDN. Click each link to see the actual list of files. ASP.NET Web Forms and Ajax version 4.5.2; ASP.NET Web Forms and Ajax version 4; ASP.NET Ajax version 3.5; ASP.NET MVC Releases on the CDN. The following ASP.NET MVC JavaScript files are hosted on this CDN: ASP.NET MVC 5.2.3

jQuery Unobtrusive Ajax Helpers in ASP.NET Core, This post is about getting jQuery Unobtrusive Ajax helpers in ASP. NET MVC project to ASP.NET Core MVC, but there is no tag helpers available out of the box to install the script libraries via bower - bower install Microsoft. Once you install the script, you can reference it in _layout.cshtml file like this. In the ASP.NET Core project, right-click the wwwroot directory, select Add > Existing Item. In the Add Existing Item dialog, navigate to the ASP.NET MVC WebApp1 project. Select the favicon.ico file, then select Add, replacing the existing file. Migrate the layout files. Copy the ASP.NET MVC project layout files to the ASP.NET Core project:

ASP.NET CORE MVC AJAX FORM REQUESTS USING jquery , Once you install the script, you can reference it in _layout.cshtml file like this. < script src="~/lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax. The Newer Approach. If you are using Visual Studio 2013, by default it uses the newer One ASP.NET model, which allows you to include multiple project types within a single project (allowing you to use Web Forms, Web API and MVC all within the same project) when you create your solution :

Comments
  • Bower is deprecated, use libman: docs.microsoft.com/pt-br/aspnet/core/client-side/libman/…
  • More informaion: blogs.msdn.microsoft.com/webdev/2018/04/18/…
  • As @MatheusMiranda mentioned, you should use Libman instead of Bower. See my answer below for details.
  • docs.microsoft.com/en-us/aspnet/core/client-side/libman/…
  • You can get it with Libman. It doesn't show up in the GUI, but you can add it to the libman.json file manually. See my answer below.
  • here you are showing how to create the form that uses an ajax request to submit the data. This is not what I asked. After opening the repo you provided in VS2017 I found that you created a reference to unobtrusive ajax lib in the _layout.cshtml. My problem here is that when I run Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.4 in the Package Manager Console, I can see that Microsoft.Jquery.Unobtrusive.Ajax is installed under [project_name]\dependencies\NuGet\Microsoft.Jquery.Unobtrusive.Ajax. That is the library I want to use and I don't know how to reference it.