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

Question

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

3

基本上，我正在尝试在我的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吗？ - 我需要为Partial View创建一个ViewModel吗？

谢谢

VISHAL的第二次编辑：

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

$("#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

你只是想刷新kendo控件还是整个视图？ - BillRuhl

仅显示已工作时间和合同小时数的部分视图，而非其他内容。 - Cajux94

@Cajux94：移除$(document).ready，并尝试一下。看看我所做的修改。 - Vishal Ravlani

2个回答

2

我写了一篇文章详细阐述为什么需要打破关于部分视图客户端的逻辑思考。如果您感兴趣，可以在这里找到它。

简而言之，客户端只有HTML，没有关于响应中是否渲染了部分视图的信息。因此，真正的问题是“如何根据AJAX响应更改HTML页面的某个部分？”最简单的形式是，您只需选择页面上的某些元素，然后更改其内部HTML。您可以使用客户端创建的自定义HTML来实现这一点，也可以将HTML文档作为AJAX响应传回，然后插入该文档。

- Chris Pratt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vishal Ravlani · Accepted Answer

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

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

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

但是，通过查看您的Partial View，您只是使用了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');
           });
       });