MVC3，在同一页面中的视图之间切换

Question

我正在开发一个 MVC 项目，该项目应该只有一页，有两个区域。在一个区域我有一个带有标记的谷歌地图，第二个区域填充了所选标记的详细信息。

details 视图有一个按钮，当单击该按钮时，应将整个视图更改为 edit 模式，而无需刷新页面或重定向它。我使用了两个视图，分别用于 details 和 edit，在 ajaxForm 函数的帮助下，我在这两个视图之间来回切换。我在documentready 上添加ajaxForm 用于edit 视图。

<script type="text/javascript"> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#currentDiv').ajaxForm(function(data) { 
            $('#currentDiv').html(data);
        }); 
    }); 
</script> 

当在服务器端尝试从 edit 视图保存数据时出现错误并且我想返回到相同的 edit 视图并显示错误时，就会出现问题. ajaxForm 处理程序不再添加，即使尝试保存的新值正常，detail 视图也会加载到另一个页面中。

不幸的是，ajaxForm 的使用会产生一些其他问题，因为我无法控制 ajax 调用失败的情况。

关于如何解决此问题的任何想法？在不使用 ajaxForm 且不刷新页面的情况下在这两个视图之间切换是否有其他解决方案？

Answer 1

我认为您要问几个不同的问题。

首先，您添加 jquery 处理程序来处理从服务器收到 500 类型错误的情况。

类似于以下内容。我建议查看文档以获取更多信息。

$(document).ajaxError(function(event,jqXHR,ajaxSettings,thrownError){
   if (jqXHR.status != 0){
         window.location = <error page>
    }
}

第二个问题似乎源于对已知错误（比如无效输入）的错误处理。在这种情况下，我建议采用以下工作流程。

1) 用户点击编辑按钮，进入编辑屏幕 2) 用户输入数据，使用客户端验证进行初步检查 3) 用户提交，然后用户被带到查看屏幕并显示 成功或错误消息。

服务器响应可能如下所示：

public ActionResult Edit(EditModel model){
   if (!ModelState.IsValid)
   {
     return Json(new {successful = false, message = "Failed.."});
   }
   ...
}

在客户端，您的表单回调现在应该处理消息以及它成功与否的事实。在我的实现中，我使用了 knockoutjs 创建了一个可以更新和清除的“消息”区域。 （我创建了模板等）。

记住使用客户端验证来进行简单的字段验证......这将节省返回服务器的行程。

你可以很简单，通过弹出从服务器返回的消息。

最后，文档就绪仅在原始文档加载完成时触发，不再用于 ajax 调用（至少这是我的理解）。只需将 document.ready 的代码放在编辑页面的底部即可。它会在它所针对的 html 已经被渲染后触发。

希望有帮助！

Answer 2

由于在尝试实现当今启用 AJAX 的网站所期望的功能时存在一些不兼容和/或不必要的复杂性，我已经开始远离 ASP.Net MVC 中可用的 asp.net 视图。

我建议转向使用“哑” HTML 文件的设计，使用 jQuery 使用 AJAX 下载它们并将它们放入容器（我个人使用 div），然后使用另一个 AJAX 调用从控制器。这种方法有很多优点：

1. 它在客户端和服务器端代码之间建立了真正的（而非虚假的）分离。
2. 可以在客户端缓存 HTML 文件，从而减少传输的数据量。
3. Html 元素的绑定成为使用 jQuery 从服务器卸载处理周期实现的客户端任务。
4. 控制器本质上是 Web 方法的集合，这意味着它们可以被 iPhone 和 Android 应用程序化，从而使移动部署更容易。

我意识到这可能不是您正在寻找的确切答案，这可能不是您的选择，但我希望它可以帮助某人在某个时候做出决定摆脱混合 HTML 和服务器侧码。