Question

我当前正在使用.NET Core，并且试图根据我选择的下拉值来过滤HTML表。但是，无论何时选择一个值，它都会刷新页面并将所有内容都设置回原始值。

jQuery代码：

$(function() {
  $("dropdownFilter").change(function(e) {
    var myUrl = "/Home/Filter";
    var filter = JSON.stringify($("#dropdownFilter").val());

    $.ajax({
      type = "POST",
      url: myUrl,
      data: filter,
      contentType: "application/json; charset=utf-8"
    }).done(function(data) {
      window.location.href = data.newUrl;
    });
  });
});

CSHTML代码：

<label for="dropdownFilter">Filter:</label>
<select id="dropdownFilter">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

控制器代码：

public JsonResult Filter([FromBody] string filterString){
    SampleModel sample = GetDataByFilter(filterString);
    return Json(new {newUrl = Url.Action("Index", "Home", sample);
}

Answer 1

我试图根据我选择的下拉值来过滤HTML表。但是，无论何时选择一个值，它都会刷新页面并将所有内容都设置回原始值。

根据您提供的成功回调函数中的代码，代码段window.location.href = data.newUrl将进行重定向，从而导致页面刷新。

如果您要根据javascript客户端上选定的下拉列表值过滤HTML表，可以尝试使API操作Filter([FromBody] string filterString)返回过滤后的数据sample而不是网址信息，这样在ajax成功回调函数中，您将获取过滤后的数据，然后动态生成/重新填充html表以显示过滤后的数据。

根据下拉值过滤html表

1 个答案: