定位代码在li中生成datalist项目

Question

My website has the following:

<li class="tile lower-boxes icon_email" data-target-activation="click" data-target="news">
          <div>
            <h2>News 1       
            </h2><h3>24</h3>
          </div>
        </li>

          <li class="tile lower-boxes icon_email" data-target-activation="click" data-target="news">
          <div>
            <h2>News 2</h2><h3>24</h3>
          </div>
        </li>

          <li class="tile lower-boxes icon_email" data-target-activation="click" data-target="news">
          <div>
            <h2>News 3</h2><h3>24</h3>
          </div>
        </li>

             <li class="tile lower-boxes icon_email" style="width:23.6% !important" data-target-activation="click" data-target="news">
          <div>
            <h2>News 4</h2><h3>24</h3>
          </div>
        </li>

The code below will grab the last 4 posts from my blog. But the problem is how do i get the datalist to output the values so they show up in the section of each li ?

    <form id="form1" runat="server">
    <div>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="http://www.website.co.uk/blog/syndication.axd"
            XPath="rss/channel/item [position()<=10]"></asp:XmlDataSource>

    </div>
        <asp:DataList ID="DataList1" runat="server" DataSourceID="XmlDataSource1" BackColor="White" BorderColor="#404040" BorderStyle="none" GridLines="Vertical">
            <ItemTemplate>
                <a href="<%#XPath("link")%>">
                    <%#XPath("title")%><br />
                </a>
            </ItemTemplate>
            <AlternatingItemStyle BackColor="CadetBlue" />
            <ItemStyle BackColor="transparent" ForeColor="transparent" />
            <HeaderStyle BackColor="#804040" ForeColor="White" Font-Bold="true" />
        </asp:DataList>
    </form>

Answer 1

For getting plain HTML structure , asp:repeater is most preferable. in repeater what you place in ItemTemplate is coming as output without applying other table or css.

below use repeater for same purpose.

    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="http://www.website.co.uk/blog/syndication.axd"
    XPath="rss/channel/item [position()<=10]"></asp:XmlDataSource>
<asp:Repeater ID="rptNews" runat="server" DataSourceID="XmlDataSource1">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li class="tile lower-boxes icon_email" data-target-activation="click" data-target="news">
            <div>
                <h2>
                    <a href="<%#XPath("link")%>">
                        <%#XPath("title")%><br />
                    </a>
                </h2>
                <h3>
                    <%#XPath("description")%></h3>
            </div>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
    </asp:Repeater>

Hope this will help you.

Answer 2

The code below will grab the last 4 posts from my blog. But the problem is how do i get the datalist to output the values so they show up in the section of each li ?

If you want to do that, you need to output the <li> elements themselves from the Datalist.

Something like:

<asp:DataList ID="DataList1" runat="server" DataSourceID="XmlDataSource1" BackColor="White" BorderColor="#404040" BorderStyle="none" GridLines="Vertical">
            <ItemTemplate>
                <li> <!-- added li-->
                   <a href="<%#XPath("link")%>">
                      <%#XPath("title")%><br />
                   </a>
                </li>
            </ItemTemplate>
            <AlternatingItemStyle BackColor="CadetBlue" />
            <ItemStyle BackColor="transparent" ForeColor="transparent" />
            <HeaderStyle BackColor="#804040" ForeColor="White" Font-Bold="true" />
        </asp:DataList>