Question

我写信给你是因为我有点失落。

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

当我点击其中一个图像时，在同一页面上它应该显示为局部视图。

如果我点击其他图像，则所有其他部分视图应该消失，并仅显示所需的部分视图。

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

photo_id

@{
   Html.RenderPartial("_Android");
}

我的部分通道应该出现在这里......

Answer 1

将“onClick”添加到调用函数的img标记中像这样：

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

您还需要在代码中添加三个分区标记为每个可以动态创建的分区标记使用正确的id 例如“您的图像ID”+“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>

“ShowPartial（）”功能应如下所示：

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

如何根据图像点击打开局部视图？

1 个答案: