如何在MVC Ajax后刷新我的部分视图

本文关键字：刷新 我的部 视图 Ajax MVC | 更新日期: 2023-09-27 18:04:49

所以基本上我试图在我的MVC应用程序中显示一些配置文件数据。现在，每次我点击我的teleerik 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>

是的，现在我是viewdata，它工作。

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

显示$("#calendar")。kendoccalendar不是一个函数(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

如何在MVC Ajax后刷新我的部分视图

我需要为_WorkingTimeData创建post方法吗?

是的，你需要创建。但是，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');
           });
       });

我写了一篇文章，详细说明了为什么需要打破客户端部分视图的逻辑。如果你感兴趣，你可以在这里找到。

TL;DR版本很简单，客户端只有HTML。不知道通过局部视图呈现或没有呈现给响应的是什么。因此，真正的问题是"如何根据AJAX响应更改HTML页面的一部分?"最简单的形式是选择页面上的某个元素，然后修改其内部HTML。您可以使用客户端创建的自定义HTML来实现这一点，也可以将HTML文档作为AJAX响应返回，然后插入

相关文章：