Как открыть частичный вид на основе клика по изображению?

Question

Я пишу тебе, потому что я немного потерян.

Я хотел бы создать страницу, где есть 3 изображения, и каждое изображение кликабельно.

Когда я нажимаю на одно из изображений, на той же странице должно появиться частичное представление.

Если я щелкну другое изображение, все остальные частичные виды должны исчезнуть и отобразить только желаемый частичный вид.

Я узнал, что для вызова частичного представления командная строка должна быть:

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

<div class="container-fluid">
<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" />
        <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" />
        <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" />
        <div class="caption">
            <p>Windows Phone</p>
        </div>
    </div>
</div>

мой частичный переход должен появиться здесь...

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>

вам нужно добавить три тега деления в ваш код тоже.
используйте правильный идентификатор для каждого тега деления, который может быть создан динамически, например "идентификатор вашего изображения" + "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);
    }