如何更新 ASP.NET MVC 中的一个 HTML 元素？答案

【问题标题】：How to update one HTML element in ASP.NET MVC?如何更新 ASP.NET MVC 中的一个 HTML 元素？
【发布时间】：2019-09-07 02:01:34
【问题描述】：

我创建了一个带有 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;
}

我清空了 DIV
我想再次“调用” div 元素，以便 foreach 将创建新的 img 元素。

【问题讨论】：

您将需要编写 JavaScript 以在浏览器中运行以处理用户单击按钮时的情况。 C# 函数只会在页面首次呈现时在服务器端运行。

标签： javascript c# jquery razor-pages

【解决方案1】：

感谢 Brad Patton，但由于某种原因，我无法使用 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

Gallery look

【讨论】：