Question

当我的MVC5视图加载时，我在View上填充DropDown列表，并将View设置为仅显示[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，以及[月]，[日]，[年]）：

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

SCRIPT ：

    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]按钮（超链接）时，我的函数会执行，我的控制器操作会被调用，但View不会刷新。所有这一切都是因为我没有返回任何内容而得到"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，从而导致页面导航到新的网址：

// 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，并将接口中设置的参数作为查询字符串参数传递。

编辑：当我之前完成此操作时，我已经从异步路由返回了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);
}

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

2 个答案: