Post from IFRAME and Return to Partial View in Parent

Question

My apologies if this is a dupe, but I haven't been able to find an exact solution to my problem.

Goal: Upload a file, do work, return results. Easy right?

Problem: I've been working on this for a few days without any luck. I've tried XmlHttpRequest, but due to the browser limits (can't get away with forcing end-users and clients to use IE10 or higher) that doesn't seem to be an option.

What I've spent most of my time on is uploading via iframe. I've gotten the upload piece working fine. What I need to happen is after doing work with the file, results should be returned back to the parent window and a partial view.

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

Here's what I have for code:

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

The return part is where I'm stuck. What can I do to return the object to the partial view, without having the partial view load within the iframe?

Any ideas or at least a point in the right direction would be appreciated. Even a link to a duplicate!

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

The Partial View would always be refreshed when it is returned. It is how things work. Unless you do the upload differently using AJAX.

Please refer to the link below:

Ajax.BeginForm in MVC to upload files

Alternatively by using the same logic described in your question, you could put some additional logic in your view, like for example using TempData as flag which is set in the action controller, to determine the partial view is for upload or showing result.

Then, in your partial view, using that flag to render the UI accordingly.

Hope it helps.

edited May 23 '17 at 10:33

Community

1
1

answered Jan 10 '14 at 02:28

Hatjhie

1,366
2
13
27

Hatjhie, I understand the partial view will be refreshed on return. I want it to be refreshed with the return object, but I don't want the partial view to display in the iframe, which is all I've been able to accomplish. The link you provided doesn't seem to cover this, but maybe I'm missing something. :) – KC-Flip Jan 10 '14 at 19:42
Alright. Thanks for the clarification. Yeap, the link is about doing the upload in different way. Perhaps, you share your answer? Thanks! – Hatjhie Jan 11 '14 at 02:15

score 0 · Accepted Answer · edited May 23 '17 at 12:26

I ended up finding a solution based on the concepts from these questions:
Get JSON text from HTML iframe
How to display action result of iframe in parent window

Basically, I modified the HomeController > UploadFile action to return JSON text

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

Then in jQuery, I check to see if the iframe contains the JSON when it loads.

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

Post from IFRAME and Return to Partial View in Parent

2 Answers2