从 IFRAME 发布并返回到父级中的部分视图答案

【问题标题】：Post from IFRAME and Return to Partial View in Parent从 IFRAME 发布并返回到父级中的部分视图
【发布时间】：2014-01-09 21:27:53
【问题描述】：

如果这是一个骗局，我深表歉意，但我无法找到解决问题的确切方法。

目标：上传文件，工作，返回结果。容易吧？

问题：我已经为此工作了几天，没有任何运气。我尝试过 XmlHttpRequest，但由于浏览器限制（无法摆脱强制最终用户和客户端使用 IE10 或更高版本），这似乎不是一个选项。

我大部分时间都花在通过 iframe 上传。我已经让上传部分工作正常。我需要做的是在处理完文件后，结果应该返回到父窗口和部分视图。

----------------------Index--------------------
Partial View Data Entry----Partial View Results
-----Upload iframe----------Results from file--

这是我的代码：

DataEntry.cshtml

<div>
    ...textboxes, radiobuttons, etc...
    <iframe id="uploadFrame" class="seamless" frameborder="0" src='@Url.Action("UploadFile")'></iframe>
</div>

上传文件.cshtml

<script type="text/javascript">
    $(document).ready(function () {
        $("#uploadFile").click(function () {
            $("#field1").val(window.parent.document.getElementById("field1").value);
            $("#field2").val(window.parent.document.getElementById("field2").value);
            ...other fields...

            $("#fileForm").submit();
        });

        $("#file").change(function () {
            if ($("#file").val() != "") {
                $("#uploadFile").removeAttr("disabled");
            }
            else {
                $("#uploadFile").attr("disabled", "disabled");
            }
        });
    });
</script>

<form id="fileForm" action='@Url.Action("UploadFile")' method="post" enctype="multipart/form-data">
    <div>
        Please use this template (link) to upload a list of employees and dependents.
    </div>
    <div class="center">
        <br />
        <input type="hidden" id="field1" name="field1" />
        <input type="hidden" id="field2" name="field2" />
        <input type="file" id="file" name="file" /><br /><br />
        <input type="button" disabled="disabled" id="uploadFile" name="uploadFile" value="Upload File" class="greenButton" />
    </div>
</form>

HomeController.cs

public ActionResult UploadFile()
{
    return View();
}

[HttpPost]
public ActionResult UploadFile(String field1, String field2, HttpPostedFileBase file)
{
    ...do work...

    //return View("UploadFile", object);
    //return View("Result", object);
    //return ?
}

返回部分是我卡住的地方。我可以做些什么来将对象返回到部分视图，而不在 iframe 中加载部分视图？

任何想法或至少在正确方向上的一点将不胜感激。甚至是重复的链接！

【问题讨论】：

标签： c# asp.net-mvc-4 iframe file-upload

【解决方案1】：

部分视图在返回时总是会刷新。事情就是这样运作的。除非您使用 AJAX 进行不同的上传。

请参考以下链接：

Ajax.BeginForm in MVC to upload files

或者，通过使用问题中描述的相同逻辑，您可以在视图中添加一些额外的逻辑，例如使用 TempData 作为在动作控制器中设置的标志，以确定部分视图用于上传或显示结果.

然后，在您的局部视图中，使用该标志相应地呈现 UI。

希望对你有帮助。

【讨论】：

Hatjhie，我知道部分视图将在返回时刷新。我希望它用返回对象刷新，但我不希望部分视图显示在 iframe 中，这是我所能完成的。您提供的链接似乎没有涵盖这一点，但也许我遗漏了一些东西。 :)
好的。感谢您的澄清。是的，该链接是关于以不同的方式进行上传的。也许，你分享你的答案？谢谢！

【解决方案2】：

我最终根据这些问题的概念找到了解决方案：
Get JSON text from HTML iframe
How to display action result of iframe in parent window

基本上，我修改了 HomeController > UploadFile 操作以返回 JSON 文本

JsonResult result = new JsonResult();
result.Data = listOfEmployeesWithRates.ToList();
result.ContentType = "text/plain";
return result;

然后在 jQuery 中，我检查 iframe 在加载时是否包含 JSON。

//uploadFrame
$("#uploadFrame").load(function(){
if ($("#uploadFrame").contents().find("pre").html() != null) {
    //pass json via ajax call to Result partial view

    //refresh iframe
    $("#uploadFrame").attr('src', $("#uploadFrame").attr('src'));
}
});

【讨论】：