0

ここに画像の説明を入力

目の前にこのページがあります。私がやりたいのは、次のボタンを押すかプレビューして、AjaX経由でインデックスを変更することです。

画像によると、次の画像ボタンを押すと、テキストが「andreas」に変わる必要があります。次にもう一度押すと、「NEWW」、「apoel」、「Name Surname」に変わります。

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 の両方を取得するためにクエリを実行する必要があります) を含むテーブルを作成し、next または prev の onClick を使用して、テーブルの現在の位置を示すカーソルを変更することを考えていました。

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 で 2 つの変更が必要です。

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)

の最後の 2 つのコマンドは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.responseTextAJAX 関数の が現在のアクターを返す場合は、前と次のアクターも返すように変更しdesciptionActorHelper.aspx、単純に応答からそれらをレンダリングします。

于 2012-10-05T14:12:34.793 に答える