[javascript]JQueryで一覧内の特定のボタンを押した際に行を把握する。

JQueryにて一覧内の特定のボタンを押した際に行を把握します。

①HTML側は以下のようにボタンを配置します。
--------------------------------------------

<table>

 …

<tr>
<td>
　<button id="btnJump_0">詳細</button>
</td>
<td>
  <input id="KEYNO_0" type="hidden" value="111" />
</td>
<td>
  １行目です。
</td>
</tr>

 …

</table>

--------------------------------------------


②Javascriptは以下の様に書けばOK。
【^】は前方一致で探す、というJQuery上の意味なので
ここを後方一致などに変更して使用してもOKですし
連番を振っていなくても動くと思います。
---------------------------------------------
//ボタンを押された時
    $(document).ready(function () {
        $("[id^='btnJump']").click(function () {

            //ここでボタンを押された行が把握できます。
            var row = $(this).parent().parent();
 
            //以降はこれを用いてそれぞれの値をゲットしたりできます。
            var KEYNO = row.find($("[id^='KEYNO']")).val();
            alert("押された行のキーNOは" +　KEYNO + "です");
        });
    });
---------------------------------------------

[ASP.NET MVC]Javascript動作も込みのヘルパーを作成（コードベース）。

以下の様に

コードを入力すると名前が表示される…といった

よくある動きを込み込みにしたヘルパー（コードベース）を作成してみる。

---

①ヘルパーは以下の様な感じ。
-----------------------------------------
namespace TESTHelpers
 {
  public static IHtmlString MemberCodeFor<TModel, TProperty>(
           this HtmlHelper<TModel> helper,
           Expression<Func<TModel, TProperty>> Codeexpression,
           Expression<Func<TModel, TProperty>> Nameexpression,
           String CustomCDid = "Member_Cd",
           String CustomNameid = "Member_Name")
 {
           //TextboxFor
           HtmlString htmlTextBox = helper.TextBoxFor(Codeexpression,
                            new
                            {                               @id = CustomCDid
                            });

           //Display用TextBox
       HtmlString htmlTextBox2 = helper.TextBoxFor(Nameexpression, 
                            new
                             { 
                           　　@id = CustomNameid,
                           　　@readonly = "readonly" 
                           　});

           //div1
　　　　　var myTag = new TagBuilder("div");
 　　　　　myTag.MergeAttribute("style", "width:120px"); 
　　　　　myTag.InnerHtml = "担当者";
　　　　　//div2
　　　　　var myTag2 = new TagBuilder("div"); 
　　　　　myTag2.InnerHtml = htmlTextBox.ToHtmlString();
　　　　　//div3
　　　　　var myTag3 = new TagBuilder("div");
　　　　　myTag.MergeAttribute("style", "width:240px"); 
　　　　　myTag3.InnerHtml = htmlTextBox2.ToHtmlString();
　　　　　//改行
 　　　　　var Enter = new StringBuilder(); 
 　　　　　Enter.AppendLine("");
　　　　　　//外出ししたScript部
　　　　　String strScript = helper.MemberJavascript(CustomCDid ,CustomNameid ).ToString();
　　　　　//連結してreturn
　　　　　var ReturnHTML = myTag.ToString() + myTag2.ToString() + myTag3.ToString()  + Enter.ToString() + strScript;　　　　　return new HtmlString(ReturnHTML.ToString());
  }
  public static IHtmlString MemberJavascript(string fromid, string toid)
 {
            //Script部生成----------------------------------------
            var sb = new StringBuilder();
               sb.AppendLine(" $(function () {"); 
            sb.AppendLine("   $('#" + fromid + "').change(function () {");          
            sb.AppendLine("    var Member_Cd = $('#" + fromid + "').value;");
            sb.AppendLine("    alert(\"ここにWebサービス等を使用して名前を取得するスクリプトを記載\");");            
             sb.AppendLine("   });");
            sb.AppendLine("  });");
            //----------------------------------------------------
             var ScriptTag = new TagBuilder("script");
            ScriptTag.MergeAttribute("type", "text/javascript");
            ScriptTag.InnerHtml = sb.ToString();

            return new HtmlString(ScriptTag.ToString());
  }
}
------------------------------------------
(readonlyはbootstrap独自だったかな…）


②View側は以下の様書くだけでOK。
------------------------------------
@using HelpersTest

@Html.MemberCodeFor(m => m.Member_Cd, m => m.Member_Name, "Member_Cd", "Member_Name")
------------------------------------