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

Posted 2023-04-13

【中文标题】如何通过 jQuery ajax 更新 ASP.NET MVC ViewData？

【英文标题】：How can I update a ASP.NET MVC ViewData via jQuery ajax?

【发布时间】：2010-10-07 01:02:44

【问题描述】：

我有一个高度依赖于我在 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"] 并在我的页面上更新它？？

谢谢！！

【参考方案1】：

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

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

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

【讨论】：

这种方式可行，但我个人认为通过管道发送 html 是一种不好的做法。

同意。我认为在某些情况下我的例子可能是可以接受的。为了完整起见，我只是提供了它。

再想一想，最近当我需要将现有的输入表单内联到另一个表单时，我使用了这种技术。表单布局已经在另一个视图中，我只需要一个具有相同 GUI 的模式来实现“快速添加”功能。

谢谢乔希！我只是稍微修改了你告诉我的内容，但我使用了你的大部分提示！也谢谢你，凯利！

【参考方案2】：

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

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

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

【参考方案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/>" );
    );
 );     

【讨论】：

Kelly，我在一天的时候这样做：$.ajax( url: 'Admin/Schedule/MyEvents/?data=' + date, type: 'GET', success ：函数（内容）$（“#myDiv”）.html（内容））；是这样的。问题是“return View();” （在我的 ActionResult 中）是（继续...）

(continuing...) 将我的整个页面返回到“成功” $.ajax 选项。我想我必须在我的 ActionResult 中返回任何其他类型的数据......我不知道，也许是“返回 JSON (ViewData["events"]);” ???

在我的页面中我正在这样做： foreach (UserEvents event in (IEnumerable)ViewData["events"]) //do all iteration here ... 那么，我怎样才能得到一个JSON 并处理这个 ViewData???