Question

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

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

问题：我一直在努力这几天没有运气。我已经尝试过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>

UploadFile.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中加载部分视图，我该怎么做才能将对象返回到局部视图？

任何想法或至少在正确方向上的一点都将受到赞赏。甚至是重复的链接！

Answer 1

返回时，部分视图将始终刷新。这是事情的运作方式。除非你使用AJAX进行不同的上传。

请参阅以下链接：

Ajax.BeginForm in MVC to upload files

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

然后，在局部视图中，使用该标志相应地渲染UI。

希望它有所帮助。

Answer 2

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

基本上，我修改了HomeController＆gt; 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'));
}
});

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

2 个答案: