【经验分享】FineUIMvc中使用F.doPostBack条件下载时出错

sanshi

这是来自网友的问题：


这个问题很具有代表性，我们先来看下你的代码逻辑：

1. @section body {
   
2. 
   
3.     @(F.Panel()
   
4.         .ID("Panel1")
   
5.         .ShowBorder(false)
   
6.         .ShowHeader(false)
   
7.         .BodyPadding(5)
   
8.         .Layout(LayoutType.VBox)
   
9.         .IsViewPort(true)
   
10.         .Toolbars(
    
11.             F.Toolbar()
    
12.                 .ID("Toolbar1")
    
13.                 .Items(
    
14.                     F.Button()
    
15.                         .ID("btnDownload")
    
16.                         .Icon(Icon.PackageDown)
    
17.                         .Text("判断下载")
    
18.                         .Listener("click", "onDownloadClick"),
    
19.                     F.Button()
    
20.                         .ID("btnDownload")
    
21.                         .Icon(Icon.PackageDown)
    
22.                         .Text("直接下载")
    
23.                         .Listener("click", "downloadFile"),
    
24.                     F.Button()
    
25.                         .ID("btnClose")
    
26.                         .Icon(Icon.Cancel)
    
27.                         .Text("关闭")
    
28.                         .Listener("click", "parent.removeActiveTab();")
    
29.                 )
    
30.         )
    
31.         .Items(
    
32.             F.TextBox()
    
33.                 .ID("txtContent1")
    
34.                 .ShowLabel(false)
    
35.                 .Text("内容一"),
    
36.             F.TextBox()
    
37.                 .ID("txtContent2")
    
38.                 .ShowLabel(false)
    
39.                 .Text("内容二"),
    
40.             F.Label()
    
41.                 .Text("F12，点“判断下载”会显示一个错误 =》 Uncaught SyntaxError: Unexpected token :at new Function (<anonymous>) ...")
    
42.         )
    
43.     )
    
44. 
    
45.     <!-- 隐藏表单，用于自定义POST请求 -->
    
46.     @using (Html.BeginForm("DownloadFile", "Download", FormMethod.Post, new { id = "myform" }))
    
47.     {
    
48.         @Html.AntiForgeryToken()
    
49.         <input type="hidden" name="hidContent1" />
    
50.         <input type="hidden" name="hidContent2" />
    
51.     }
    
52. 
    
53. }
    
54. 
    
55. @section script {
    
56. 
    
57.     <script type="text/javascript">
    
58. 
    
59.         //判断是否满足下载条件
    
60.         function onDownloadClick(event) {
    
61.             F.doPostBack({
    
62.                 url: '@Url.Action("btnDownload_Click")',
    
63.                 fields: 'Panel1',
    
64.                 params: { },
    
65.                 enableAjaxLoading: false
    
66.             });
    
67.         }
    
68. 
    
69.         //下载文件
    
70.         function downloadFile() {
    
71.             //自定义POST请求
    
72.             var myform = $('#myform');
    
73.             myform.find('[name=hidContent1]').val(txtContent1);
    
74.             myform.find('[name=hidContent2]').val(txtContent2);
    
75.             myform[0].submit();
    
76.         }
    
77. 
    
78.     </script>
    
79. }

复制代码

后台代码：

1. [HttpPost]
   
2. [ValidateAntiForgeryToken]
   
3. public ActionResult btnDownload_Click(FormCollection fc)
   
4. {
   
5.         bool success = false;
   
6.         if(!string.IsNullOrEmpty(fc["txtContent1"]) ||!string.IsNullOrEmpty(fc["txtContent2"]))
   
7.         {
   
8.                 success = true;
   
9.         }
   
10.         return Json(new { result = success });
    
11. }

复制代码

页面显示效果如下：



=====我是分割线===============================================================

上述代码虽然可以运行，但是下载后出现JS错误。这里有个关键的地方被忽略了：

F.doPostBack 回发时，后台 必须返回 UIHelper.Result() !

因为 F.doPostBack 是由 FineUIMvc 自行托管的函数，所以使用这一函数必须要遵守这一约定。还要理解的是，UIHelper.Result() 返回到前台的是一段JavaScript 代码，而不是文本或者JSON字符串。

修改后的代码如下：

1. //判断是否满足下载条件
   
2. function onDownloadClick(event) {
   
3.         F.doPostBack({
   
4.                 url: '@Url.Action("btnDownload_Click")',
   
5.                 fields: 'Panel1',
   
6.                 params: { },
   
7.                 enableAjaxLoading: false
   
8.         });
   
9. }
   
10. 
    
11. [HttpPost]
    
12. [ValidateAntiForgeryToken]
    
13. public ActionResult btnDownload_Click(FormCollection fc)
    
14. {
    
15.         bool success = false;
    
16.         if(!string.IsNullOrEmpty(fc["txtContent1"]) ||!string.IsNullOrEmpty(fc["txtContent2"]))
    
17.         {
    
18.                 success = true;
    
19.         }
    
20.         //return Json(new { result = success });
    
21. 
    
22.         if (success)
    
23.         {
    
24.                 PageContext.RegisterStartupScript("downloadFile();");
    
25.         }
    
26.         else
    
27.         {
    
28.                 PageContext.RegisterStartupScript("F.alert('没有满足下载的文件！');");
    
29.         }
    
30. 
    
31.         return UIHelper.Result();
    
32. }

复制代码

运行时效果：