ASP.NET MVC如何通过父页参数在弹窗内加载详情数据

安全阿岳

2026-8-11

解决Web报表列表按钮点击弹窗加载详情数据问题

我有一个Web报表项目，从数据库读取数据展示为列表。现在遇到问题：列表每行旁的按钮，点击时希望根据当前行的CARI_KOD参数执行SQL查询，并把结果表格展示在弹窗里。我是Web开发新手，之前尝试给按钮加href跳转视图，但页面刷新会让弹窗消失，求帮助。

我当前的代码：

主页面代码

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Aktif Stok Listesi</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Cari Kodu</th>
                            <th>Cari Adı</th>
                            <th>Döviz Türü</th>
                            <th>Borç Toplam</th>
                            <th>Alacak Toplam</th>
                            <th>Bakiye</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var x in Model)
                        {
                            <tr>
                                <td><a id="btnShowModal" type="button" class="btn btn-sm  btn-default pull-left button button4">Detay</a></td>
                                <td>@x.CARI_KOD</td>
                                <td>@x.CARI_ISIM.Replace('Ý', 'İ').Replace('Þ', 'Ş').Replace('Ð', 'Ğ')</td>
                                <td>@x.DOVIZ_TURU</td>
                                <td>@x.BORC_TOPLAM.ToString("F")</td>
                                <td>@x.ALACAK_TOPLAM.ToString("F")</td>
                                <td>@x.BAKIYE.ToString("F")</td>
                            </tr>
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>Cari Kodu</th>
                            <th>Cari Adı</th>
                            <th>Döviz Türü</th>
                            <th>@Model.Sum(x => x.BORC_TOPLAM)</th>
                            <th>@Model.Sum(x => x.ALACAK_TOPLAM)</th>
                            <th>@Model.Sum(x => x.BAKIYE)</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>

弹窗页面代码

<div>
    <fieldset>
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div class="modal fade" tabindex="-1" id="loginModal"
                         data-keyboard="false" data-backdrop="static">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Cari Hareket Kaydı</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        @I want to list the details of the line whose button is pressed on the main page here
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="btnHideModal" class="btn btn-primary button button4">
                                        Kapat
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnShowModal").click(function () {
            $("#loginModal").modal('show');
        });

        $("#btnHideModal").click(function () {
            $("#loginModal").modal('hide');
        });
    });
</script>

Dapper查询代码

public List<CariHareketKaydi> CariHareketKaydi(string id)
{
    var CariHareket = con.Query<CariHareketKaydi>($"select" +
        $" CAS.CARI_ISIM," +
        $" CAH.CARI_KOD," +
        $" CAH.BELGE_NO," +
        $" CAH.ACIKLAMA," +
        $" CAH.BORC," +
        $" CAH.ALACAK," +
        $" CASE CAH.DOVIZ_TURU WHEN '0' THEN 'TL' END AS DOVIZ_TURU" +
        $" from TBLCAHAR CAH LEFT JOIN TBLCASABIT CAS ON CAH.CARI_KOD = CAS.CARI_KOD" +
        $" WHERE CAH.CARI_KOD = '{id}'");
    return CariHareket.ToList();
}

解决方案

1. 修复列表按钮绑定问题

循环生成的按钮不能共用同一个id，否则jQuery只能绑定第一个按钮。改成用class标识，并把当前行的CARI_KOD存入按钮的data属性：

<!-- 替换主页面循环中的按钮代码 -->
<td><a type="button" class="btn btn-sm btn-default pull-left button button4 btn-show-modal" data-cari-kod="@x.CARI_KOD">Detay</a></td>

2. 修复后端SQL注入风险并添加API接口

原代码直接拼接字符串存在SQL注入风险，改成Dapper参数化查询：

public List<CariHareketKaydi> CariHareketKaydi(string id)
{
    var sql = @"select 
        CAS.CARI_ISIM,
        CAH.CARI_KOD,
        CAH.BELGE_NO,
        CAH.ACIKLAMA,
        CAH.BORC,
        CAH.ALACAK,
        CASE CAH.DOVIZ_TURU WHEN '0' THEN 'TL' END AS DOVIZ_TURU
        from TBLCAHAR CAH LEFT JOIN TBLCASABIT CAS ON CAH.CARI_KOD = CAS.CARI_KOD
        WHERE CAH.CARI_KOD = @Id";
    var CariHareket = con.Query<CariHareketKaydi>(sql, new { Id = id });
    return CariHareket.ToList();
}

添加一个接收AJAX请求的接口（以ASP.NET MVC为例）：

public JsonResult GetCariHareket(string cariKod)
{
    var data = yourService.CariHareketKaydi(cariKod);
    return Json(data, JsonRequestBehavior.AllowGet);
}

3. 修改弹窗代码实现AJAX加载数据

先在弹窗的modal-body中添加表格容器：

<div class="modal-body">
    <div id="cariHareketTableContainer">
        <!-- 动态表格将生成在此处 -->
    </div>
</div>

然后修改JavaScript，实现点击按钮后请求数据并生成表格：

$(document).ready(function () {
    // 绑定所有详情按钮点击事件
    $(".btn-show-modal").click(function () {
        var cariKod = $(this).data("cari-kod");
        var modal = $("#loginModal");
        var tableContainer = $("#cariHareketTableContainer");
        
        // 清空旧数据
        tableContainer.empty();
        
        // 发送AJAX请求
        $.ajax({
            url: "/YourController/GetCariHareket", // 替换为你的实际接口路径
            type: "GET",
            data: { cariKod: cariKod },
            success: function (data) {
                if (data.length > 0) {
                    // 生成表格
                    var table = $("<table class='table table-bordered table-striped'>");
                    // 表头
                    var headerRow = $("<tr>")
                        .append("<th>Cari Adı</th>")
                        .append("<th>Cari Kodu</th>")
                        .append("<th>Belge No</th>")
                        .append("<th>Açıklama</th>")
                        .append("<th>Borç</th>")
                        .append("<th>Alacak</th>")
                        .append("<th>Döviz Türü</th>");
                    table.append($("<thead>").append(headerRow));
                    
                    // 表体
                    var tbody = $("<tbody>");
                    $.each(data, function (index, item) {
                        var row = $("<tr>")
                            .append("<td>" + item.CARI_ISIM + "</td>")
                            .append("<td>" + item.CARI_KOD + "</td>")
                            .append("<td>" + item.BELGE_NO + "</td>")
                            .append("<td>" + item.ACIKLAMA + "</td>")
                            .append("<td>" + item.BORC.toFixed(2) + "</td>")
                            .append("<td>" + item.ALACAK.toFixed(2) + "</td>")
                            .append("<td>" + item.DOVIZ_TURU + "</td>");
                        tbody.append(row);
                    });
                    table.append(tbody);
                    
                    tableContainer.append(table);
                } else {
                    tableContainer.append("<p>Bu cari için kayıt bulunamadı.</p>");
                }
                
                // 显示弹窗
                modal.modal('show');
            },
            error: function () {
                alert("Veri yüklenirken bir hata oluştu.");
            }
        });
    });

    $("#btnHideModal").click(function () {
        $("#loginModal").modal('hide');
    });
});

关键注意事项

替换代码中的/YourController/GetCariHareket为实际的控制器和接口路径
确保项目中已正确引入Bootstrap样式，保证弹窗正常显示
若使用ASP.NET Core，无需JsonRequestBehavior.AllowGet，直接返回Json(data)即可

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