.NET Framework WebForms无刷新传参加载模态图库图片问题

方案一：使用ASHX处理程序+前端手动渲染（推荐，更灵活） #

由于ASCX控件无法直接暴露WebMethod，可以通过通用处理程序（ASHX）来处理后台数据请求，前端通过AJAX获取数据后手动拼接HTML更新模态框内容。

1. 创建ASHX处理程序 #

新建一个GalleryDetailHandler.ashx文件，负责接收IdMaster参数、调用存储过程并返回JSON格式的图片数据：

public class GalleryDetailHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        string idMaster = context.Request.QueryString["IdMaster"];

        if (!string.IsNullOrWhiteSpace(idMaster))
        {
            // 调用你的存储过程获取图库详情
            var galleryData = CP_GalleryDetail_Get(idMaster);
            // 序列化为JSON返回
            context.Response.Write(new JavaScriptSerializer().Serialize(galleryData));
        }
        else
        {
            context.Response.Write("[]");
        }
    }

    public bool IsReusable => false;
}

2. 前端AJAX请求与内容渲染 #

假设你已经通过data-idmaster属性存储了点击图片的IdMaster，使用jQuery编写AJAX逻辑：

// 绑定图库图片点击事件
$(".gallery-img").on("click", function() {
    const idMaster = $(this).data("idmaster");
    const modalContainer = $("#slider_repeater_active_modal_container"); // 模态框内的内容容器

    $.ajax({
        url: "/GalleryDetailHandler.ashx",
        type: "GET",
        data: { IdMaster: idMaster },
        dataType: "json",
        beforeSend: function() {
            modalContainer.html("<p>加载中...</p>");
        },
        success: function(data) {
            modalContainer.empty();
            // 遍历数据拼接HTML
            data.forEach(item => {
                const slideHtml = `
                    <div class="slide-item">
                        <img src="${item.ImageUrl}" alt="${item.ImageAlt}" />
                        <span>${item.ImageTitle}</span>
                    </div>
                `;
                modalContainer.append(slideHtml);
            });
            // 打开模态框（以Bootstrap模态框为例）
            $("#galleryModal").modal("show");
        },
        error: function() {
            modalContainer.html("<p>加载图片失败，请重试</p>");
        }
    });
});

3. 调整ASCX中的模态框结构 #

将原有的asp:Repeater替换为普通的服务器端容器（或保留Repeater仅用于初始渲染，实际由JS更新）：

<div class="modal fade" id="galleryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="slider_repeater_active_modal_container" runat="server"></div>
            </div>
        </div>
    </div>
</div>

方案二：使用UpdatePanel（适合不想写大量JS的场景） #

利用ASP.NET的UpdatePanel实现局部刷新，通过隐藏按钮触发后台绑定Repeater的逻辑：

1. ASCX中的UpdatePanel结构 #

<asp:UpdatePanel ID="upGalleryDetail" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Repeater ID="slider_repeater_active_modal" runat="server">
            <ItemTemplate>
                <div class="slide-item">
                    <asp:Image ID="imgDetail" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
                    <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("ImageTitle") %>' />
                </div>
            </ItemTemplate>
        </asp:Repeater>
        <!-- 隐藏按钮，用于触发后台绑定逻辑 -->
        <asp:Button ID="btnBindGallery" runat="server" Style="display:none;" OnClick="btnBindGallery_Click" />
    </ContentTemplate>
</asp:UpdatePanel>
<!-- 隐藏域存储当前选中的IdMaster -->
<asp:HiddenField ID="hidSelectedIdMaster" runat="server" />

2. ASCX后台绑定逻辑 #

protected void btnBindGallery_Click(object sender, EventArgs e)
{
    string idMaster = hidSelectedIdMaster.Value;
    if (!string.IsNullOrWhiteSpace(idMaster))
    {
        var galleryData = CP_GalleryDetail_Get(idMaster);
        slider_repeater_active_modal.DataSource = galleryData;
        slider_repeater_active_modal.DataBind();
    }
}

3. 前端触发按钮点击 #

$(".gallery-img").on("click", function() {
    const idMaster = $(this).data("idmaster");
    // 将IdMaster存入隐藏域
    $("#<%= hidSelectedIdMaster.ClientID %>").val(idMaster);
    // 触发隐藏按钮的点击事件，触发UpdatePanel刷新
    $("#<%= btnBindGallery.ClientID %>").click();
    // 打开模态框
    $("#galleryModal").modal("show");
});

内容的提问来源于stack exchange，提问作者Harun Sabban