ダイナミックリピータ（Asp.Net）のデータを動的に表示

Question

私のプロジェクトでは、しばらくの間何かを試してきました。ユーザーは選択からグループを選択する必要があります。このAddボタンはaspリピータを実行するので、グループをリストすることができます。グループ行には2つのボタンがあります。右のグループはグループを取り消し、左のグループは動的なdivを開きます。 （あなたが見ることができるように）私は動的にIDを設定するので、いくつかのJavascriptの作品があります。 ここまでは大丈夫です。ここで、ユーザーが固定質問をチェックしたい場合は、そのグループ内の質問を表示する必要があります。ユーザーはグループ内で質問を動的に追加できる必要があります。私はGridViewを使用しようとしましたが、私は処理できませんでした。だから助言？ここで

は私が何をしたいです：

<ul> 
    <asp:Repeater ID="GroupRepeater" runat="server"> 
     <ItemTemplate>     
      <li class="groupli"> 
       <div style="width:100%; float:left; margin-top:2%;"> 
        <h3 style="display:block; float:left; width:auto;"><%# Container.ItemIndex+1 %>.<%# Eval("QuestGroup")%></h3>       
       <asp:Button CssClass="GroupLiButtonD" OnClick="RemoveGroup" CommandArgument='<%# Eval("QuestGroup") %>' ID="DeleteGroupBtn" runat="server"/>      
       <button type="button" onclick="ShowQuestArea('<%# Container.ItemIndex+1 %>_div')" class="GroupLiButtonA"></button> 
       </div> 
       <div id='<%# Container.ItemIndex+1 %>_div' style="width:100%; margin-left:3%; float:left; display:none;"> 
        <div class="questarea"> 
         <div style="width:100%; margin-top:1%;"> 
          <h4 style="display:block; float:left; width:200px;">Add Fixed Question</h4>         
          <input name='check_<%# Container.ItemIndex+1 %>' id='fixcheck_<%# Container.ItemIndex+1 %>' onchange="FixedCheck('fixcheck_<%# Container.ItemIndex+1 %>','<%# Container.ItemIndex+1 %>')" type="radio" /> 
         </div> 
         <div id="fixarea_<%# Container.ItemIndex+1 %>" class="subarea"> <%--fixedquestion view start tag--%> 

         </div> <%--fixedquestion view end tag--%>       
         <div style="width:100%; margin-top:1%;"> 
          <h4 style="display:block; float:left; width:200px;">Add Random Question</h4> 
         <input name='check_<%# Container.ItemIndex+1 %>' id='randomcheck_<%# Container.ItemIndex+1 %>' onchange="RandomCheck('randomcheck_<%# Container.ItemIndex+1 %>','<%# Container.ItemIndex+1 %>')" type="radio" /> 
          <div id="randomarea_<%# Container.ItemIndex+1 %>" class="subarea"> 
           <div style="margin-top:1%;"> 
            <p style="color:black; float:left;">Number of Random Questions:</p><input type="number" max="20" min="0" style="width:20px; float:left;" /> 
            <button>Add</button> 
           </div>         
          </div> 
         </div>       
       </div>       
        </div>                     
       </li> 
     </ItemTemplate> 
    </asp:Repeater> 
     </ul 

私のコードは複雑に見えるかもしれません。私はイメージを追加しました。だからあなたは助言を与えるために私のコードを無視することができます。ありがとうございました。

Answer 1

多分、少しのjqueryといくつかのajax呼び出しがこのトリックを行います。

あなたは「固定解答」のラジオボタンに同じクラスとデータ・グループID属性を追加することができます。

グループ質問のIDはresultlistで、これはul要素です。

は、その後、あなたがグループの質問を取得する新しいWebメソッドを追加するファイルアヤックスとの質問あなたは.csで

$(".yourclass").on"click", function (e) { 
    var groupid=$(this).data("groupid"); 
    //get the questions 
    $.ajax({ 
     type: 'POST', 
     contentType: "application/json; charset=iso-8859-7", 
     url: 'yourpage.aspx/yourmethod', 
     data: "{'group':'" + groupid +"'}", 
     async: false, 
     error: function (xhr) {console.log(xhr.responseText);}, 
     success: function (response) { 
       //Query the jQuery object for the values 
       var items = response.d; 
       if (items == null) { 
       $('#resultlist').empty(); 
       $('#resultlist').append("<li> no questions... </li>"); 
       } 
       else { 
       var fragment = ""; 
       $.each(items, function (index, val) { 
       var theQuestion = val.theQuestion; 
       var theCode = val.theCode; 
       fragment += "<li data-qustionid='"+theCode+"' class='question'>"+theQuestion+"</li>";}); 
       $('#resultlist').empty(); 
       $("#resultlist").append(fragment); 
       } 
    }); 

    }); 

をロードするためにクリックを処理する

[WebMethod] 
    public static List<Results> yourmethod(string text, string phone, string type) 
     { 
      List<Results> result = new List<Results>(); 
      DataTable question = getQuestions(); 
      if(question!=null){ 
      foreach (DataRow rw in autocomlete.Rows) 
      { 
       result.Add(new Results { theQuestion = rw[0].ToString(), 
       theCode = rw[3].ToString() }); 
      } 
      } 
      return result; 
     } 

と同様に、クラスの質問のクリックを処理します。クリックすると、データquestionidが取得され、データベースに更新されます。データ属性に必要なフィールドをさらに追加できます（link here）。Readmore for ajax here