Visual Studio Express 2012 for Web でいってみる 24.Partial ViewとAjax.ActionLink か Ajax.BeginForm

今回は、Ajax.ActionLink と Ajax.BeginFormをコントローラーへのパラメータ渡しについてメモ書きをのこしときます。
尚、初心者が行き当たりばったりにいろいろ動かしてみたときのメモなので、記載内容には勝手な解釈や誤りもあるかと思います。お気づきの点がありましたら、ご指摘よろしくお願いします。

さて、PartialViewをAjaxを使ってレンダリングする場合、@Ajax.ActionLink や@Ajax.BeginFormを使うケースが多いのですが、どう使い分けしてますか？また、コントローラーへパラメータを渡したい場合どうやってます？

私の場合、入力処理を伴うPartialViewの呼び出しにはAjax.BeginFormを使い、表示のみの場合Ajax.ActionLinkを使うようにしています。

以下、コントローラーへパラメータを渡す方法についてメモ残しておきます。

Ajax.ActionLinkの場合

参考：AjaxExtensions.ActionLink メソッド

http://msdn.microsoft.com/ja-jp/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.100).aspx

例

@Ajax.ActionLinkを使って"Shouhin"コントローラーの"_edit"アクションからPartialViewを受け取ります。

その際、画面上のテキストボックス(ShouhinCD)に入力された値をコントローラーに渡します。

@Ajax.ActionLink("編集","_editLink","Shouhin",
      new { ShouhinCD = this.Model.ShouhinCD},
      new AjaxOptions() {
          HttpMethod = "POST",
          UpdateTargetId = "pvShouhin"},
      new {style = "height:28px; width:30px;float:left;"}
)

こんな感じでかいてしまうと、htmlは以下のようになります。

 <a data-ajax="true"
    data-ajax-method="POST"
    data-ajax-mode="replace"
    data-ajax-update="#pvShouhin"
    href="/Shouhin/_editLink?ShouhinCD=0"
    style="height:28px; width:30px;float:left;"
>編集</a>

href="/Shouhin/_editLink?ShouhinCD=0"
とパラメータ値はコンパイル時点での値となってしまいます。
フォーム上に入力された値などをnew{praname = "hoge"}風に動的な値を渡したい場合は、Javascriptで値を変更してしまう方法があります。
こんなかんじでやってます。

[html]

@Ajax.ActionLink("編集","_editLink","Shouhin",
      new { FamilyCD = "paramvalue"},
      new AjaxOptions() {
          HttpMethod = "POST",
          UpdateTargetId = "pvShouhin"},
      new {ID ="ajaxlink",style = "height:28px; width:30px;float:left;"}
 )
<script type="text/javascript">
    $(document).ready(function () {
        $("#ajaxlink").click(function () {
            $(this).attr("href",
                         "/Shouhin/_editLink?ShouhinCD=" + $("#ShouhinCD").val());
            alert($(this).attr("href"));
        })
    });
</script>

[ShouhinController]

 [AjaxOnly]
 public ActionResult _editLink(int ShouhinCD)
 {
     VMShouhin model = new VMShouhin();
     if (Request.IsAjaxRequest())
     {
         商品 shouhin =
             (from s in this.db.商品
              where s.商品コード == ShouhinCD
              select s).FirstOrDefault();
         model.商品コード = shouhin.商品コード;
         model.商品名 = shouhin.商品名;
     }
     return PartialView("_edit", model);
 }

Link要素にIDをつけ、jQueryでクリック時にhref属性を書き換えています。

これで単純なパラメータ渡しができます。この例では、入力値の検証部分がくみこまれていません。渡したい項目が多数であったり、入力値の検証をかけたい場合は@Ajax.BeginFormの方が便利だと思います。

Ajax.BeginFormの場合

[html]

@model Mvc4ApplicationQ.Models.VMShouhinSitei

@using (Ajax.BeginForm("_editform", "Shouhin",
    new AjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "pvShouhin"
    }))
{
    @*↓Ajax.BeginFormに続く{}内にある項目がコントローラに正しく受け渡される。*@
    @Html.DisplayNameFor(model => model.商品コード)
    @Html.DropDownListFor(model => model.商品コード,
                   new SelectList(Model.Get商品List(),"Value","Text"),
                   new{ id="ShoouhinCD" })
    <input ID ="btnajaxForm" type="submit" name="btnEdit" value="編集Form" />
}

[ShouhinController]

 [AjaxOnly]
 public ActionResult _editform(VMShouhinSitei indata)
 {
     VMShouhin model = new VMShouhin();
     if (Request.IsAjaxRequest())
     {
         商品 shouhin =
             (from s in this.db.商品
              where s.商品コード == indata.商品コード
              select s).FirstOrDefault();
         model.商品コード = shouhin.商品コード;
         model.商品名 = shouhin.商品名;
     }
     return PartialView("_edit", model);
 }

Ajax.BeginFormの場合、Ajax.BeginFormに続く　{...}の中にmodelを構成する要素とsubmitボタンを配置し、コントローラーはmodelを引数に定義することでコントローラー内でフォーム上の値を参照することが可能になります。

また、フォーム上に入力された値の検証(アノテーション)を行うことも可能ですが、AjaxのFormの場合、Ajaxを使わない普通のFormとはなんか挙動が異なる気がします。

この件は次のメモに残しときたいと思います。

今回は以上です。