jQuery對話框和從數據庫中提取內容

Question

下午好，

我正在一個站點的一部分上，該站點將從數據庫中的表中讀取數據，並在JQuery對話框中單擊上一個和下一個按鈕依次顯示數據。 我真的不太喜歡Javascript或Jquery，在這里需要一些指導。

我可以在對話框的第一頁上獲得內容，但是它將每個id主體列拉為特定值。 我希望它提取具有給定ID的一個實例，單擊“下一步”並獲取下一個，依此類推。

代碼如下。

這是腳本

<script type="text/javascript">
    $(function () {
        var tutorialDialog = $("#dialog").dialog({
            autoOpen: false,
            height: 400,
            width: 550,
            modal: true,
            buttons: {
                "<< Prev": function () {

                },
                "Next >>": function () {

                }
            },
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "blind",
                duration: 500
            }
        });
        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
    });    
</script>

這是我的查看頁面上的代碼

<% IQueryable<#######.#####.######.######> tutorials =  gr.GetEntriesByStream(13); %>
<div id="dialog" title="Exerclock Site Tutorials">
    <p>This is dialog box for the tutorial data.</p>
        <%foreach (var item in tutorials)
          { %>
          <%if (item.seOrder == 0)
            {%>
              <%: item.seBody %>
          <%} %>
        <%} %>
</div>
<a id="opener">Go To Tutorial</a>

Answer 1

如果我理解正確，則希望基於“上一個”和“下一個”按鈕遍歷教程。 取而代之的是，所有內容一次性顯示在jQuery對話框中。

有多種方法可以執行此操作，我認為一種簡單的方法是讓視圖頁面在div元素內生成每個教程，並在其后綴帶有索引的Id，例如，這看起來像

<div id="dialog" title="Exerclock Site Tutorials">
    <p>This is dialog box for the tutorial data.</p>
        <%foreach (var item in tutorials)
          { %>
          <%if (item.seOrder == 0)
            {%>
              <div id='tutorial<%:tutorials.indexOf(item) + 1 %>'>
              <%: item.seBody %>
              </div>
          <%} %>
        <%} %>
</div>

這將生成這樣的HTML

<div id='tutorial1'>tutorial1Content1</div>
<div id='tutorial2'>tutorial1Content2</div>
<div id='tutorial3'>tutorial1Content3</div>

然后，您可以如下修改上一個和下一個功能

"<< Prev": function () {
    $("#tutorial" + currentTutorialIndex).hide();
    currentTutorialIndex --;
    $("#tutorial" + currentTutorialIndex).show();

 },
 "Next >>": function () {
     $("#tutorial" + currentTutorialIndex).hide();
    currentTutorialIndex ++;
    $("#tutorial" + currentTutorialIndex).show();
 }

其中， currentTutorialIndex是全局/適當范圍的變量，可從上一個和下一個函數中訪問。

*請原諒語法錯誤，因為這是未經測試的代碼