Javascript 如何基于图像单击打开局部视图？

我写信给你是因为我有点迷路了

我想创建一个页面，其中有3个图像，每个图像是可点击的

当我点击其中一张图片时，在同一页上，它应该显示为局部视图

如果单击其他图像，则所有其他局部视图应消失，并仅显示所需的局部视图

我了解到，为了调用局部视图，命令行应该是：

@{
Html.RenderPartial（“_Android”）；
}

MDM区段
.缩略图类可用于显示图像库

.caption类为缩略图中的文本添加适当的填充和深灰色

点击图片查看所有问答

安卓

iOS

Windows Phone

我的部分via应该出现在这里…在调用函数的img标签中添加“onClick” 像这样：

<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text 
inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
    <div class="col-md-4">
    <img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('imgReloader')" />
    <div class="caption">
        <p>Android</p>
    </div>
</div>
<div class="col-md-4">
    <img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image2')" />
    <div class="caption">
        <p>iOS</p>
    </div>
</div>
<div class="col-md-4">
    <img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image3')" />
    <div class="caption">
        <p>Windows Phone</p>
    </div>
</div>

---

您需要触发对服务器的请求以呈现相关的局部视图。您可以通过完整回发（向服务器传递一些参数，指示在重新呈现整个视图时应该呈现哪个视图）来完成此操作，或者触发ajax请求来专门下载部分的HTML并将其插入页面中的正确位置，这可能更好。很确定你已经可以在网上找到这方面的例子了。您只需要从附加到图像的JS“click”事件处理程序触发它。实际上，我尝试做的是：

jQuery（函数（$）{$（'#imgReloader'）。单击（函数（）{$.get（'@Url.Action（''u AndroidView'，PartialView'），{}，函数（响应）{$（“#输出”）.html（回答）；}）；}）
结果是什么？乍一看，它或多或少都是正确的。但它只对您的一个图像标签有效。另外，请将该代码放入问题中，当它放在评论中时，它不是很清楚或可读。问题是，当我执行我的网站，并尝试单击图像时，什么都没有发生。没有错误消息。我检查_Layout.cshtml jquery
@Scripts.Render（“~/bundles/jquery”）
的引用是正确的。我甚至更新了nuget软件包。是的，我确实在尝试只使用一个图像进行测试。我还测试了在没有脚本的情况下clal我的部分视图：
@Html.partial（~/Views/PartialView/\u AndroidView.cshtml”）
它工作正常。因此我一直在使用jquery脚本。您是否在浏览器工具中调试了？检查是否触发了事件，检查是否发生了ajax调用，以及收到了什么响应/错误（如果有）。我无法为您调试。正如我所说，代码表面上看起来不错，但显然有些地方不正确。只有您可以检查代码实际运行时会发生什么情况。您仍然没有将示例代码移动到问题中-请使用编辑功能来执行此操作，谢谢。您好Mohaddes Sokhangou，非常感谢您的帮助：）
<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text 
inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
    <div class="col-md-4">
    <img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('imgReloader')" />
    <div class="caption">
        <p>Android</p>
    </div>
</div>
<div class="col-md-4">
    <img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image2')" />
    <div class="caption">
        <p>iOS</p>
    </div>
</div>
<div class="col-md-4">
    <img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image3')" />
    <div class="caption">
        <p>Windows Phone</p>
    </div>
</div>

<div id="imgReloaderDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
<div id="image2Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV  " style="display: none;"> </div>
<div id="image3Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV  " style="display: none;"> </div>

<script>
function ShowPartial(ImgID) {
    $.ajax({
            cache: false,
            type: "Get",
            contentType: 'application/json',
            url: "@Url.Action("GetPartial", "your controller")",
          // send your data
            data: { firstData: "FirstValue", secondData: "SecondValue" },
            success: function (data) {
                $(".IMGDIV").slideUp();
                $("#" + ImgID + "Div").html(data);
                $("#" + ImgID + "Div").slideDown("slow");
            },
            error: function (xhr, ajaxOptions, thrownError, data) {
                alert(xhr.responseText);
            }

        });

}
</script>

public ActionResult GetPartial(string firstData, string secondData)
    {
       //write needed codes
        return PartialView("_Android", model);
    }