动态Div中按钮通过AJAX调用C#后端方法失败求助

问题原因 #

1. ID重复冲突：页面存在多个id="btnEmail"的按钮，HTML规范要求ID必须唯一，jQuery通过ID选择器只会绑定第一个匹配元素，导致模态框内的按钮无法触发事件。
2. 事件绑定局限性：原代码仅在页面加载时绑定静态元素的事件，重复ID导致事件未覆盖到模态框内的按钮。

解决步骤 #

1. 替换重复ID为类标识 #

将所有发送邮件按钮的id="btnEmail"改为class="btnEmail"，避免ID冲突：

• 静态按钮：<input type="button" class="btnEmail" value="Send email">
• 模态框内按钮：<input type="button" class="btnEmail" value="Send email">

2. 修改事件绑定逻辑 #

使用事件委托绑定点击事件，确保所有.btnEmail按钮（包括模态框内的）都能触发AJAX请求，这种方式也适配后续动态生成的元素。

3. （可选）传递当前产品ID #

模态框展示的是具体产品，可将产品ID随请求发送到后端，方便针对对应产品处理业务逻辑。

修改后的完整代码 #

Index.cshtml #

@page
@model SiLoHayProducts.Pages.IndexModel
@{
}
<input type="button" class="btnEmail" value="Send email">
<br />
@Html.AntiForgeryToken()
<div id="productsContainer">
    @foreach (var product in Model.availableProducts)
    {
        <div style="float: left;display: inline-block;">
            <div style="height: 280px">
                <button class="openProductModal" data-product-id="@product.ProductId" data-imageurl="@product.ImageUrl">
                    <img src="@product.ImageUrl" width="260" style="padding: 10px">
                </button>
            </div>
        </div>
    }
</div>

<div id="modal_dialog" style="display: none">
        <span id="name"></span>
        <img id='imageurl' width="150" >
        product-id: <span id="product-id"></span>
        <input type="button" class="btnEmail" value="Send email">
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script type="text/javascript">
        $(document).ready(function () {
            // 事件委托绑定所有.btnEmail按钮
            $(document).on('click', '.btnEmail', function () {
                // 获取模态框中的产品ID（如果是模态框内的按钮）
                var productId = $('#product-id').text();
                var requestData = {};
                if (productId) {
                    requestData.productId = productId;
                }

                $.ajax({
                    type: "POST",
                    url: "/Index?handler=Send",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(requestData),
                    success: function (response) {
                        alert("请求成功：" + response);
                    },
                    error: function (xhr, status, error) {
                        alert("请求失败：" + error);
                    }
                });
            });
        });
    </script>

    <script type="text/javascript">
        $("#productsContainer").on("click", ".openProductModal", function() {
        $(".ui-dialog-titlebar").hide();
          var productId = $(this).data("product-id");
          var imageurl = $(this).data("imageurl");
          $('#imageurl').attr('src',imageurl);
          $("#product-id").text(productId);
          $("#modal_dialog").dialog({
            buttons: {
              Close: function() {
                $(this).dialog('close');
              }
            },
            modal: true,
            width: "500px"
          });
        });
    </script>
}

Index.cshtml.cs #

namespace Products.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public List<Product> availableProducts = new List<Product>();

        public void OnGet()
        {
            Product products = new Product();
            availableProducts = products.GetProducts();
        }

        // 接收前端传递的产品ID（可选）
        public IActionResult OnPostSend([FromBody] dynamic data)
        {
            string productId = data?.productId;
            // 此处添加业务逻辑，比如根据productId发送邮件
            decimal? value1 = null;  

            // 返回响应给前端
            return new JsonResult("处理完成，产品ID：" + productId);
        }
    }
}

关键说明 #

• ID唯一性：始终保证页面元素ID唯一，重复ID会引发DOM选择、事件绑定等一系列问题。
• 事件委托优势：$(document).on('click', '.btnEmail', ...) 监听整个文档的点击事件，匹配所有.btnEmail元素，即使元素是后续动态生成的也能生效。
• 防伪令牌：Razor页面POST请求必须携带防伪令牌，原代码中的beforeSend逻辑正确，需保留。

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