c# - 如何在 MVC 中的 Ajax 发布后刷新我的局部 View ？

Question

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

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

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

Controller

    [HttpPost]
    public ActionResult Index(string number){

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

嗯，我对此很陌生，而且我一直在做我的研究。但是我还有一些问题:- 我是否需要像我一样为 _WorkingTimeData 而不是 Index 创建一个 post 方法？- 我是否需要为局部 View 创建一个 ViewModel？

谢谢

为 VISHAL 编辑编号 2:

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

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

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

至于这个，它到达了 Controller 但没有更新任何东西:

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

我认为是因为profile-timeline...在我看来是一个div

Answer 1

我是否需要为 _WorkingTimeData 创建一个 post 方法？

是的，你需要创造。但是，Get 也可以。

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

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

只需在 Controller 中创建一个返回 _WorkingTimeData PartialView 的方法。并通过 JQuery ajax 在您的 DatePicker 更改事件上调用该方法并替换 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');
           });
       });