asp.net-mvc - ASP.NET MVC 使用 jQuery ajax 渲染部分 View

Question

我有一个呈现部分 View 的 Controller 操作:

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到 Controller 就成功了。

所以:

1. jQuery 调用 Controller 操作
2. Controller 返回 PartialView，如果未找到 Id 则返回 null
3. 如果返回 PartialView，则会创建容器并加载返回的内容。
4. 如果 Controller 找不到 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. 从 View 中仅返回 JSON，并使用某种模板解决方案绑定(bind)返回的数据，这样您就可以返回带有特定错误消息的错误对象，并以相同的方式处理所有错误(认为这是最好的解决方案)。
2. 返回 204 成功状态代码 - 无响应，就像从操作中返回 null - 然后检查状态代码并弹出错误消息。
3. 返回 278 成功状态代码(不是真正的状态代码，但可以计算成功并允许您发送数据) - 在这里您发送一个带有错误消息的 json 对象，您可以解析该对象并播种一条不错的错误消息(看到第 278 章
4. 返回错误的不同 View - 但如果您想采取更多操作，则必须将其插入到容器或虚拟容器中以检查是否存在错误。

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

要从操作中返回错误，我使用以下结果

    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 属性的接口(interface)的对象，这样您就知道在 JS 中查找什么