javascript - MVC5 : Refresh View on button (hyperlink) click?

Question

当我的 MVC5 View 加载时，我正在填充 View 上的下拉列表，并将 View 设置为仅显示 [verified_date] 字段值早于 的模型记录截止，默认3个月:

private InventoryTrackerContext db = new InventoryTrackerContext();

    // GET: VerifyAssets
    public async Task<ActionResult> Index()
    {
        List<SelectListItem> intervalList = new List<SelectListItem>();
        intervalList.Add(new SelectListItem { Text = "Month", Value = "Month" });
        intervalList.Add(new SelectListItem { Text = "Day", Value = "Day" });
        intervalList.Add(new SelectListItem { Text = "Year", Value = "Year" });
        var cutoffDate = DateTime.Now.AddMonths(-3);
        var iNV_Assets = db.INV_Assets.Where(i => i.verified_date < cutoffDate).Include(i => i.Location).Include(i => i.Manufacturer).Include(i => i.Model).Include(i => i.Status).Include(i => i.Type).Include(i => i.Vendor);
        ViewBag.intervalList = intervalList;
        return View(await iNV_Assets.ToListAsync());
    }

现在我正在尝试实现的是，允许用户指定间隔值和间隔设置(值 1-31 和 [月]、[日]、[年]):

    @Html.DropDownList("NumberValueSelection", Enumerable.Range(1, 31).Select(x => new SelectListItem { Text = x.ToString(), Value = x.ToString() }))
    @Html.DropDownList("intervalList")
    <a href="#" class="btn btn-info btn-sm noDecoration" onclick="newCutoffDate()"><span class="glyphicon glyphicon-refresh"> REFRESH</span></a>

当用户单击[REFERSH]按钮(超链接)时，我想根据用户规范刷新 View :

脚本:

    function newCutoffDate() {
        var _value = document.getElementById("NumberValueSelection").value;
        var _interval = document.getElementById("intervalList").value;
        var data = { value: _value, interval: _interval };
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: '@Url.Action("NewCutoffDateInterval", "VerifyAssets")',
            data: data,
            success: function (resp) {
                alert("Sucess! Value: " + resp.value + " | Interval: " + resp.interval);
            },
            error: function (resp) {
                alert("Error! Value: " + resp.value + " | Interval: " + resp.interval);
            }
        })
    }

Controller 操作:

    [HttpPost]
    public async Task<ActionResult> NewCutoffDateInterval(int value, string interval)
    {
        var cutoffDate = DateTime.Now.AddMonths(-3);
        if (interval == "Month")
        {
            cutoffDate = DateTime.Now.AddMonths(-value);
        }
        else
        {
            if (interval == "Day")
            {
                cutoffDate = DateTime.Now.AddDays(-value);
            }
            else
            {
                if (interval == "Year")
                {
                    cutoffDate = DateTime.Now.AddYears(-value);
                }
            }
        }

        var iNV_Assets = db.INV_Assets.Where(i => i.verified_date < cutoffDate).Include(i => i.Location).Include(i => i.Manufacturer).Include(i => i.Model).Include(i => i.Status).Include(i => i.Type).Include(i => i.Vendor);
        return View(await iNV_Assets.ToListAsync());
    }

但是这不起作用。当我单击 [REFRESH] 按钮(超链接)时，我的函数将执行，并且我的 Controller 操作将被调用，但 View 不会刷新。所发生的一切是我得到 "Error! Value: undefined | Interval: undefined".undefined` 的返回，考虑到我没有返回任何内容，但为什么 View 不刷新？

Answer 1

$.ajax({不修改 DOM 也不修改 window.location。这是一个异步请求，因此可以说是在“幕后”发生的。 不会发生任何导航，并且如果您没有明确执行此操作，则不会修改页面/DOM。

如果您希望刷新整个页面，您有几个选择。

通过标准 href 导航

使您的链接指向有效的 href因此，当用户单击它时，他们将被导航。当用户修改选择时使用 javascript 来修改 href将参数编码为查询字符串值。只需将 URL 指向同一页面即可获得“刷新”效果，但当用户在点击刷新之前进行选择时，会动态更新 href。当用户单击链接时， Controller 应该解析参数，并返回应用了新过滤器的同一页面。

<a href='/VerifyAssets/NewCutoffDateInterval?someParameter=someValue'>Refresh</a>

通过 window.location 导航

留住你<a>照原样，但修改您的 JavaScript，以便您不发出 ajax 请求，而是按照上述方式构建 URL，并将其设置为 window.location，从而使页面导航到新 URL:

// assume you build part after ? dynamically
var url = '/VerifyAssets/NewCutoffDateInterval?someParameter=someValue';
window.location.href = url;

刷新部分页面

如果您创建返回部分 View 的操作，则可以通过用返回的内容替换某些元素的内容来刷新页面的一部分:

   success: function (resp) {
           $('#idOfSomeDiv').html(resp); // replace contents with returned
   },

如果请求指向部分 View ，则 resp将是代表部分 View 的 HTML 片段，我们需要将其插入到页面上的某个位置，这就是 $('#idOfSomeDiv').html(resp);确实如此。

每种方法都有很多细微差别，这些细微差别已在其他地方详细介绍过，因此我不打算深入讨论。例如，某些版本的 jquery 要求您先解析响应，然后再将其设置到 DOM 中。我将让您进一步研究您选择的方法。