动态列出动态转发器中的数据(Asp.Net)

时间:2016-10-10 06:28:01

标签: c# asp.net

在我的项目中,我已经尝试了一段时间。用户必须从中选择组。这个Add按钮运行asp转发器,所以我可以列出组。组线中有2个按钮。右边一个删除组,左边一个打开动态div。 (正如你所看到的)有一些Javascript工作,所以我动态设置id。 在此之前一切正常。现在,如果用户想要查看已修复的问题,我需要显示该组中的问题。并且用户必须能够动态地在组下添加问题。我尝试使用GridView,但我无法处理。那么有什么建议吗?

以下是我想要做的事:enter image description here

<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
  

我的代码可能看起来很复杂。我添加了一张图片。所以你可以忽略我的代码来提供建议。谢谢。

1 个答案:

答案 0 :(得分:0)

也许有点jquery和一些ajax调用可以解决问题。

您可以将相同的 data-groupid 属性添加到&#34;固定答案&#34;单选按钮。

让我们说小组问题的ID是结果列表,它是一个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;
        }

同样,您将处理类问题的点击,点击后将获取data-questionid并将其更新到数据库。您可以在ajax link here

的数据属性(here)Readmore中添加所需的更多字段