回答:
これActionLink
はアンカー<a>
タグをレンダリングするだけなので、使用できません。jQuery AJAXの投稿を
使用できます。
または、フォームのsubmitメソッドをjQuery(AJAX以外の場合)を使用して、または使用せずに呼び出します。onclick
ASP MVC3を使用している場合は、Ajax.ActionLink()を使用できます。これにより、「POST」に設定できるHTTPメソッドを指定できます。
jquery.unobtrusive-ajax.min.js
」などのajax javascriptファイルの1つを含める必要があります。それ以外の場合は、クリックしたときにPOSTではなくGETを続行します。リンクを作成する構文は次のようになります:@Ajax.ActionLink("Delete", "Delete", new { id = item.Id }, new AjaxOptions {HttpMethod = "POST"})
"data-ajax"="true, "data-ajax-url"=<your link> and "data-ajax-method"="Post"
。ところで、私はASP.NET MVC 3を使用しています
jQueryを使用して、すべてのボタンに対してPOSTを実行できます。それらに同じCssClass名を付けてください。
「return false;」を使用します。onclick javascriptイベントの最後で、投稿後にサーバー側のRedirectToActionを実行する場合は、ビューを返します。
かみそりコード
@using (Html.BeginForm())
{
@Html.HiddenFor(model => model.ID)
@Html.ActionLink("Save", "SaveAction", "MainController", null, new { @class = "saveButton", onclick = "return false;" })
}
jQueryコード
$(document).ready(function () {
$('.saveButton').click(function () {
$(this).closest('form')[0].submit();
});
});
C#
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveAction(SaveViewModel model)
{
// Save code here...
return RedirectToAction("Index");
//return View(model);
}
デフォルトのASP.NET MVC 5プロジェクトに組み込まれた答えがここにあり、UIでスタイリングの目標をうまく達成すると私は信じています。純粋なJavaScriptを使用して、いくつかのフォームにフォームを送信します。
@using (Html.BeginForm("Logout", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
<a href="javascript:document.getElementById('logoutForm').submit()">
<span>Sign out</span>
</a>
}
完全に示されている使用例は、Webアプリのナビゲーションバーのログアウトドロップダウンです。
@using (Html.BeginForm("Logout", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="ma-nav-text ma-account-name">@User.Identity.Name</span>
<i class="material-icons md-36 text-inverse">person</i>
</button>
<ul class="dropdown-menu dropdown-menu-right ma-dropdown-tray">
<li>
<a href="javascript:document.getElementById('logoutForm').submit()">
<i class="material-icons">system_update_alt</i>
<span>Sign out</span>
</a>
</li>
</ul>
</div>
}
次の[アクションを呼び出す]リンクを使用します。
<%= Html.ActionLink("Click Here" , "ActionName","ContorllerName" )%>
フォームの値を送信するには、以下を使用します。
<% using (Html.BeginForm("CustomerSearchResults", "Customer"))
{ %>
<input type="text" id="Name" />
<input type="submit" class="dASButton" value="Submit" />
<% } %>
データをCustomer ControllerおよびCustomerSearchResultsアクションに送信します。
Ajax.BeginForm内でこのリンクを使用します
@Html.ActionLink(
"Save",
"SaveAction",
null,
null,
onclick = "$(this).parents('form').attr('action', $(this).attr('href'));$(this).parents('form').submit();return false;" })
;)
この問題に対する私の解決策は、かなり単純なものです。メール全体と部分検索で顧客を検索するページがあります。部分検索はリストをプルして表示します。リストには、GetByIDと呼ばれるアクション結果を指し、IDで渡すアクションリンクが含まれているリストが表示されます。
GetByIDは、選択された顧客のデータをプルしてから戻ります
return View("Index", model);
ポストメソッドです
これは私が解決するのが難しい問題でした。アクションメソッドを呼び出して1つまたは複数の値を特定のアクションメソッドに渡すことができる、かみそりとhtmlでダイナミックリンクを構築するにはどうすればよいですか?カスタムhtmlヘルパーを含むいくつかのオプションを検討しました。シンプルでエレガントなソリューションを思いついたばかりです。
景色
@model IEnumerable<MyMvcApp.Models.Product>
@using (Html.BeginForm()) {
<table>
<thead>
<tr>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
</tr>
</thead>
@foreach (Product p in Model.Products)
{
<tr>
<td><a href="@Url.Action("Edit", "Product", p)">@p.Name</a></td>
<td>@p.Price.ToString()</td>
<td>@p.Quantity.ToString()</td>
</tr>
}
</table>
}
アクションメソッド
public ViewResult Edit(Product prod)
{
ContextDB contextDB = new ContextDB();
Product product = contextDB.Products.Single(p => p.ProductID == prod.ProductId);
product = prod;
contextDB.SaveChanges();
return View("Edit");
}
ここでのポイントは、Url.ActionはアクションメソッドがGETであるかPOSTであるかを気にしないということです。どちらのタイプのメソッドにもアクセスします。あなたはあなたのデータをアクションメソッドに渡すことができます
@Url.Action(string actionName, string controllerName, object routeValues)
routeValuesオブジェクト。私はこれを試しましたが、うまくいきます。いいえ、技術的に投稿やフォームの送信は行っていませんが、routeValuesオブジェクトにデータが含まれている場合は、投稿か取得かは問題ではありません。特定のアクションメソッドシグネチャを使用して、適切なメソッドを選択できます。
私は次のコードを使用して同じ問題を実行しました:
@using (Html.BeginForm("Delete", "Admin"))
{
@Html.Hidden("ProductID", item.ProductID)
<input type="submit" value="Delete" />
}
これは私の問題の解決策です。これは2つのアクションメソッドを持つコントローラーです
public class FeedbackController : Controller
{
public ActionResult Index()
{
var feedbacks =dataFromSomeSource.getData;
return View(feedbacks);
}
[System.Web.Mvc.HttpDelete]
[System.Web.Mvc.Authorize(Roles = "admin")]
public ActionResult Delete([FromBody]int id)
{
return RedirectToAction("Index");
}
}
ビューでは、構造に従って構造をレンダリングします。
<html>
..
<script src="~/Scripts/bootbox.min.js"></script>
<script>
function confirmDelete(id) {
bootbox.confirm('@Resources.Resource.AreYouSure', function(result) {
if (result) {
document.getElementById('idField').value = id;
document.getElementById('myForm').submit();
}
}.bind(this));
}
</script>
@using (Html.BeginForm("Delete", "Feedback", FormMethod.Post, new { id = "myForm" }))
{
@Html.HttpMethodOverride(HttpVerbs.Delete)
@Html.Hidden("id",null,new{id="idField"})
foreach (var feedback in @Model)
{
if (User.Identity.IsAuthenticated && User.IsInRole("admin"))
{
@Html.ActionLink("Delete Item", "", new { id = @feedback.Id }, new { onClick = "confirmDelete("+feedback.Id+");return false;" })
}
}
...
</html>
Razor Viewの注目ポイント:
でconfirmDelete(id)
生成されたリンク@Html.ActionLink
がクリックされたときに呼び出されるJavaScript関数。
confirmDelete()
関数には、クリックされるアイテムのIDが必要です。このアイテムはonClick
ハンドラーから渡されconfirmDelete("+feedback.Id+");return false;
ます。PayAttentionハンドラーはfalseを返し、デフォルトのアクション(ターゲットへのリクエストの取得)を防ぎます。OnClick
ボタンのイベントは、代替としてリスト内のすべてのボタンのjQueryにアタッチできます(HTMLページのテキストが少なくなり、データがdata-
属性を介して渡される可能性があるため、おそらくそれはさらに優れています)。
フォームはid=myForm
、それを見つけるために持っていますconfirmDelete()
。
動詞@Html.HttpMethodOverride(HttpVerbs.Delete)
を使用するためにHttpDelete
、でマークされたアクションとしてフォームが含まれHttpDeleteAttribute
ます。
JS関数では、アクション確認を使用します(外部プラグインを使用bind()
しますが、標準確認も正常に機能します。コールバックまたはvar that=this
(必要に応じて)で使用することを忘れないでください。
フォームにはid='idField'
およびの非表示要素がありname='id'
ます。そのため、確認(result==true
)後にフォームが送信される前に、非表示要素の値が引数を渡された値に設定され、ブラウザーは次のようにコントローラーにデータを送信します。
リクエストURL:http://localhost:38874/Feedback/Delete
リクエストメソッド:POSTステータスコード:302が見つかりました
応答ヘッダー
場所:/フィードバックホスト:localhost:38874 フォームデータ X-HTTP-Method-Override:DELETE id:5
ご覧のとおり、X-HTTP-Method-Override:DELETEと本文のデータが "id:5"に設定されたPOSTリクエストです。応答には、インデックスアクションにリダイレクトする302コードがあり、これにより、削除後に画面を更新します。
RESTの原則に完全に準拠し、HTTP削除を使用して削除することをお勧めします。残念ながら、HTML仕様にはHTTP Get&Postしかありません。タグはHTTP Getのみが可能です。formタグは、HTTP GetまたはPostを実行できます。幸い、ajaxを使用している場合は、HTTP削除を実行できます。これが私が推奨する方法です。詳細については、次の投稿を参照してください:Http Deletes
$ .post()の呼び出しは、Ajaxベースであるため機能しません。そのため、この目的にはハイブリッド方式を使用する必要があります。
以下は私のために働いている解決策です。
手順:1. URLとパラメータを使用してメソッドを呼び出すhrefのURLを作成します2. JavaScriptメソッドを使用して通常のPOSTを呼び出します
解決:
.cshtml:
<a href="javascript:(function(){$.postGo( '@Url.Action("View")', { 'id': @receipt.ReceiptId } );})()">View</a>
注:匿名メソッドは(....)()でラップする必要があります。
(function() {
//code...
})();
postGoはJavaScriptでは以下のように定義されています。残りは簡単です。
@ Url.Action( "View")は呼び出しのURLを作成します
{'id':@ receipt.ReceiptId}は、postGoメソッドでPOSTフィールドに変換されるオブジェクトとしてパラメーターを作成します。これは、必要に応じて任意のパラメーターにすることができます
JavaScriptの場合:
(function ($) {
$.extend({
getGo: function (url, params) {
document.location = url + '?' + $.param(params);
},
postGo: function (url, params) {
var $form = $("<form>")
.attr("method", "post")
.attr("action", url);
$.each(params, function (name, value) {
$("<input type='hidden'>")
.attr("name", name)
.attr("value", value)
.appendTo($form);
});
$form.appendTo("body");
$form.submit();
}
});
})(jQuery);
postGoに使用した参照URL
jQuery.post()
カスタムデータがある場合に機能します。既存のフォームを投稿する場合は、使用する方が簡単ajaxSubmit()
です。
また、jQueryトリックなどを使用ActionLink
して、document.ready()
イベントにリンクハンドラー(とにかく推奨される方法)をアタッチできるため、このコード自体を設定する必要はありません$(function(){ ... })
。
検索(インデックス)ページから結果ページにPOSTする必要があるため、この問題が発生しました。@Vitaliyが述べたほど私は必要としませんでしたが、それは私を正しい方向に向けました。私がしなければならなかったすべてはこれでした:
@using (Html.BeginForm("Result", "Search", FormMethod.Post)) {
<div class="row">
<div class="col-md-4">
<div class="field">Search Term:</div>
<input id="k" name="k" type="text" placeholder="Search" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
}
私のコントローラーには次の署名方法がありました:
[HttpPost]
public async Task<ActionResult> Result(string k)
これはMVCサンプルプロジェクトから取得
@if (ViewBag.ShowRemoveButton)
{
using (Html.BeginForm("RemoveLogin", "Manage"))
{
@Html.AntiForgeryToken()
<div>
@Html.Hidden("company_name", account)
@Html.Hidden("returnUrl", Model.returnUrl)
<input type="submit" class="btn btn-default" value="Remove" title="Remove your email address from @account" />
</div>
}
}