使用 AJAX Asp.Net MVC 更改页面问题答案

【问题标题】：Issue changing page using AJAX Asp.Net MVC使用 AJAX Asp.Net MVC 更改页面问题
【发布时间】：2018-05-08 10:35:18
【问题描述】：

我希望使用 ASP.NET MVC 向我的家庭控制器发送一个字符串。我正在使用 Ajax 调用来执行此操作，但是在发送字符串时我也需要更改视图。

问题在于，为了改变页面，我们需要在 Ajax 成功处理程序中进行。这导致我们再次调用控制器方法。不过，这一次日期字符串为空，导致出现空异常。我们如何解决这个问题？

我们的 AJAX 调用：

dayClick: function(date) {

            $.ajax({
                url: '/Home/Booking',
                data: {'selectedDate' : date.format()},
                type: "get",
                cache: false,
                success: function (result) {
                    window.location.href = "/Home/Booking"
                },
                error: function (error) {
                    console.log(error.message);
                }
            });

        }

我们的控制器方法：

        public IActionResult Booking(string selectedDate)
    {
        var booking = new Booking();

        DateTime selectedDatetime = DateTime.ParseExact(selectedDate, "yyyy-MM-dd", CultureInfo.CurrentCulture);
        booking.Date = selectedDatetime;

        var viewModel = new BookingsideViewModel
        {
            Subjects = new[] {"Matematik", "Dansk", "Engelsk"},
            Booking = booking
        };


        return View(viewModel);
    }

【问题讨论】：

当你想重定向时进行 ajax 调用简直太疯狂了（你所做的只是调用完全相同的方法两次，并忽略第一个将 html 返回到浏览器的调用，而你从来没有前夕使用（您希望应用程序的性能有多糟糕？）
是的，这看起来有点傻。你建议我们怎么做？
只需进行正常提交（使用带有FormMethod.Get 的表单）。如果您喜欢编写额外的脚本，那么它只是 `dayClick: function(date) { window.location.href = "/Home/Booking?selectedDate=" + date.format(); }
谢谢。我将其更改为 'dayClick: function(date) { window.location.href = "/Home/Booking?selectedDate=" + date.format();'。现在看起来更合乎逻辑

标签： asp.net ajax asp.net-mvc

【解决方案1】：

在成功处理程序中再次调用控制器方法时，我们再次需要使用 url 传递日期

dayClick: function(date) {

        $.ajax({
            url: '/Home/Booking',
            data: {'selectedDate' : date.format()},
            type: "get",
            cache: false,
            success: function (result) {
                window.location.href = "/Home/Booking?selectedDate=" +  date.format();
            },
            error: function (error) {
                console.log(error.message);
            }
        });
    }

【讨论】：

这是愚蠢和低效的，它只是结束发出两个 HTTP 请求（一个 ajax，一个正常），而一个就足够了。 AJAX 调用完全是多余的，它没有做任何有用的事情。只需要“正常”请求（通过 window.location.href 发出）。请参阅斯蒂芬对这个问题的评论，以及哈桑的回答，这更有意义。

【解决方案2】：

您应该将其作为查询参数在 URL 中发送，如下所示：

window.location.href = "/Home/Booking?selectedDate=" + date.format()

【讨论】：