web-dev-qa-db-ja.com

ASP.NET MVC ActionLinkおよびpostメソッド

ActionLinkとPOSTメソッドを使用してControllerに値を送信する方法を教えてください。
ボタンを使いたくありません。
jqueryに何かがあると思います。

asp.net-mvcactionlink
96
šljaker

ActionLinkはアンカー<a>タグをレンダリングするだけなので使用できません。
jQuery AJAX post を使用できます。
または、おそらくjQuery（AJAX以外）の有無に関係なく、フォームのsubmitメソッドを呼び出してください。おそらく、コントロールが好きなコントロールのonclickイベントで。

55
AUSteve

ASP MVC3を使用している場合、Ajax.ActionLink（）を使用できます。これにより、「POST」に設定できるHTTPメソッドを指定できます。

71
Aidos

JQueryを使用して、すべてのボタンに対してPOSTを実行できます。同じCssClass名を付けるだけです。

「return false;」を使用しますポスト後にサーバー側のRedirectToActionを実行する場合は、onclick javascriptイベントの最後に、そうでない場合は単にビューを返します。

かみそりコード

@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);
}
20
Idris

@Aidosは、@ CodingWithSpikeによって作成された彼の投稿に対するコメント内に隠されているため、それを明確にしたかったのです。

@Ajax.ActionLink("Delete", "Delete", new { id = item.ApkModelId }, new AjaxOptions { HttpMethod = "POST" })
15
goodies4uall

ここに、デフォルトの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>
}
5
daniel.caspers

ActionLinkは投稿を送信しません。常にGET要求をトリガーします。

3
Navish Rampal

次のアクションリンクを使用します。

<%= Html.ActionLink("Click Here" , "ActionName","ContorllerName" )%>

フォームの値を送信するには、次を使用します。

 <% using (Html.BeginForm("CustomerSearchResults", "Customer"))
   { %>
      <input type="text" id="Name" />
      <input type="submit" class="dASButton" value="Submit" />
   <% } %>

データをカスタマーコントローラーとCustomerSearchResultsアクションに送信します。

2
Navish Rampal

これは私にとって解決が難しい問題でした。アクションメソッドを呼び出して特定のアクションメソッドに値を渡すことができるダイナミックリンクをrazorと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オブジェクトにデータが含まれている場合、投稿か取得かは関係ありません。特定のアクションメソッドシグネチャを使用して、適切なメソッドを選択できます。

1
wayne.blackmon

Ajax.BeginForm内でこのリンクを使用します

@Html.ActionLink(
    "Save", 
    "SaveAction", 
    null, 
    null, 
    onclick = "$(this).parents('form').attr('action', $(this).attr('href'));$(this).parents('form').submit();return false;" })

;）

1
Alexey Smolyakov

私は次のコードを使用して同じ問題を実行しました：

@using (Html.BeginForm("Delete", "Admin"))
{
       @Html.Hidden("ProductID", item.ProductID)
       <input type="submit" value="Delete" />
}
1
isxaker

この問題に対する私の解決策は非常に簡単なものです。顧客がメール全体で検索し、もう1つを部分検索するページを持っています。この部分は、GetByIDと呼ばれるactionresultを指し、idを渡すアクションリンクを持つリストをプルして表示します

getByIDは、選択した顧客のデータを取得してから返します

return View("Index", model);

これはpostメソッドです

1
DJ_PLaying

これが私の問題の解決策です。これは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の対象ポイント：

  1. JavaScript関数confirmDelete(id)は、@Html.ActionLinkで生成されたリンクがクリックされたときに呼び出されます。

  2. confirmDelete()関数には、クリックされるアイテムのIDが必要です。このアイテムは、onClickハンドラーconfirmDelete("+feedback.Id+");return false;から渡されます。注意を払うハンドラーはfalseを返し、デフォルトアクション（ターゲットへの要求の取得）を防ぎます。ボタンのOnClickイベントは、代替としてリスト内のすべてのボタンのjQueryにアタッチできます（おそらく、HTMLページのテキストが少なくなり、データがdata-を介して渡されるため、さらに良いでしょう属性）。

  3. confirmDelete()で見つけるために、フォームにはid=myFormがあります。

  4. HttpDeleteでマークされたアクションとしてHttpDeleteAttribute動詞を使用するために、フォームには@Html.HttpMethodOverride(HttpVerbs.Delete)が含まれます。

  5. JS関数では、アクション確認を使用します（外部プラグインを使用しますが、標準確認も正常に機能します。コールバックでbind()またはvar that=this（好きなもの）を使用することを忘れないでください。

  6. フォームには、id='idField'およびname='id'の非表示要素があります。そのため、確認後にフォームが送信される前に（result==true）、隠し要素の値は引数に渡された値に設定され、ブラウザーは次のようにコントローラーにデータを送信します。

リクエストURL：http://localhost:38874/Feedback/Delete

リクエスト方法：POSTステータスコード：302が見つかりました

応答ヘッダー

場所：/フィードバックホスト：localhost：38874 フォームデータ X-HTTP-Method-Override：DELETE id：5

ご覧のとおり、それはPOSTリクエストであり、X-HTTP-Method-Override：DELETEとボディのデータが「id：5」に設定されています。応答には、インデックスアクションにリダイレクトする302コードがあります。これにより、削除後に画面を更新します。

1
Vitaliy Markitanov

Ajaxベースであるため、$。post（）の呼び出しは機能しません。そのため、この目的にはハイブリッド方式を使用する必要があります。

以下は私のために働いている解決策です。

手順：1. hrefとURLを使用してメソッドを呼び出すURLの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を使用した非ajax GET/POST（プラグイン？）

http://nuonical.com/jquery-postgo-plugin/

0
Tejasvi Hegde

REST原則に忠実であり、削除にはHTTP削除を使用することをお勧めします。残念ながら、HTML仕様にはHTTP Get＆Postしかありません。タグで取得できるのはHTTP Getのみです。フォームタグは、HTTP GetまたはPostを実行できます。幸いなことに、ajaxを使用している場合は、HTTP削除を実行できます。これは私が推奨することです。詳細については、次の投稿を参照してください。 Http Deletes

0
coding4fun

検索（インデックス）ページから結果ページに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)
0
Grandizer

jQuery.post() は、カスタムデータがある場合に機能します。既存のフォームを投稿する場合は、 ajaxSubmit() を使用する方が簡単です。

また、document.ready() jQueryトリックを使用するなど、$(function(){ ... })イベント（とにかく推奨されるメソッド）でリンクハンドラーをアタッチできるため、このコードをActionLink自体に設定する必要はありません。

0
queen3

これは、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>
            }
        }
0
Maya