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

MVC - On Select thumbnail, show data from database

本文关键字：显示 数据库 数据 选择缩略图 选择 略图 MVC      更新时间：2023-09-26

如果用户选择缩略图显示，我有一个脚本 较大的图像和数据库中的 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>

有什么建议吗？

提前致谢

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

似乎有两种选择：

    在
  • 页面加载时在视图中加载数据并将其隐藏，并让 click 事件仅显示数据。
  • 进行 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 对象表示形式。

相关文章：