Question

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

详细信息视图有一个按钮，单击该按钮时，应将整个视图更改为编辑模式，而不刷新页面或重定向。我使用了两个视图，详细信息和编辑，在ajaxForm函数的帮助下，我在这两个视图之间来回切换。我在ajaxForm上添加了documentready 修改视图。

<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>

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

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

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

Answer 1

我认为您提出了几个不同的问题。

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

如下所示。我建议您查看文档以获取更多信息。

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

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

1）用户点击编辑按钮，进入编辑屏幕 2）用户输入数据，使用客户端验证进行初始检查 3）用户提交，然后用户进入视图屏幕并显示a 成功或错误信息。

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

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

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

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

通过弹出从服务器返回的消息，您可以非常简单。

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

希望有所帮助！

Answer 2

我已经开始摆脱ASP.Net MVC中可用的asp.net视图，因为在尝试实现当天支持AJAX的网站所期望的功能时会出现一些不兼容性和/或不必要的复杂性。

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

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

我意识到这可能不是你正在寻找的确切答案，这对你来说可能不是一个选择，但我希望它会帮助某人在某个时候决定放弃混合HTML和服务器边码。

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

2 个答案: