ASPを解決する.NET GridViewにRadioButtonを入れると単一選択できません

25559 ワード

今日の開発で出会った問題は、GridViewにRadioButtonを含むテンプレート列を追加すると、結果が実行されるということです...ああ、ラジオボタンはもっと選べます!囧啊!今日のエラーを示すために、私はやはり機能シーンをシミュレートしましょう.私が実現する機能は、ラジオボタンを含む学生情報のリストを表示し、行を選択して詳細を表示することです.
1.問題の表示
①まずGridViewを用意し、学生の基本情報と最も重要なラジオボタンを表示します.コードは以下の通りです.

   
   
   
   
    
    
    
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> 
    
    
    
            <Columns> 
    
    
    
            <asp:TemplateField> 
    
    
    
              <ItemTemplate> 
    
    
    
              <asp:RadioButton ID="rbStudent" runat="server" /> 
    
    
    
              ItemTemplate> 
    
    
    
            asp:TemplateField> 
    
    
    
     
    
    
    
            <asp:BoundField DataField="SName" HeaderText="   "  /> 
    
    
    
            <asp:BoundField DataField="SSex" HeaderText="  " /> 
    
    
    
            Columns> 
    
    
    
            asp:GridView>

②次に、データをバインドするエンティティを準備します.コードは次のとおりです.

   
   
   
   
    
    
    
    public class Student  
    
    
    
      {  
    
    
    
          public string SID { get; set; }  
    
    
    
          public string SName { get; set; }  
    
    
    
          public string SSex { get; set; }  
    
    
    
      }

③データを初期化し、GridViewリストをバインドします.コードは以下の通りです.

   
   
   
   
    
    
    
    protected void Page_Load(object sender, EventArgs e)  
    
    
    
           {  
    
    
    
               if (!IsPostBack)  
    
    
    
               {  
    
    
    
                   this.BindGridView();  
    
    
    
               }  
    
    
    
           }  
    
    
    
     
    
    
    
           public void BindGridView()  
    
    
    
           {  
    
    
    
               List sList = new List()  
    
    
    
               {  
    
    
    
                   new Student(){ SID = "s001", SName="  ", SSex=" "},  
    
    
    
                   new Student(){ SID = "s002", SName="  ", SSex=" "},  
    
    
    
                   new Student(){ SID = "s003", SName="  ", SSex=" "}  
    
    
    
               };  
    
    
    
     
    
    
    
               GridView1.DataSource = sList;  
    
    
    
               GridView1.DataBind();  
    
    
    
           }

この時は何の問題もないように見えますが、実行すると、ラジオボックスが自分の役割を失っていることに気づきました.

何が原因ですか.注意深い人はRadioButtonがGroupName属性を設定していないのでグループに属していないと言うかもしれませんが、実は私がこの属性を設定した後も無効です!
2.解決策
①問題分析
実行後、ソースコードを右クリックするとこの奇妙な問題が発見されました.GridViewはinputのname属性に自動的に値を付与し、各行のname属性が異なるため、単一選択できない問題が発生しました.GridViewは次のように世代コードを生成します.

   
   
   
   
    
    
    
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;"> 
    
    
    
            <tr> 
    
    
    
                <th scope="col"> th><th scope="col">   th><th scope="col">  th> 
    
    
    
            tr><tr> 
    
    
    
                <td> 
    
    
    
              <input id="GridView1_rbStudent_0" type="radio" name="GridView1$ctl02$rbStudent" value="rbStudent" /> 
    
    
    
              td><td>  td><td> td> 
    
    
    
            tr><tr> 
    
    
    
                <td> 
    
    
    
              <input id="GridView1_rbStudent_1" type="radio" name="GridView1$ctl03$rbStudent" value="rbStudent" /> 
    
    
    
              td><td>  td><td> td> 
    
    
    
            tr><tr> 
    
    
    
                <td> 
    
    
    
              <input id="GridView1_rbStudent_2" type="radio" name="GridView1$ctl04$rbStudent" value="rbStudent" /> 
    
    
    
              td><td>  td><td> td> 
    
    
    
            tr> 
    
    
    
        table>

各RadioButtonコントロールのname属性が異なり、単一選択できない問題が発生していることがわかりますが、この元凶をどう解決すればいいのでしょうか.
私が最初に考えた方法は、name属性を人工的に統一することです.では、どのように変更しますか?それは簡単だと言う人もいるかもしれませんが、GridViewのOnRowDataBoundイベントを使って行をバインドするときにRadioButtonのname属性を変えればいいのです!コードは次のとおりです.

   
   
   
   
    
    
    
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
    
    
    
           {  
    
    
    
               if (e.Row.RowType == DataControlRowType.DataRow)  
    
    
    
               {  
    
    
    
                   RadioButton RadioButtionRB = (RadioButton)e.Row.FindControl("rbStudent");  
    
    
    
                   RadioButtionRB.Attributes["name"] = "student";  
    
    
    
               }  
    
    
    
           }

しかし、運行後、私はまた失望しました.何が原因ですか?RadioButtonがクライアントから出力されたときに外にマークが付いていて、name属性がSPANに追加されたので、囧死しました.証拠は以下の通りである.

    
    
    
    
     
     
     
     <span name="student"><input id="GridView1_rbStudent_0" type="radio" name="GridView1$ctl02$rbStudent" value="rbStudent" />span> 
     
     
     
               td><td>  td><td> td> 
     
     
     
             tr><tr> 
     
     
     
                 <td> 
     
     
     
               <span name="student"><input id="GridView1_rbStudent_1" type="radio" name="GridView1$ctl03$rbStudent" value="rbStudent" />span> 
     
     
     
               td><td>  td><td> td> 
     
     
     
             tr><tr> 
     
     
     
                 <td> 
     
     
     
               <span name="student"><input id="GridView1_rbStudent_2" type="radio" name="GridView1$ctl04$rbStudent" value="rbStudent" />span> 
     
     
     
               td><td>  td><td> td>

この考え方は通用しないようですね.JSしか使えないので、本題が来ました.データバインド後、JSでGridViewのRadioButtonを遍歴してname属性を同じ値に変更することにしました.通じますか.やってみよう!
②問題解決
まず、GridView内のRadioButtonを巡回し、名前属性を「myradio」などの統一値に設定するJS関数を実装します.コードは次のとおりです.

   
   
   
   
    
    
    
    <span class="string">"text/javascript"</span><span>>  </span></span></li>
    
    
    
    <li><span>       </span><span class="keyword">function</span><span> SetRadioName() {  </span></li>
    
    
    
    <li class="alt"><span>           </span><span class="keyword">var</span><span> gv = document.getElementById(</span><span class="string">"GridView1"</span><span>); </span><span class="comment">//  GridView    ID </span><span> </span></li>
    
    
    
    <li><span>           </span><span class="keyword">var</span><span> myradio = gv.getElementsByTagName(</span><span class="string">"input"</span><span>); </span><span class="comment">//  GridView Inputhtml </span><span> </span></li>
    
    
    
    <li class="alt"><span>           </span><span class="keyword">for</span><span> (</span><span class="keyword">var</span><span> i = 0; i < myradio.length; i++) {  </span></li>
    
    
    
    <li><span>               </span><span class="keyword">if</span><span> (myradio[i].type == </span><span class="string">'radio'</span><span>)</span><span class="comment">//hidden </span><span> </span></li>
    
    
    
    <li class="alt"><span>               {  </span></li>
    
    
    
    <li><span>                   myradio[i].setAttribute(</span><span class="string">"name"</span><span>, </span><span class="string">"myradio"</span><span>);  </span></li>
    
    
    
    <li class="alt"><span>               }  </span></li>
    
    
    
    <li><span>           }  </span></li>
    
    
    
    <li class="alt"><span>       }  </span></li>
    
    
    
    <li><span>

次に、データのバインド後に呼び出したスクリプトを登録するか、ページラベルビューの一番下にスクリプトを書きます.コードは次のとおりです.

    
    
    
    
     
     
     
     protected void Page_Load(object sender, EventArgs e)  
     
     
     
            {  
     
     
     
                if (!IsPostBack)  
     
     
     
                {  
     
     
     
                    this.BindGridView();  
     
     
     
                    ScriptManager.RegisterStartupScript(this, this.GetType(), Guid.NewGuid().ToString(),  
     
     
     
                        "SetRadioName()", true);  
     
     
     
                }  
     
     
     
            }

実行、成功!!!完璧に解決!

Powershellによるaspの自動導入Netmvcサイトプロジェクト(一)

css長さ単位変換器