ASP.NET MVC使用jQuery ajax渲染局部视图

Question

我有一个控制器动作,呈现局部视图:

public ActionResult Details(int id)
{
    DetailsViewModel model = 
        ModelBuilder.GetDetailsViewModel(id, _repository);
    return PartialView("Details", model);
}

我将返回的内容加载到动态元素中,如下所示:

$container = appendContainer(); // adds a div to the dom with the correct id
$container.load("MyController/Details", function(response, status, xhr) {
    if (status != "success") {
        $(container).html('an error has occured');
    }
});

所以这会创建一个div,然后将返回的内容加载到该div中.

我想略微改变它,以便只有在对控制器的调用成功时才创建容器div.

所以:

1. jQuery调用控制器动作
2. controller返回PartialView,如果未找到Id,则返回null
3. 如果返回PartialView,则会创建容器并使用返回的内容加载容器.
4. 如果控制器未找到Id,则不会创建任何内容并显示警报.

我很感激有关如何最好地实现这一点的任何指示.

Answer 1

在你的情况下,我会使用$ .ajax而不是.load()让你更多地控制流量+感觉更干净

$.ajax({
url: "MyController/Details",
   type: "GET",
   success: function (response, status, xhr)
   {
      var jqContainer = appendContainer();
      jqContainer.html(response);
   },
   error:function(XMLHttpRequest, textStatus, errorThrown)
   {
     //show the error somewhere - but this is a bad solution
   }
});

关于错误状态 - 我也讨厌依赖异常 - 丑陋和低效,你有几种方法可以解决这个问题:

1. 从您的视图中仅返回JSON并使用某种模板解决方案绑定返回的数据,这样您就可以返回带有特定错误消息的错误对象并以相同的方式处理所有错误(认为这是最佳解决方案).
2. 返回204成功状态代码 - 无响应,就像从您的操作中返回null - 然后检查状态代码并弹出错误消息.
3. 返回一个278成功状态代码(不是一个真实的状态代码,但是成功的数量,并让你也发送数据) - 在这里你发送一个json对象与错误消息,tou可以解析并播下一个很好的错误消息(看到这个278解决方案在某些时候在这里).
4. 返回错误的不同视图 - 但是如果要采取更多操作,则必须将其插入容器或虚拟容器以检查是否存在错误.

在我的代码中,我使用$(document).ajaxSend(..)来全局检查278代码的所有Ajax响应并显示错误消息(如果有),或者调用原始的hooked success函数.

要从操作中返回错误,请使用以下结果

    public class AjaxErrorWithDetailsResult : JsonResult
    {
    public object ErrorResult { get; set; }

    public AjaxErrorWithDetailsResult(object errorResult)
    {
        this.ErrorResult = errorResult;
    }


    public override void ExecuteResult(ControllerContext context)
    {
        if (context == null)
        {
            throw new ArgumentNullException("context");
        }
        this.Data = ErrorResult;
        context.HttpContext.Response.StatusCode = 278;
        base.ExecuteResult(context);
    }
}

其中ErrorResult可以是一个匿名对象,也可以是一个实现具有ErrorMessage属性的接口的对象,因此您将知道在JS中寻找什么

Answer 2

所有load这一切都是从服务器返回HTML,那么为什么不只是附加到临时div,然后成功获取HTML？

var $dummy = $("<div>");
$dummy.load("MyController/Details", function(response, status, xhr) {
    var $container = appendContainer();
    if (status != "success") {
        $container.html('an error has occured');
    }
    else
    {
        $container.html($dummy.html());
    }
    $dummy.remove();
});

更新:

如果您期待异常,那么您应该处理它.如果你基本上允许错误发生只是为了得到status != "success"那是一个严重的代码味道.您应该捕获错误并返回不同的PartialView.

public ActionResult Details(int id)
{
    try
    {
        DetailsViewModel model = 
            ModelBuilder.GetDetailsViewModel(id, _repository);
        return PartialView("Details", model);
    }
    catch (SomeException ex)
    {
        return PartialView("Error", ex.Message);
    }
}

然后,您可以保证始终获得有效的HTML响应,如果不这样做,那么您的基本错误an error occured将会发挥作用.