Как обновить один элемент HTML в ASP.NET MVC? - PullRequest
Новая
       9

Как обновить один элемент HTML в ASP.NET MVC?

0 голосов
/ 17 апреля 2019

Я создал галерею изображений с плагином Unite Gallery JQuery, и я хотел бы изменить его содержимое (изображения).Поэтому, если кто-то нажмет кнопку с изображением, он установит новый путь к каталогу и загрузит из него изображения.Возможно ли это, или у вас есть другие идеи о том, как это сделать?Спасибо. 

<div class="galleryDiv">
    <div id="gallery" style="display:none;">
        @{dir = new DirectoryInfo(Server.MapPath(Url.Content(path)));}
        @foreach (var file in dir.GetFiles())
        {

            <img alt="@file.Name" src="@Url.Content(path + file.Name)"
                 data-image="@Url.Content(realImagePath + file.Name)"
                 data-description="@file.Name">
        }
    </div>
</div>

function allBtnClick()
    {
        @{
                setDirectoryPath("~/Content/images/", "~/Content/images/"); }}

@functions
{
DirectoryInfo dir;
string path = "~/Gallery_images/thumbs/";
string realImagePath = "~/Gallery_images/originalImages/";
public void setDirectoryPath(string directoryPath, string realImageDPath)
{
    path = directoryPath;
    realImagePath = realImageDPath;
}
  1. Я опустошил DIV
  2. Я хотел бы снова "вызвать" элемент div, чтобы foreach создал новые элементы img.

1 Ответ

0 голосов
/ 25 апреля 2019

Спасибо Брэду Паттону, но по какой-то причине я не смог получить изображения из папки с javascript. В конце я создал вкладки начальной загрузки для каждого раздела изображения, куда я загружал изображения из разных папок, а затем вызвал функцию .unitegallery для всех галерей, и это сработало! Я не знаю, есть ли лучшее решение, но пока все хорошо. Конечно, я буду рад, если кто-то найдет лучшее решение и поделится им здесь. 

<div class="tabbable">
                <ul class="nav nav-tabs text-center">
                    <li class="active col-xs-4 col-md-2"><a href="#allImages" data-toggle="tab"><img src="~/Content/images/allWork.svg" class="img=responsive"></a></li>
                    <li class="col-xs-4 col-md-2"><a href="#art" data-toggle="tab"><img src="~/Content/images/art.svg" class="img=responsive"></a></li>
                    <li class="col-xs-4 col-md-2"><a href="#design" data-toggle="tab"><img src="~/Content/images/animations.svg" class="img=responsive"></a></li>
                    <li class="col-xs-4 col-md-2"><a href="#video" data-toggle="tab"><img src="~/Content/images/animations.svg" class="img=responsive"></a></li>
                    <li class="col-xs-4 col-md-2"><a href="#products" data-toggle="tab"><img src="~/Content/images/pictures.svg" class="img=responsive"></a></li>
                    <li class="col-xs-4 col-md-2"><a href="#animations" data-toggle="tab"><img src="~/Content/images/animations.svg" class="img=responsive"></a></li>

                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="allImages">
                        <div id="gallery" style="display:none;">
                            @{ setDirectoryPath("~/Gallery_images/picture_thumbs/", "~/Gallery_images/pictures/");
                                dir = new DirectoryInfo(Server.MapPath(Url.Content(path)));}
                            @foreach (var file in dir.GetFiles())
                            {
                                <img alt="@file.Name" src="@Url.Content(path + file.Name)"
                                     data-image="@Url.Content(realImagePath + file.Name)"
                                     data-description="@file.Name">
                            }
                            @{ setDirectoryPath("~/Gallery_images/art_thumbs/", "~/Gallery_images/art/");
                                dir = new DirectoryInfo(Server.MapPath(Url.Content(path)));}
                            @foreach (var file in dir.GetFiles())
                            {
                                <img alt="@file.Name" src="@Url.Content(path + file.Name)"
                                     data-image="@Url.Content(realImagePath + file.Name)"
                                     data-description="@file.Name">
                            }
                        </div>
                    </div>
                    <div class="tab-pane" id="art">
                        <div id="gallery1" style="display:none;">
                            @{ setDirectoryPath("~/Gallery_images/art_thumbs/", "~/Gallery_images/art/");
                                dir = new DirectoryInfo(Server.MapPath(Url.Content(path)));}
                            @foreach (var file in dir.GetFiles())
                            {
                                <img alt="@file.Name" src="@Url.Content(path + file.Name)"
                                     data-image="@Url.Content(realImagePath + file.Name)"
                                     data-description="@file.Name">
                            }
                        </div>
                    </div>

. , . 

function loadGallery(galleryID) {
$(galleryID).unitegallery({

    gallery_theme: "tiles",
    tiles_type: "nested",
    gallery_width: "100%",              //gallery width
    gallery_min_width: 150, //gallery minimal width when resizing
    gallery_background_color: "#000000",        //set custom background color. If not set it will be taken from css.

});//min columns - for mobile size, for 1 column, type 1

Галерея посмотреть

...