javascript - MVC - 在选择缩略图时，显示来自数据库的数据

Question

如果用户选择缩略图显示，我有一个脚本 来 self 的数据库的更大的图像和 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!");
            }
         });
    };

Controller :

  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

似乎有两种选择:

• 在页面加载时在 View 中加载数据并将其隐藏，并让点击事件仅显示数据。
• 进行 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!");
        }
    });
}

成功回调有一个名为“数据”的参数。这是您在 Controller 操作 JsonResult 中返回的数据的 JavaScript 对象表示。