web-dev-qa-db-ja.com

ASP.NET Core MVCプロジェクト内でMicrosoft.JQuery.Unobtrusive.Ajaxを参照する方法

Microsoft.JQuery.Unobtrusive.Ajaxを使用しようとしています。私はNuGetを使用してパッケージをインストールすることから始めましたが、予想通り、依存関係の中でそれを見ることができます。

私の問題は、自分のビュー内で使用できるようにスクリプトを参照する方法が見つからないことです。 ここ これをレイアウトに追加する必要があることがわかりました。

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

しかし、そのパスはファイルにつながりません：

enter image description here

これが私のコントローラのアクションです：

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

フォーム：

<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>

コントローラからJSONを返していますが、JSONデータを表示するページにリダイレクトされています。私の目標は、JSONオブジェクトのデータを使用して、同じビュー内のコンポーネントを更新することです。

c#.netvisual-studio-2017asp.net-core-mvc-2.0unobtrusive-ajax
10
LH7

.NETエコシステム内で、BowerはNuGetが静的コンテンツファイルを配信できないために残された空白を埋めていることがわかりました。それで、クライアント側からアクセスできる必要があるライブラリをインストールするには、Bowerを使用する必要があります。 Bowerは必要な静的コンテンツを作成します。

私の場合、私のasp.netコアプロジェクトはBowerを使用するように設定されていなかったため、Bower構成ファイルをプロジェクトに追加する必要がありました。

参照のチェック this

3
LH7

Bowerは非推奨であり、Libmanは新しいプロジェクトに使用する必要があります。しかしながら、 jquery-ajax-unobtrusiveは cdnjs ではまだ使用できません。 追加リクエスト がいくつかあるので、自由に投票してください。当面は、unpkgを使用して追加できます。 LibmanのGUIには現在表示されていないため、手動でlibman.jsonファイルに追加する必要があります。

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

ライブラリ内のすべてのファイルを取得する場合は、最後の行を削除しますが、これら2つのJavaScriptファイルで十分です。

現在 MicrosoftのCDN でホストされている最新バージョンは3.2.5です。 3.2.6バージョンが必要な場合、現時点でそれをホストする唯一のCDNは jsdelivr.com です。

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

AJAX forms YoutubeLink ）に関する本当に素晴らしいYouTubeチュートリアルを次に示します。このGitHub Project Link からプロジェクトをダウンロードできます。スクリプトが含まれていますAJAXフォームに使用されます。

enter image description here

上記のプロジェクトからコピーされたサンプルスタイル：

<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>
0
Amneu

マイクロソフトによれば、Libmanは推奨されるソリューションであり、プロジェクトを右クリックして[クライアント側ライブラリの管理]を選択することで利用できます。残念ながら、jquery-ajax-unobtrusiveは、Bower経由で利用できますが、Libman経由で利用できるようには見えません。それでも正当なオプションの1つは、Bowerを介して追加して使用することです。または、私のようにBowerに適切なフォルダーに保存してもらえず、実際にはjsファイルだけが必要な場合は、bower_componentsからファイルをコピーして貼り付けます。 libフォルダー。

0
tnJed