在动态转发器（Asp.Net）中动态列出数据

Question

在我的项目中，我已经尝试了一段时间。用户必须从选择中选择组。此添加按钮运行 asp 转发器，因此我可以列出组。组线中有 2 个按钮。右一个删除组，左一个打开动态 div。 （如您所见）有一些 Javascript 作品，所以我动态设置 id。 到这里没问题。 现在，如果用户想检查固定问题，我需要显示该组中的问题。并且用户必须能够在组下动态添加问题。我尝试使用 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 调用就可以解决问题。

您可以将相同的 class 和 data-groupid 属性添加到“固定答案”单选按钮。

假设小组问题的 id 是 resultlist，它是一个 ul 元素。

然后您将处理单击以使用 ajax 加载问题

$(".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);
              }
     });

  }); 

在您的 .cs 文件中，您将添加一个新的网络方法来获取小组的问题

[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;
        }

同样，您将处理 question 类的点击，点击该类将获取 data-questionid 并将其更新到数据库。您可以在 data- 属性 (link here) 中添加更多您需要的字段阅读更多用于 ajax here