FineUI 官方论坛

标题: 【经验分享】FineUIMvc中使用F.doPostBack条件下载时出错 [打印本页]
作者: sanshi    时间: 2019-1-21 10:40
标题: 【经验分享】FineUIMvc中使用F.doPostBack条件下载时出错
这是来自网友的问题：
[attach]11820[/attach]

这个问题很具有代表性，我们先来看下你的代码逻辑：
  1. @section body {

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

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

  53. }

  55. @section script {

  57.     <script type="text/javascript">

  59.         //判断是否满足下载条件
  60.         function onDownloadClick(event) {
  61.             F.doPostBack({
  62.                 url: '@Url.Action("btnDownload_Click")',
  63.                 fields: 'Panel1',
  64.                 params: { },
  65.                 enableAjaxLoading: false
  66.             });
  67.         }

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

  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. }
复制代码


页面显示效果如下：

[attach]11821[/attach]

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

上述代码虽然可以运行，但是下载后出现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. }

  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 });

  22.         if (success)
  23.         {
  24.                 PageContext.RegisterStartupScript("downloadFile();");
  25.         }
  26.         else
  27.         {
  28.                 PageContext.RegisterStartupScript("F.alert('没有满足下载的文件！');");
  29.         }

  31.         return UIHelper.Result();
  32. }
复制代码

运行时效果：
[attach]11826[/attach]

[attach]11827[/attach]







欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4