0

在此处输入图像描述

我面前有这个页面。我想要做的是当我按下按钮下一步或预览通过 AjAX 更改索引时。

根据图像，当我按下下一个图像按钮时，文本必须更改为“andreas”，如果我再次按下下一步，则更改为“NEWW”，然后更改为“apoel”，然后再次更改为“姓氏”。

按 ACTORS 链接时，我有此代码：

/* FOR THE ACTORS TAB */
litActors.Text = "";
actorsCmd = "SELECT actor_name,a.id_actor FROM actor a JOIN project_actor pa on a.ID_ACTOR = pa.ID_ACTOR WHERE ID_PROJECT = " + Request.QueryString["id"];
SqlCommand cmdActor = new SqlCommand(actorsCmd, con);
SqlDataReader reader;
try
{
     reader = cmdActor.ExecuteReader();
     while (reader.Read())
     {
          litActors.Text += "<li><a onclick=\"javascript:getSummary(" + reader.GetInt32(1).ToString() + ",'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('" + reader.GetString(0) + "') \">" + reader.GetString(0) + "</a></li>";

     }

}
catch (Exception err)
{
     con.Close();
     return;
}

上面代码的 html 表示是这样的（忽略那些 style.display。它们是用于界面的）：

<ul class="slideShow actors">
    <li><a onclick="javascript:getSummary(62,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('Name Surname') ">Name Surname</a></li>
    <li><a onclick="javascript:getSummary(1,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('andreas') ">andreas</a></li>
    <li><a onclick="javascript:getSummary(63,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('NEWW') ">NEWW</a></li>
    <li><a onclick="javascript:getSummary(53,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('apoel') ">apoel</a></li>
</ul>

现在我的javascript函数是这样的：

function getSummary(id,type) {
    if (id == "") {
        document.getElementById("data").innerHTML = "";
        return;
    }
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("data").innerHTML = xmlhttp.responseText;
        }
    }
    if (type == 'a') {
        xmlhttp.open("GET", "desciptionActorHelper.aspx?id=" + id, true);
    } else if ...

    xmlhttp.send();
}

function displayActor(nameActor) {
        var btnActor = document.getElementById('displayMe'); btnActor.style.display = 'inline';
        btnActor.innerHTML = "<a>ACTOR:</a> " + nameActor;
}

和我的下一个/上一个按钮：

litDescField.Text = "<span id='left_right'>" +
                          "<a><img src='../images/left-arrow.png' /></a>&nbsp&nbsp&nbsp&nbsp" +
                          "<a><img src='../images/right-arrow.png' /></a>" +
                    "</span>";

有没有人知道一个好的和简单的方法来做到这一点？

因为我的想法很复杂，我什至不确定它们是否会起作用。

我正在考虑制作一个带有演员 ID 的表格（我必须运行一个查询来获取演员的数量和他们的 ID）和 onClick 的 next 或 prev 更改一个光标，说明您现在在表格中的位置。

4

1 回答 1

0

我不知道这是您认为好的还是容易的，但这是一种方法：

将您的处理程序更改为：

SqlCommand cmdActor = null;
SqlDataAdapter da = null;
DataSet ds = null;
DataRow row = null;
int rowIndex = 0;
int rowNext = 0;
int rowPrev = 0;
int rowMax = 0;
bool isFirstRow = false;
bool isLastRow = false;
HtmlGenericControl li = null;
HtmlGenericControl a = null;
StringBuilder sb = null;

litActors.Text = "";
actorsCmd = "SELECT actor_name, a.id_actor FROM actor a JOIN project_actor pa on a.ID_ACTOR = pa.ID_ACTOR WHERE ID_PROJECT = @ID_PROJECT";
cmdActor = new SqlCommand(actorsCmd, con);
//Parameterizing ID_PROJECT to protect against SQL injection
cmdActor.Parameters.AddWithValue("ID_PROJECT", Request.QueryString("id"));

try {
    //Using a SqlDataAdapter instead of a SqlDataReader because forward-only access is 
    //not conducive for trying to peek ahead or look-behind
    da = new SqlDataAdapter(cmdActor);
    da.Fill(ds);
    //check returned tables
    if (ds.Tables.Count > 0) {
        //Zero-out the row counter and set index of maxRow
        rowIndex = 0;
        rowMax = ds.Tables(0).Rows.Count - 1;
        foreach ( row in ds.Tables(0).Rows) {
            //Test to see if the row counter has incremented to the last row
            isFirstRow = rowIndex == 0;
            //Test to see if the row counter has incremented to the last row
            isLastRow = rowIndex == rowMax;
            //Set prev/next rows
            rowPrev = (isFirstRow ? rowMax : rowIndex - 1);
            rowNext = (isLastRow ? 0 : rowIndex + 1);
            //Make new HTML controls
            li = new HtmlGenericControl("li");
            a = new HtmlGenericControl("a");
            //Make a StringBuilder to assemble the "onclick" in a more readable fashion
            //subbing in "row("actor_id")" and row("actor_name") for an example of column names
            sb = new StringBuilder();
            sb.Append("javascript:getSummary(");
            sb.Append(row("actor_id").ToString());
            sb.Append(", 'a');");
            sb.Append("document.getElementById('projectNav').style.display = 'none';");
            sb.Append("document.getElementById('left_right').style.display = 'inline-block';");
            sb.Append("displayActor('");
            sb.Append(row("actor_name").ToString());
            //add in the prev/next actor ids to pass to javascript:displayActor();
            sb.Append("', ");
            sb.Append(ds.Tables(0).Rows(rowPrev)("actor_id").ToString());
            sb.Append(", ");
            sb.Append(ds.Tables(0).Rows(rowNext)("actor_id").ToString());
            sb.Append(");");
            //Add initial "onclick" for the litActors list
            a.Attributes.Add("onclick", sb.ToString);
            a.InnerText = row("actor_name");
            //Add new anchor to litActors
            li.Controls.Add(a);
            litActors.Controls.Add(li);
            //increment row counter
            rowIndex += 1;
        }
    }
} catch (Exception err) {
    con.Close();
    return;
}

它将新的 Actor 列表呈现为：

<ul class="slideShow actors">
    <li><a onclick="javascript:getSummary(62,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('Name Surname', 53, 1);">Name Surname</a></li>
    <li><a onclick="javascript:getSummary(1,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('andreas', 62, 63);">andreas</a></li>
    <li><a onclick="javascript:getSummary(63,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('NEWW', 1, 53);">NEWW</a></li>
    <li><a onclick="javascript:getSummary(53,'a');document.getElementById('projectNav').style.display = 'none';document.getElementById('left_right').style.display = 'inline-block';displayActor('apoel', 63, 62);">apoel</a></li>
</ul>

然后在您的 JavaScript 中，需要进行两项更改：

function getSummary(id, type, callback) {
    if (id == "") {
        document.getElementById("data").innerHTML = "";
        return;
    }
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //CHANGE 1: Execute callback, if supplied
            if (callback) {
                callback(xmlhttp.responseText);
            } else (
                //Default action
                document.getElementById("data").innerHTML = xmlhttp.responseText;
            }
        }
    }
    if (type == 'a') {
        xmlhttp.open("GET", "desciptionActorHelper.aspx?id=" + id, true);
    } //else if ...
    xmlhttp.send();
}

function displayActor(nameActor, prev, next) {
    var btnActor = document.getElementById('displayMe'),
        span = document.getElementById('left_right');
    btnActor.style.display = 'inline';
    btnActor.innerHTML = "<a>ACTOR:</a> " + nameActor;
    //CHANGE 2: Set prev/next via AJAX
    getSummary(prev, 'a', function (data) {
        //do something with the previous actor
        span.children[0].innerText = data;
    });
    getSummary(next, 'a', function (data) {
        //do something with the next actor
        span.children[span.children.length - 1].innerText = data;
    });
}

更新：

我的回答已经将 actor_id （对于上一个和下一个演员）发送到 displayActor 函数。

请注意，在本节（代码隐藏）中，我DataTable.Rows用于获取上一个和下一个 actor_id：

//add in the prev/next actor ids to pass to javascript:displayActor();
sb.Append("', ");
//RENDER the PREVIOUS actor_id as a parameter to the "onclick"
sb.Append(ds.Tables(0).Rows(rowPrev)("actor_id").ToString());
sb.Append(", ");
//AND THEN render the NEXT actor_id as a parameter to the "onclick"
sb.Append(ds.Tables(0).Rows(rowNext)("actor_id").ToString());
sb.Append(");");

displayActor它将“onclick”事件中的调用呈现为：

displayActor('Name Surname', 53, 1);

这就是为什么 JavaScript 函数定义现在是：

function displayActor(nameActor, prev, next)

最后两个命令displayActor用于您的 AJAXgetSummary函数。

getSummary(prev, 'a', function (data) {
    //do something with the previous actor
    span.children[0].innerText = data;
});

也可以写成：

var callback = function (data) {
    //do something with the previous actor
    span.children[0].innerText = data;
};
getSummary(prev, 'a', callback);

如果xmlhttp.responseText你的 AJAX 函数中的返回当前参与者，修改desciptionActorHelper.aspx为也返回前一个和下一个参与者，并简单地从响应中渲染它们。

于 2012-10-05T14:12:34.793 回答