Question

我正在使用ajax，使用从下拉列表发送到控制器的参数刷新页面。由于某种原因，该页面仅刷新一次，并且下拉列表变得无用，直到我从浏览器手动刷新页面为止。在控制器中，我使用switch语句，具体取决于发送的参数以调用Couchbase服务器以检索数据库项。如何使用下拉列表使页面刷新一次以上？

//查看

@model List<Merchandise>
@{
    ViewData["Title"] = "Variant Summary";
}

<body class="variant" id="load">

    <div class="pageMain">
        <div class="variant-page">
            <div class="container-variant">
                <header>
                    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-dark ">
                        <div class="container">
                            <h3>
                                <img src="~/images/3bars_menu_header.png" /> Variant Summary
                            </h3>
                            <div id="merchTicker">
                                <div class="inner">
                                    <ul position="absolute"></ul>
                                </div>
                            </div>

                            @Html.DropDownList("Countries", new SelectList(Enum.GetValues(typeof(Countries))), new { @id = "countrylist" })

                            @section Scripts
                                {
                                <script type="text/javascript">

                                        $("#countrylist").change(function () {
                                        var select = $("#countrylist").val();
                                        $.ajax({
                                            type: "get",
                                            url: '@Url.Action("Merchandise", "Home")' + "/" + select,
                                            data: {'selCountry' : select},
                                            success: function (data) {
                                                $('.variant').html(data);
                                            }
                                        });
                                        });

                                </script>
                            }
                        </div>
                    </nav>
                </header>

            </div>
            <table class="merchTable">
                <tr>
                    <th width="75px">SEQ</th>
                    <th width="125px">Item ID</th>
                    <th width="700px">Description</th>
                    <th width="90px">Sold</th>
                    <th width="90px">Sold Today</th>
                    <th width="90px">AFS</th>
                    <th width="65px">P Mins</th>
                    <th width="65px">A Mins</th>
                </tr>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.PlanSeqId</td>
                        <td>@item.ItemId</td>
                        <td>@item.ItemDescription</td>
                        <td align="right">@item.OrderQuantity</td>
                        <td align="right">@item.OrderSldTdy</td>
                        <td align="right">@item.AvaiForSaleQty</td>
                        <td align="right">@item.PlannedMinutesQty</td>
                        <td align="right">@item.ActualMinutesQty</td>
                    </tr>
                }
            </table>
        </div>
    </div>    
</body>

//控制器方法

public IActionResult Merchandise(Countries selCountry)
        {          
            switch (selCountry)
            {
                case Countries.USA:
                    var bucket = _bucketProvider.GetBucket("MerchUSA");
                    var n1ql = @"SELECT g.*, META(g).id
                                FROM `MerchUSA` g
                                WHERE g.CompanyId = 0
                                LIMIT 20;";
                    var query = QueryRequest.Create(n1ql);
                    var results = bucket.Query<Merchandise>(query);
                    UpdateMerchSold(results.Rows);
                    return View(results.Rows);
                case Countries.EUR:
                    var bucket2 = _bucketProvider.GetBucket("MerchEUR");
                    var n1ql2 = @"SELECT g.*, META(g).id
                                FROM `MerchEUR` g
                                WHERE g.CompanyId = 1
                                LIMIT 20;";
                    var query2 = QueryRequest.Create(n1ql2);
                    var results2 = bucket2.Query<Merchandise>(query2);
                    UpdateMerchSold(results2.Rows);
                    return View(results2.Rows);
                case Countries.JPN:
                    var bucket3 = _bucketProvider.GetBucket("MerchJPN");
                    var n1ql3 = @"SELECT g.*, META(g).id
                                FROM `MerchJPN` g
                                WHERE g.CompanyId = 2;
                                LIMIT 20;";
                    var query3 = QueryRequest.Create(n1ql3);
                    var results3 = bucket3.Query<Merchandise>(query3);
                    UpdateMerchSold(results3.Rows);
                    return View(results3.Rows);
            }
            return View();
        }

我仍在学习ajax，因此，感谢您的任何帮助。

Answer 1

您需要重新绑定click事件。您将替换包括选择列表在内的所有html。这导致它丢失其事件侦听器。

我还建议将脚本部分从html的中间移出，并将其放到底部。更容易阅读。

页面仅从下拉列表选择中刷新一次

1 个答案: