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

似乎有两种选择：

  • 在视图中加载数据并将其隐藏，在页面加载时，让点击事件简单地显示数据。
  • 进行 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 回答