如何通过 jQuery ajax 更新 ASP.NET MVC ViewData？

Question

我有一个高度依赖于我在 ViewData 中传递的 IList（在 ActionResult“MyEvents”中）的页面。类似的东西：ViewData["events"] = listOfEvents; 最后，我只是 return View();

在我的视图中，我使用这个 ViewData["events"] 并在其中执行一个 foreach，这样我就可以遍历它的内容。

但是，这个 ViewData 必须是动态填充的。因此，当我单击某一天（我使用的是 jQuery DatePicker）时，这一天作为参数发送到“MyEvents”，这一天对于我的 listOfEvents 将非常重要，它将填充我的 ViewData["events"]。

但是，我得到的结果是包含我的 foreach 的 div 在其中创建了另一个完整的页面！我尝试过 $("#myDiv").html(contentFromMyEvents)，结果就是这样。

只是为了测试，我也尝试过 $("#myDiv").text(contentFromMyEvents) 并且整个 html 代码及其所有标签和我页面中的所有其他内容都出现在里面div！这是一个页面中的页面！

所以，我认为这是因为我正在返回“return View();”，当然它会再次渲染我的整个视图。

那么，我怎样才能只传递 ViewData["events"] 并在我的页面上更新它？？

谢谢！！

Answer 1

查看 jQuery(http://docs.jquery.com/Ajax/load) 中的加载函数。用 load 调用你的控制器，然后将结果注入到你的 html 文档中。

$("myDiv").load("/Controller/Action");

您的 ViewData 将在服务器端进行解析。不是返回 View()，而是返回一个指向用户控件的 PartialView()。然后出来的只是一个 HTML 片段。

Answer 2

您可以使用部分渲染，也可以让 jquery 从返回值中选择元素。

$("#myDiv").empty().append($(contentFromMyEvents).find('#myDiv'));

另外，请记住，如果您有任何日期选择器或链接需要在此处进行事件，您可能需要重新绑定它们。

Answer 3

您应该考虑以JSON 来回传递数据。

然后使用 jQuery/Javascript 来操作和格式化您认为合适的数据。

请记住，一旦页面在客户端上，客户端的浏览器就不知道 ViewData 是什么。

编辑： 操作代码：

public ActionResult AjaxGetEvents(int id)
{
    IList<object> events = new List<object>();
    foreach( Event event in SomeMethodToGetEvents(id) )
    {
       events.Add( new { Property1 = event.Property1, Property2 = event.Property2 } );
    }
    return JSON(events);
}

客户端代码：

var url = "some url that returns JSON";
jQuery.getJSON( url, function(data){
    jQuery.each( data ){
        jQuery("#someDiv").append( data.Property1 + " " + data.Property2 "<br/>" );
    });
 });