jquery - 使用asp.net mvc和jquery时在哪里形成html？

Question

我目前正在为我想要创建的网站制作一些原型(prototype)。该网站的一部分将大量使用 JavaScript。现在我正在学习 jquery 和 ASP.Net MVC 框架组合。

我遇到的问题是我应该在哪里形成为 ajax 请求生成的 html。例如，在页面加载时，我想根据正在加载的项目加载一个名为 #subject_list 的项目符号列表(即导航到/Project/Manage/3，项目 ID 为 3)。从我的角度来看(我已经学会了这两种方法)，我可以通过两种方式形成

元素:

1) 在服务器上创建一个 JSON 对象，其中包含列表所代表的每个对象的数据，并在客户端上形成 <li> JSON 对象中每个项目的字符串并将其附加到 #subject_list 的 html 中。

2) 创建<li>服务器上的元素(使用部分 View 或从数据构建的字符串)并将 html 直接返回给 jquery，然后让 jquery 将该 html 放入 #subject_list 中。

现在看来方法 2 的性能会更好，因为它使客户端不必执行字符串操作并将任务放在服务器上(从编译的 C# 代码而不是解释的 javascript 运行)。

但是，我似乎无法弄清楚如何使用第二种方法可靠地检测错误。例如，如果数据库连接失败、查询失败、 meteor 摧毁星球等......我希望能够返回错误并在模式对话框中显示该错误。除非我看到错误的事情(这是可能的)，否则似乎如果我想使用第二种方法，我将我的javascript编码为期望html，因此没有选项来检测是否发生错误消息。

那么使用asp.net和jquery时形成html的最佳方式是什么？

谢谢!

Answer 1

无论哪种方式，您都将使用 jQuery POST 从服务器 ajax 样式获取 json/html。使用 jQuery $.ajax( 函数中的 error: 属性来处理失败的响应。

编辑:
这是一个相当简单的函数，用于添加/更新 html 表中缩略图的注释:

                function commentImage(pgiID) {
                    var commentText =  $("table.gallery td a#"+pgiID).attr("title");

                    var newComment = prompt("Create or update the photo comment:",commentText);
                    if(newComment!=null) {
                        // post comment back to server
                        $("div#"+pgiID+" a").hide();
                        $("div.photoAdminBlock img.loading"+pgiID).show();                            
                        $.ajax({
                            type:       "POST",
                            url:        "/Activities/UpdateImageComment",
                            data:       {id: pgiID, commentText: newComment},
                            success:    function() {
                                // set title attr
                                $.getJSON("/Activities/GetPgiComment/"+pgiID,null,function(data, textStatus) {
                                        $("table.gallery td a#"+pgiID).attr("title",data);
                                        $("div.photoAdminBlock img.loading"+pgiID).hide();
                                        $("div#"+pgiID+" a").show();
                                        $("table.gallery td a#"+pgiID).trigger("click");
                                    });                                    
                            },
                            error:      function(XMLHttpRequest, textStatus, errorThrown) {
                                alert("There was an error when trying to update the comment.\nPlease refresh this page and try again or contact support.");
                                $("div.photoAdminBlock img.loading"+pgiID).hide();
                                $("div#"+pgiID+" a").show();                                
                            }
                        });                             
                    }
                }

我认为理想的情况是让 jQuery ajax 适本地处理 500 系列 HTTP 响应。这可能更“MVC 风格”。 ;)