使用 AJAX 的 ASP.NET MVC 加载页面答案

【问题标题】：ASP.NET MVC Load page with AJAX使用 AJAX 的 ASP.NET MVC 加载页面
【发布时间】：2011-10-05 13:32:49
【问题描述】：

我有这种情况：

一个带有 2 个选项卡的折叠式页面，一个包含付款方式列表，第二个包含订单摘要，包括订单行、金额和总计（呈现为部分视图）。选择付款方式会导致重新计算订单总额，可能会产生额外费用等。

选择付款方式后，使用 AJAX 显示新订单摘要的推荐方式是什么？

执行 AJAX 调用并获取所有新金额、订单等并使用 JS 设置这些值对我来说似乎效率低下。理想的情况是，如果我可以使用选定的付款方式进行 AJAX 调用，并且该调用将返回我可以用来替换旧摘要的 HTML。

在服务器上将部分视图呈现为 HTML 并使用 JSON 返回它是不是很糟糕？这种情况的最佳做法是什么？

【问题讨论】：

标签： asp.net asp.net-mvc ajax

【解决方案1】：

我这里有一个例子：

Javascript

$("#divForPartialView").load("/HelloWorld/GetAwesomePartialView",
   { param1: "hello", param2: 22}, function () {
   //do other cool client side stuff
});

控制器动作

public ActionResult GetAwesomePartialView(string param1, int param2)
{
    //do some database magic
    CustomDTO dto = DAL.GetData(param1, param2);

    return PartialView("AwesomePartialView",dto);
}

【讨论】：

your link 出售吗？
你也可以使用 '@Url.Action("GetAwesomePartialView", "HelloWorld")' 代替 "/HelloWorld/GetAwesomePartialView"

【解决方案2】：

在您的操作方法中返回一个PartialView([view name])。

然后你可以用 jquery 做到这一点：

var req = $.ajax({
  type:"GET",//or "POST" or whatever
  url:"[action method url]"
  }).success(function(responseData){
    $('targetelement').append($(responseData));});

其中'targetelement' 是您要向其中注入内容的元素的选择器。

在将响应附加到目标元素之前，您可能需要先执行$('targetelement').html('');。

更新

或者，更好的是，使用 Rick 的回答中的.load。

【讨论】：

我从来没有意识到你可以只返回一个局部视图！感谢（感谢两者）！
您可以使用 replaceWith 或简单地使用 $("#element").load(...) 来代替 append
是的，我从@rick 的回答中注意到了这一点：) 你每天都会学到新东西。