Jquery 对话框和从数据库中提取内容答案

【问题标题】：Jquery Dialog Box and Pulling content from a DatabaseJquery 对话框和从数据库中提取内容
【发布时间】：2015-04-10 21:15:39
【问题描述】：

大家下午好，

我正在开发一个站点的一部分，该站点将从数据库中的表中读取数据，并在 JQuery 对话框中单击上一个和下一个按钮按顺序显示数据。在这方面，我对 Javascript 或 Jquery 真的不是很好，在这里需要一些指导。

我可以获取对话框第一页上的内容，但它会拉取每个 id body 列以获取特定值。我希望它使用给定的 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>

【问题讨论】：

标签： javascript jquery asp.net-mvc database

【解决方案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 是一个全局/适当范围的变量，可从 prev 和 next 函数中访问。

*请原谅语法错误，因为这是未经测试的代码

【讨论】：