Francesco Bigi Ответов: 1

Как открыть частичное представление на основе клика img?

I am writing you because I a bit lost.

I would like to create a page where there are 3 images, and each images are clickable.
When I click on one of the image, on the same page it should appear a partial view.

If I click another image, the all other partial view 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:
<pre>
@{
   Html.RenderPartial("_Android");
}



Нужно ли мне делать скрипт на JS или я могу сделать мир кода на c#?
Что я должен думать в первую очередь?


Заранее спасибо

Что я уже пробовал:

<pre><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 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 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 alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
            <div class="caption">
                <p>Windows Phone</p>
            </div>
        </div>
    </div>
</div>
<div>
    <br/>
</div>
<div>
<p>
here it should appear my partial view.
</p>
@{
   Html.RenderPartial("_Android");
}
@{
   Html.RenderPartial("iOS");
}
@{
   Html.RenderPartial("_WindowsPhone");
}
</div>

1 Ответов

Рейтинг:
1

debasish mishra

Нагрузка ASP.NET частичные просмотры MVC по ссылке click | dotnetthoughts[^]

Вышеприведенное решение не полностью соответствует вашим требованиям, но, по крайней мере, вы можете узнать, как его реализовать.

Francesco Bigi

На самом деле я пытался выполнить то, что говорит ваша ссылка, но изображение не кликабельно.

    <div class="row">
        <div class="col-md-4">
            <img id="Button1" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
            <div class="caption">
                <div id="Button1">test</div>
                <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>



<div id="output">
    
</div>


<script type="text/javascript">
    jQuery(function ($) {
        $('#Button1').click(function () {
            $.get('@Url.Action("_AndroidView","PartialView")', {}, function (response) {
                $("#output").html(response);
        });
    });
</script>



в этом случае моя кнопка 1 ничего не делает.

[no name]

Ваше изображение должно иметь якорный тег, например 

<a href=""><img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" /></a>


Если вы используете Asp.Net затем также попробуйте кнопку ASP Image

Francesco Bigi

На самом деле я пробовал даже с´

но то, что он делает, - это просто обновляет страницу и ничего больше.
Что я хочу сделать, так это щелкнуть по изображению, и оно покажет мне partialview под моим изображением.

[no name]

Отладьте код javascript и C#, а затем проверьте, не происходит ли чего-то сбоя. Также попробуйте заменить кнопку изображения ссылкой и протестировать