2009-08-26 20 views
3

一般に、ASP.NET MVCの異なるコントローラアクションにポストする同じフォーム内に2つの異なるボタンを持つことは可能ですか?同じASP.NET MVCフォームの2つのボタンを使用

私は本質的に2つのinput(type = "button")タグを同じフォームに入れようとしていますが、別のコントローラアクションを実行したいと思っています。ハイパーリンクとは対照的にボタンをクリックできるようにするには、優れた美しさがあると思うので、私はこれをいくつかのケースで行いたいと思っています。これを行う方法はありますか、それとも別の方法で設計する必要がありますか?

答えて

1

いくつかの考え:

  • ボタンのように表示されたリンクを使用することができます。これは、画像を使用するか、境界線を持つブロック要素にリンクを置くことで簡単に実行できます。
  • 直接送信しない2つのボタンを使用できます。彼らは代わりに、送信する前にフォームアクションを設定するjavascript関数を呼び出します。
    <input type="submit" name="GO" ID="GO" value="GO BUTTON" /> 
    <input type="submit" name="STOP" ID="STOP" value="STOP BUTTON" /> 
    

    が続いmvc最後に、just 2を持っている:
+0

リンクはフォームを送信しません。彼らが(JSを介して)行う場合、第1アプローチと第2アプローチの違いはどこですか? –

+0

リンクはget要求を実行でき、JavaScriptを使用してURLを構築できます。しかし、あなたが正しいです - フォーム要素を提出する必要がある場合、リンクには実質的な利点はありません。 –

+0

同じように見えるようにリンクとボタンをスタイルすることは、結局私が行った方向です。提案していただきありがとうございます! – YeahStu

9

Javascriptを使用しないと本当に可能です。 Javascriptでは、適切なアクションを呼び出す異なるクリックハンドラを定義するだけで済みます。

$(function() { 
     $('#button1').click(function() { 
      $(form).attr('action', '<% Url.Action("action1") %>') 
       .submit(); 
      return false; // prevent default submission 
     }); 
     $('#button2').click(function() { 
      $(form).attr('action', '<% Url.Action("action2") %>') 
       .submit(); 
      return false; // prevent default submission 
     }); 
}); 
+0

は、この例では、jQueryのを使用していることに注意してください...優れた選択肢IMO。 –

0

これはASP.NET MVCとは関係ありませんが、htmlです。フォームの送信時にjavascriptを使用してフォームタグのaction属性を変更することによって、どのボタンが押されたかを確認することによって、これを行う方法を確認する唯一の方法です。

0

これを処理できる方法はいくつかあります。あなたがボタンをクリックしてデータを送信していないと仮定して、私はオプション3に行きます。データが含まれなければならない場合は、テンポラリデータストア(TempDataなど)を使用してオプション1を検討してください。 1つの提出上のコントローラ 作用し、次いで たクリックボタンコントローラ 動作チェックに

  1. 一形態ポストは RedirectToAction()を送出します。 (偉大ません)1ページの記事に
  2. 複数の形式の複数のコントローラーアクション(ファイン)へ
  3. 形の内部または外部input type="button"を作成し、それをコントローラのアクションにユーザーをリダイレクトするのonclickハンドラ を与えますブラウザでこれを取り扱いについて(ベスト)
+0

リダイレクトは、渡されるデータを維持しません。データを保持するには、TempDataにデータを格納する必要があります。 – tvanfosson

+0

良い点tvan。 –

0

はこれを試してみましたが、HTTP POSTを介して送信取得しているクリックされたボタンのIDが与えられていませんが、あなたはおそらくのようなものを行うことができますメソッドにはgoパラメータを指定し、1つにはstopパラメータを指定します。

0

方法#1

どのように「メイン」フォーム内であることを(視覚的に)表示されるように、それらのいずれかを配置するためにCSSを使用して、ボタンをラップする2つの異なる形式を使用してはどうですか?その後

 
<fieldset id="CombinedForm"> 

<form ... action="Method1"> 
    ...form stuff here... 
    <input id="Button1" type="submit" value="Do something"> 
</form> 

<form ... action="Method2"> 
    ...form stuff here... 
    <input id="Button2" type="submit" value="Do something else"> 
</form> 

</fieldset> 

...次のようにCSSを使用して::

本当に簡単な例

 
#CombinedForm { 
    position: relative; 
    padding-bottom: 2em; /* leave space for buttons */ 
} 

#Button1, #Button2 { 
    position: absolute; 
    bottom: 0; 
} 

#Button1 { 
    left: 0; 
} 

#Button2 { 
    right: 0; 
} 

を持つ結果は、フォームのように見えるfieldsetまたはdivを持っていることをする必要がありますその中に2つの実際のHTMLフォームと、親ボックス内に配置された別の場所に送信する2つのボタンがあります。

方法#2

別の方法は、発生します同じ形で両方のボタンを持って、その後決定にリダイレクトするアクション(ボタンの値に基づいて、クリックした)ことを、一方のコントローラのアクションを指します。

+0

#1 - これらのボタンは同じデータを送信する必要があるため、動作しません。 #2はちょっと気分が悪いですね。 :) –

+0

@Amis - それはすべて少し厄介だと感じています:しかし、彼らは同じデータを提出している場合、唯一の違いはそれとは何か、それは別のスイッチと同じ方法のように聞こえます。 TBHの場合は、OK/Cancelボタンで使用される可能性が高くなります。キャンセルボタンでは、データを一切送信する必要はありません。 –

0

そのJavascriptを必要としない...

どのようにこの

に関する公共のActionResultのdoSomething()
{
          //いくつかのビジネスロジック
          TempData ["PostedF ormValues "] = Request.Form;
          IF(のRequest.Form( "ButtonA")!= NULL)
          {
               戻りRedirectToAction( "ActionA"、RouteData.Values) ;
         }
         戻りRedirectToAction( "ActionB"、RouteData.Values)。
}

1

あなたが望むすべてがOK &のようなものがthis post by David Findleyを見て、その後、ボタンをキャンセルされた場合。

私は編集ボタンと削除ボタンがある編集ビューでこのメソッドを使用しています。削除ボタンにはアイテムのIDのみが必要です。下のコードでは、自分の属性 "AcceptFormValueAttribute"の名前を付けたことがわかります。私のDelete [Get]アクションは確認を求めるメッセージを表示するだけなので、リダイレクトが必要です。

[ActionName("Edit")] 
    [AcceptFormValue(Name = "Action", Value = "Delete")] 
    [AcceptVerbs(HttpVerbs.Post)] 
    [ValidateAntiForgeryToken] 
    public ActionResult EditDelete(int? id) 
    { 
     return RedirectToAction("Delete", new { id = id }); 
    } 
0

私はもっとシンプルなものを提案できると思います。

例えば、ButtonA、ButtonBという2つのボタンがあり、それぞれに対して異なる アクションを実行したいとします。 最も簡単なソリューションです:

@using (Html.BeginForm("ButtonA" , "Home")) 
{ 
     <input type="submit" value="ButtonA"/> 
} 

@using (Html.BeginForm("ButtonB" , "Home")) 
{ 
     <input type="submit" value="ButtonB" /> 
} 

あなたは、あなたのホームコントローラにButtonA、ButtonBアクションを宣言する必要があります:ちょうどBeginFormステートメントを使用

[HttpPost] 
public ActionResult ButtonA() 
{ . . . } 

[HttpPost] 
public ActionResult ButtonB() 
{ . . . } 
関連する問題