Question

所以基本上我试图在我的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方法而不是像我一样创建索引？ - 我是否需要为部分视图创建ViewModel？

由于

为VISHAL编辑第2号：

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

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

它说$（＆＃34; #calendar＆＃34;）。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

Answer 1

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

是的，你需要创建。但是，Get也没关系。

我是否需要为部分视图创建ViewModel？不需要。如果需要，您可以创建。

但是，通过查看部分视图，您只是使用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');
           });
       });

Answer 2

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

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

如何在MVC中使用Ajax Post后刷新我的部分视图？

2 个答案: