下一个/预览数据库查询的行

时间：2012-10-03 20:15:32

标签： javascript asp.net

enter image description here

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

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

按下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 of next或者更改光标，该光标表示您现在在表中的位置

1 个答案:

答案 0 :(得分：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（前一个和下一个actor）发送给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(");");

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

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

这就是现在JavaScript函数定义的原因：

function displayActor(nameActor, prev, next)

，displayActor中的最后两个命令是您的AJAX getSummary函数。

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);

如果AJAX函数中的xmlhttp.responseText返回当前的actor，请修改desciptionActorHelper.aspx以返回上一个和下一个actor，并简单地从响应中呈现它们。

相关问题
最新问题