CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcasp.net-mvc-partialview
newbreaker12
newbreaker12

Reputation: 87

How to open a partial view based on the image click?

I am writing you because I am bit lost.

I would like to create a page where there are 3 images, and each image is clickable.

When I click on one of the images, on the same page it should appear a partial view.

If I click another image, the all other partial views should disappear, and show only the partial view desired.

I have learned that in order to call a partial view the command line should be:

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

my partial via should appear here...

Upvotes: 1

Views: 1522

Answers (1)

Mohaddes Sokhangou
Mohaddes Sokhangou

Reputation: 28

add "onClick" to your img tags that calls a function Like this:

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

you need to add three division tag to your code too.
use proper id for each division tag that can be created dynamically for example "your Image's 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()" function should be like this:

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

in your controller:

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

Upvotes: 1

Related Questions