Question

用户刚刚将一些图像上传到服务器后，我将向用户显示这些图像以删除一些不需要的图像。

用户单击删除按钮后，系统确实删除了这些图像，但确实刷新了页面并从页面中擦除了其他想要的图像（但仍退出服务器的文件夹中）。

我希望页面仅删除不需要的文件，并且仅是DIV。请帮忙。

我试图用UpdatePanel包装它们，但从未成功。

这是我的HTML代码。

<asp:ScriptManager ID="scmImages" runat="server" />
<asp:UpdatePanel ID="updImages" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
  <ContentTemplate>
    <div class="row py-2 px-2 my-3 mx-0 border border-secondary rounded" id="divImages" runat="server">
    <div class="col pb-2 border-bottom border-secondary text-center" runat="server">
      <asp:Button ID="btDeleteImage" runat="server" Enabled="false" Text="Delete" CssClass="btn btn-danger px-5" OnClick="BtDeleteImage_Click" />
    </div>
    <div class="w-100"></div>
      <%--Div class 'divImageCol' and it's children will be add from here--%>
    </div>
  </ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btDeleteImage" EventName="Click" />
  </Triggers>
</asp:UpdatePanel>

这就是我显示上载图像的方式。上传的图像将显示在“ divImages”中。

    protected void BtUpload_Click(object sender, EventArgs e)
    {
        try
        {
            if (FuImages.HasFile)
            {
                System.IO.DirectoryInfo dir = new System.IO.DirectoryInfo(Server.MapPath("~/Images/TestFiles/"));
                FileInfo[] serverFiles = dir.GetFiles();
                int highestName = 0;
                if (serverFiles.Length > 0)
                {
                    int countSeverFiles = serverFiles.Length;
                    int i = 0;
                    int[] file = new int[countSeverFiles];
                    foreach (FileInfo fileName in serverFiles)
                    {
                        Int32.TryParse(fileName.Name.Remove(fileName.Name.IndexOf('.')), out file[i]);
                        i++;
                    }
                    highestName = file.Max();
                }
                int countUploadingFiles = FuImages.PostedFiles.Count;
                hdfImagesName.Value = "";
                for (int i = 0; i < countUploadingFiles; i++)
                {
                    string savePath = Server.MapPath("~/Images/TestFiles/");
                    string newFileName = (highestName + i + 1).ToString() + System.IO.Path.GetExtension(FuImages.PostedFiles[i].FileName);
                    savePath += newFileName;
                    hdfImagesName.Value += newFileName + "; ";
                    FuImages.PostedFiles[i].SaveAs(savePath);
                    divImages.Controls.Add(AddImages(newFileName, newFileName));
                }
            }
        }
        catch (Exception err)
        {
            ModelErrorText.InnerHtml = err.ToString();
            ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
        }
    }

    private HtmlGenericControl AddImages(string ID, string ImageFileName)
    {
        HtmlGenericControl divImageCol = new HtmlGenericControl("div");
        HtmlImage dataImage = new HtmlImage();
        HtmlInputCheckBox checkBox = new HtmlInputCheckBox();

        divImageCol.Attributes.Add("class", "col-4 col-md-3 col-lg-2 px-1 my-1 text-center divImageCol");
        divImageCol.Attributes.Add("id", ID);
        divImageCol.Attributes.Add("runat", "server");

        dataImage.Attributes.Add("class", "img-fluid img-thumbnail data-image");
        dataImage.Src = "../Images/TestFiles/" + ImageFileName;

        checkBox.Style.Add("display", "none");

        divImageCol.Controls.Add(dataImage);
        divImageCol.Controls.Add(checkBox);

        return divImageCol;
    }

这是用于删除不需要的图像的代码。

    protected void BtDeleteImage_Click(object sender, EventArgs e)
    {
        string[] files = Regex.Split(hdfImagesToDelete.Value.ToString(), "; ");
        foreach (string f in files)
        {
            if (File.Exists(savePath + f)) File.Delete(savePath + f);
            divImages.Controls.Remove(divImages.FindControl(f));
        }
    }

我希望页面仅删除不需要的文件，并且仅是DIV。请帮忙。

Answer 1

UpdatePanel仅与兼容的控件一起使用。如果要显示/隐藏元素，则必须将它们包装在ASP.NET控件中。

<asp:UpdatePanel ID="updImages" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
        ...
        <asp:Panel id="pnlImages" runat = "server">
            <div class="row py-2 px-2 my-3 mx-0 border border-secondary rounded" id="divImages" runat="server">
        </asp:Panel>
        ...
    </ContentTemplate>
</asp:UpdatePanel>

因此，在后面的代码中显示/隐藏，您可以按其ID访问面板。

pnlImages.Visible = true/false;

Answer 2

最好的解决方案是隐藏div，而不要使用以下方法“删除”她（如@Sebastian所说的）：

f.Visible = false;

如果您确实要删除控件，则需要使用JavaScript或jQuery ...

如何通过单击按钮而不从背后的代码回发来删除按程序添加的DIV？

2 个答案: