1

ユーザーがサムネイルを選択すると、データベースからの大きな画像とIDが表示される場合、スクリプトがあります。

この時点までは非常にうまく機能します

私が今やろうとしているのは、ユーザーがサムネイルをクリックしたときに、テーブルにあるデータを表示したいということです。

どうやってやるの？

私のデータベース関係:

私のデータベースには、主キーと外部キーを持つ2つのテーブルがあります。

主キーを持つテーブルにあるサムネイルを選択すると、外部キーを含む他のテーブルのデータを表示したい。

私のコード: Javascript:

 function swap(image) {
        document.getElementById("imagem-selec").src = image.href;
        $("input[name='Id_Img']").val($(image).data("id"));
    }

サムネイルのリストを表示する HTML:

@foreach (var p in ViewBag.Img)
            {           
                <li>
                    <a href="~/Files/@p.Name" onclick="swap(this); return false;" data-id="@p.Id">
                        <img src="~/Files/@p.Name"/>
                    </a>
                </li>

パスを受け取る Html

 <div id="wrap">         
    <img id="i-selec" src=""/>   
  </div>

何か提案はありますか？

前もって感謝します

私のコードを更新:

脚本

  function swap(image) {
        var imageID = $(image).data("id");

        $.ajax("/{Admin}/GetImageData",
        {
            data: JSON.stringify({ ID: imageID }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                // Add your content to DOM here:
                // values in data.data1 etc...
                values in data.De, data.Sc
            }      
            error: function () {
            alert("error!");
            }
         });
    };

コントローラ：

  public JsonResult GetImageData(int ID)
        {
            using (SqlConnection cn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
            {
                SqlDataAdapter sqlAdapt = new SqlDataAdapter
                (@"SELECT C.* From Content C inner join Image B on C.ID_Img = B.Id WHERE C.Id=" + ID, cn);
                SqlCommandBuilder sqlCmdBuilder = new SqlCommandBuilder(sqlAdapt);
                DataSet data = new DataSet();
                sqlAdapt.Fill(data, "Content ");

                cn.Close();
                return Json(data);
            }
        }
4

1 に答える 1

1

次の 2 つの選択肢があるようです。

  • ビューにデータをロードし、ページのロード時にデータを非表示にし、クリック イベントで単にデータを表示します。
  • クリック イベントで必要なデータを取得するための AJAX 呼び出しを行い、呼び出しが返されたときにデータを追加します。

個人的には、AJAX 呼び出しを使用します。これは、リクエストでネットワーク オーバーヘッドが少し余分に使用されますが、多くの無駄なデータがダウンロードされるのを防ぐ可能性があるためです。

// Data model.
class ImageData
{
    public int data1 { get; set; }
    public string data2 { get; set; }
    ...
}

// Controller action. Data access abstracted out.
public JsonResult GetImageData(int ID)
{
    ImageData data = DataAccess.GetImageData(ID);
    return Json(data);
}

JavaScript は次のようになります。

function swap(image) {
    var imageID = $(image).data("id");

    $.ajax("/{YourControllerHere}/GetImageData",
    {
        data: JSON.stringify({ ID: imageID }),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            // creating the element to add
            var div = document.createElement("div");
            div.setAttribute("id", imageID);
            $(image).parent().append(div);

            //adding the data here. do this for each data item?
            $("#"+imageID).append(data.details.YOUR_PROPERTY_HERE); 
        }      
        error: function () {
            alert("error!");
        }
    });
}

成功のコールバックには、「data」という名前のパラメーターがあります。これは、コントローラー アクション JsonResult で返されたデータの JavaScript オブジェクト表現です。

于 2013-09-11T15:06:41.890 に答える