如何在 MVC 中的 Ajax 发布后刷新我的部分视图？答案

【问题标题】：How to refresh my Partial View after Ajax Post in MVC?如何在 MVC 中的 Ajax 发布后刷新我的部分视图？
【发布时间】：2015-07-27 14:22:01
【问题描述】：

所以基本上我试图在我的 MVC 应用程序中显示一些配置文件数据。现在，每次我在 Telerik Kendo 日历上点击一个日期，我都可以刷新整个页面并更新我想要的数据。

但是，我不想刷新整体，我只想刷新仅显示选择日期后更新的数据的部分视图。

Index.cshtml

<!--CODE-->
  @Html.Partial("_WorkingTimeData")
<!--CODE-->

_WorkingTimeData.cshtml

 var workedTime = ViewData["WorkedTimeToday"];
 var hoursPerDay = ViewData["HoursPerDayContract"];

    <p>You worked @workedTime hours</p>
    <p>Hours Per Day (Contract) @hoursPerDay Hours</p>

是的，现在我是 ViewDatas，它可以工作。

这是Index.cshtml中的ajax代码

  $.ajax({ url: '/Profile/Index',
                            dataType: "json", 
                            type: "POST", 
                            data: JSON.stringify(10), 
                            success: function(returl){ 
                                alert('It worked'); 
                                location.href=returl.Url;
                            }, 
                            error: function(jqXHR,responseText,textStatus){ alert(jqXHR.responseText) } });

控制器

    [HttpPost]
    public ActionResult Index(string number){

        //THINGS TO DO
        var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "Profile");
        return Json(new { Url = redirectUrl });
    }

嗯，我对此很陌生，我一直在做我的研究。但是我仍然有一些问题： - 我需要为 _WorkingTimeData 创建一个 post 方法，而不是像我那样创建 Index 吗？ - 我需要为局部视图创建一个 ViewModel 吗？

谢谢

为 VISHAL 编辑 2 号：

这根本不起作用，甚至没有警报，因为奇怪的是，它不识别日历......

$("#calendar").kendoCalendar({
                        change : function() {
                            $.ajax({
                                url: "/Profile/WorkingTimeData",
                                type: "get"
                            }).done(function(data) {
                                $("#profile-timeline").html(data);
                            });
                        }});

它说 $("#calendar").kendoCalendar 不是函数（Telerik 说是这样）

至于这个，它到达了控制器但没有更新任何东西：

 function change() {
                        alert("Escolheste outro dia");
                        var calendar = $("#calendar").data("kendoCalendar");
                        var current = calendar.current();
                        alert(current);
                                    $.ajax({
                                        url: "/Profile/WorkingTimeData",
                                        type: "get"
                                    }).done(function(data) {
                                        $("#profile-timeline").html(data);
                                    });
                                }

我认为这是因为配置文件时间线...在我看来这是一个 div

【问题讨论】：

你只是想刷新剑道控件还是整个视图？
这些都不是。只是显示工作时间和合同工时的局部视图。
@Cajux94：删除 $(document).ready。然后尝试。查看我的编辑。

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

我需要为_WorkingTimeData 创建一个发布方法吗？

是的，您需要创建。但是，Get 也可以。

我需要为局部视图创建一个ViewModel 吗？并不需要。如果需要，您可以创建。

但是，通过查看您的局部视图，您只是在使用ViewData[""]。因此，您无需创建任何ViewModel。

只需在Controller 中创建一个方法，返回_WorkingTimeData PartialView。并在 DatePicker 更改事件上通过 JQuery ajax 调用该方法并替换 Div 的内容。

例如。 Controller

public PartialViewResult WorkingTimeData()
{
    ViewData["WorkedTimeToday"]="NEW VALUE";
    ViewData["HoursPerDayContract"] = "NEW VALUE";
    return this.PartialView("_WorkingTimeData");
}

JavaScript

       $("DATEPICKERELEMENT").change(function() {
           $.ajax({
               url: "/CONTROLLER/WorkingTimeData",
               type: "get"
           }).done(function(data) {
               alert(data);
               $("#divisionIdContainingPartialView").html(data);
           }).fail(function() {
               alert('error');
           });
       });

【讨论】：

看我上面的编辑，因为我不能在这里评论代码 x)
@Cajux94：请贴出控制器 WorkingTimeData 方法代码。你从 ajax 调用中得到了什么响应。并确保部分视图位于 profile-timeline div 中。
控制器方法和你给我的一样。部分视图位于配置文件时间线 div 中，已得到确认。至于回报，我猜它会返回它应该返回的东西......
@Cajux94：检查我的编辑。并查看 ajax 调用是否抛出任何错误或成功。
它正在工作...我输入代码时出错...忘记了它是html（数据）并且我只有html...哈哈哈，有时程序员最愚蠢错误并需要更长的时间来解决它们...感谢您的帮助和耐心x）

【解决方案2】：

我写了一篇文章，详细说明了为什么您需要打破考虑客户端部分视图的逻辑。有兴趣可以找here。

TL;DR 版本很简单，客户端只有 HTML。不知道通过局部视图呈现或未呈现给响应的内容。因此，真正的问题是“如何根据 AJAX 响应更改我的 HTML 页面的一部分？”。在最简单的形式中，您只需选择页面上的某个元素，然后更改其内部 HTML。您可以使用一些在客户端创建的自定义 HTML 来做到这一点，或者您实际上可以将 HTML 文档作为 AJAX 响应传回，然后将其插入。

【讨论】：