Question

如果用户选择缩略图显示我有一个脚本更大的图像和我数据库中的id。

直到这一点，它的效果非常好

我现在尝试做的是当用户点击时缩略图，我想显示我表格中的数据。

我该怎么做？

我的数据库关系：

在我的数据库中，我有2个表，其中一个表有主键另一个是外键。

当我选择表格中的缩略图时主键，我想显示我的其他表中的数据其中包含外键。

我的代码：使用Javascript：

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

HTML以显示thummbnails列表：

@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>

任何sugestions？

提前致谢

UDPATE我的代码：

脚本

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

Answer 1

似乎有两种选择：

在视图中加载数据并在页面加载时将其隐藏，并让click事件只显示数据。
进行AJAX调用以获取click事件所需的数据，并在调用返回时添加数据。

我个人会接受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对象表示。

MVC - 在“选择缩略图”上，显示数据库中的数据

1 个答案: