解决Mvc4 + EasyUI Form Ajax Submit出现下载对话框问题

4星 · 超过85%的资源需积分: 9 28 浏览量更新于2024-09-12 1 收藏 63KB DOC 举报

"MVC4与EasyUI表单的Ajax提交示例及解决返回时出现下载对话框的问题" 在开发Web应用程序时，有时我们需要实现异步数据提交，以提高用户体验。在ASP.NET MVC4框架中结合EasyUI库进行表单提交，可以创建交互性强且响应快速的界面。然而，在实际操作中可能会遇到一些问题，如表单提交后出现意外的下载对话框，而成功回调函数不执行。这个问题通常涉及到Ajax请求的响应内容类型设置不正确。 EasyUI是一个基于jQuery的前端UI库，提供了丰富的组件，如表格、表单、对话框等，使得开发者能够快速构建美观的管理界面。在MVC4项目中，使用EasyUI的表单进行Ajax提交可以简化代码并实现前后端的分离。在本示例中，关键在于Ajax请求的`contentType`设置。当服务器返回的内容类型（ContentType）被误设或未设置时，浏览器可能将其识别为需要下载的文件，从而弹出下载对话框。正确的做法是将服务器返回的内容类型设置为"text/html"，这样浏览器会将其作为HTML文档处理，而不是一个可下载的文件。以下是一个简单的C# Razor视图（`.cshtml`）示例，展示如何在MVC4中创建一个使用EasyUI的Ajax提交表单： ```html @{ ViewBag.Title = "Module"; Layout = ""; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BasicDataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="/Scripts/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="/Scripts/easyui/themes/icon.css"> <script type="text/javascript" src="/Scripts/easyui/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="/Scripts/easyui/jquery.easyui.min.js"></script> </head> <body> <table id="dg" class="easyui-datagrid" title="" fit="true" style="" pagination="true" data-options="rownumbers:true,singleSelect:true,collapsible:true,url:'/Module/GetData',toolbar:toolbar"> <thead> <tr> <th data-options="field:'ModuleID',width:80">ItemID</th> <th data-options="field:'PID',width:100">PID</th>  </tr> </thead> </table>  <script type="text/javascript"> // 这里可以编写表单提交的Ajax代码，确保contentType设置为"text/html" </script> </body> </html> ``` 在后台控制器（Controller）中，你需要确保返回的数据内容类型设置为"text/html"。例如，对于一个返回JSON数据的Action，你可以这样做： ```csharp [HttpPost] public ActionResult SubmitFormData(FormCollection formData) { // 处理表单数据 var result = ProcessFormData(formData); // 设置响应内容类型 Response.ContentType = "text/html"; // 如果成功，返回JSON数据 return Json(new { success = true, message = "数据提交成功！" }); // 如果失败，可以返回错误信息 // return Json(new { success = false, message = "数据提交失败！" }); } ``` 确保在发送Ajax请求时，使用正确的`contentType`设置，例如`"application/json; charset=utf-8"`，以匹配服务器返回的类型。同时，确保在成功回调函数中处理返回的数据。通过这种方式，可以避免出现下载对话框，并实现表单的顺利异步提交。记住，前端与后端之间的通信需要精确无误，否则可能会导致意料之外的问题。在调试过程中，检查网络请求的响应头以及服务器的返回状态和内容类型是非常重要的。

Asp.net mvc4 + easyui form ajax submit

刚开始使用 form 提交一直出现错误。提交后，不能返回，succee 方法不执行，直接出现下

载对话框。

找了好久，总算找到一篇文章。搞不懂为什么会有这种问题。Demo 里面也没有说明，折

腾了我好几天。

这是关键

//contentType 为text/html

res.ContentType = "text/html";

现在把这个代码完整的放在这里，以供参考

Chtml 页面

ViewBag.Title = "Module";

Layout = "";

}

<!DOCTYPE html>

<html>

<head>

<title>Basic DataGrid - jQuery EasyUI Demo</title>

href="/Scripts/easyui/themes/default/easyui.css">

href="/Scripts/easyui/themes/icon.css">

1.8.0.min.js"></script>

src="/Scripts/easyui/jquery.easyui.min.js"></script>

</head>

<body>

<table id="dg" class="easyui-datagrid" title="" fit="true"

style=""pagination="true"

data-

options="rownumbers:true,singleSelect:true,collapsible:true,url:'/

Module/GetData',toolbar:toolbar">

<thead>

<tr>

下载后可阅读完整内容，剩余8页未读，立即下载

wuxufeng8080

粉丝: 0
资源: 2

解决Mvc4 + EasyUI Form Ajax Submit出现下载对话框问题

C# MVC4+EasyUI框架搭建

C# MVC4+EasyUI 管理系统完整源码

asp.net mvc+easyui附件上传

Mvc+EasyUI开发中常见问题及解决方案

jQuery+easyui validatebox 验证框

ASP.NET MVC4和EasyUI入门指南

ASP.NET MVC4中EasyUI的数据绑定技巧

ASP.NET MVC4中EasyUI的数据绑定和数据更新技巧

easyui

jquery easyui

最新资源