MVC5：单击按钮（超链接）上的刷新视图？

Question

加载我的MVC5视图时，我在视图上填写了一个下拉列表，并将视图设置为仅显示[verified_date]字段值早于cutoff （默认为3 Months模型记录：

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，以及[Month]，[Day]，[Year]）：

    @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]按钮（超链接）时，我想根据用户指定刷新视图：

脚本 ：

    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);
            }
        })
    }

控制器动作 ：

    [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]按钮（超链接）时，我的函数执行并且我的控制器动作被调用，但是视图不刷新。 发生的所有事情都是返回"Error! Value: undefined | Interval: undefined". 考虑到我什么也不返回，undefined是有意义的，但是为什么View不刷新呢？

Answer 1

$.ajax({不会修改DOM或window.location。它是一个异步请求，因此发生在“幕后”。可以说， 没有导航发生，没有您，页面/ DOM也不会被修改。明确地这样做。

如果要刷新整个页面，则有两个选项。

通过标准href导航

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

<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;

刷新部分页面

如果创建返回部分视图的操作，则可以通过将某些元素的内容替换为返回的内容来刷新页面的一部分：

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

如果请求指向局部视图，则resp将是表示局部视图的HTML片段，我们需要将其片段插入页面中的某个位置，即$('#idOfSomeDiv').html(resp); 确实。

这些方法中的每一个都有很多细微差别，其他地方都对此进行了详尽的介绍，因此我不再赘述。 例如，某些版本的jquery要求您在DOM中设置之前解析响应。 我将留给您进一步研究选择的方法。

Answer 2

您正在将ViewResult返回到Javascript调用。 这不会刷新视图。 更好的选择是使现有的Controller路由HTTP GET，刷新链接将重新使用该HTTP GET，并将在接口中设置的参数作为查询字符串参数传递。

编辑 ：当我之前完成此操作时，我已将HTML从异步路由返回，并将其附加到DOM中。 这是不同的，因为您要替换DOM，但这是相同的基本思想。

这是一些将AJAX检索的HTML附加到页面中的示例Javascript

window.EditableList = function (containerSelector) {
var $container = $(containerSelector);
var $list = $container.find("ol").eq(0);
$container
    .off(".editable-list")
    .on("click.editable-list", "a.add-editor-row", function (e) {
        $.ajax({
            url: e.target.href,
            cache: false,
            success: function (html) {
                $list.append(html);
                ShowHideIcons($("#question-style-dropdown").val());
            }
        });
        return false;
    })
    .on("click.editable-list", "a.delete-editor-row", function (e) {
        $(e.target).parents('li.editor-row').remove();
        return false;
    });
};

样品控制器动作

public ActionResult AddFragment()
{
    var viewModel = new FragmentViewModel(parameters);
    return PartialView("Fragment", viewModel);
}