Posting partial view form from Jquery dialog using MVC

Question

I'm working on a web page using MVC with C#. I have opened a Jquery dialog on the page and within that dialog I load a partial view. The view contains a form with file to upload and then the Jquery dialog has a submit button.

I first tried using a regular cshtml begin form and submit as so

@using (Html.BeginForm("UploadOutShipment", "Shipment", FormMethod.Post, new { enctype = "multipart/form-data", id = "form"}))
{
@Html.TextBoxFor(m => m.file, new { type = "file", name = "file", @class = "required" })
<input type="submit" name="submit"/>
}

Then when I pressed the submit button that was inside the dialog box it did nothing. So then looking on StackOverFlow I found other people with similar problems and looked at, jQuery, MVC3: Submitting a partial view form within a modal dialog. After looking at this I changed my Jquery dialog box to have a submit function like so.

<script type="text/javascript">
function uploadPopUp() {
    $('#uploadCSVD').dialog({
        autoOpen: true,
        width: 600,
        title: 'Upload CSV',
        resizable: false,
        modal: true,
        open: function (event, ui) {
            $(this).load('@Url.Action("UploadOutShipment", "Shipment")');
        },
        buttons: {
            "Submit": function () {
                $.ajax(
                     {
                         url: 'UploadOutShipment',
                         type: "POST",
                         async: true,
                         data: $('form', $(this)).serialize()
                     });
            }
        },
        close : function(event, ui){
            location.reload(true);
        }
    });
}</script>

Here are my actions in the controller

    [HttpGet]
    public ActionResult UploadOutShipment(UploadOutShipment model)
    {
        return PartialView(model);
    }

    [HttpPost]
    [ActionName("UploadOutShipment")]
    public ActionResult UploadOutShipmentPost(UploadOutShipment model)
    {
        //Do stuff with data
        return View(model);
    }

The above ajax succeeded in calling the post method "UploadShipmentOut", but the problem is the model did not contain the data from my form. I'm very new to MVC and Jquery/Javascript/Ajax so could someone explain how if I'm going around this the right way? If I am, how can I get the form 'data' from the Ajax call into my controller? When I have done this with the dialog box the data usually binded to the model by ID.

did you check your submit HTTP request, does it contain your form data? — Shoaib Shakeel, Jul 17 '15 at 17:42
From Network panel. Check the request which generates when you click on submit button. Then view its posted parameters — Shoaib Shakeel, Jul 17 '15 at 18:03
I looked through the network and the $('form', $(this)). Seems like only the name of the file got through the form... Guess i'll look into this more. — John Hong, Jul 17 '15 at 18:16

score 0 · Answer 1 · answered Jul 17 '15 at 18:30

You are not sending file data to server in your request. You need to post both file data and form to post form successfully. You can use FormData() for it. Try following code

    <script type="text/javascript">
    function uploadPopUp() {
        $('#uploadCSVD').dialog({
            autoOpen: true,
            width: 600,
            title: 'Upload CSV',
            resizable: false,
            modal: true,
            open: function (event, ui) {
                $(this).load('@Url.Action("UploadOutShipment", "Shipment")');
            },
            buttons: {
                "Submit": function () {
                    $.ajax(
                         {
                             url: 'UploadOutShipment',
                             type: "POST",
                             async: true,
                             data: new FormData($('form')),
                             processData: false,
                             contentType: false
                         });
                }
            },
            close : function(event, ui){
                location.reload(true);
            }
        });
    }</script>

I have tried changing the code to yours, but still the file looks like it did not get across. Thank you for helping me notice the problem though. It seems as though the file upload is the problem and not form submission itself. — John Hong, Jul 17 '15 at 18:39

score 0 · Accepted Answer · answered Jul 17 '15 at 20:57

I managed to solve this problem. Seems like I should not do the

     $(this).load('@Url.Action("UploadOutShipment", "Shipment")');

to load the view into the dialog box. Instead I should put it (the form) in the div of the dialog box directly like such,

<div id="uploadCSVD">
@using (Html.BeginForm("UploadOutShipment", "Shipment", FormMethod.Post, new { enctype = "multipart/form-data", id = "form" }))
{
    <input type="file" name="file1" class="multi" />
    <input type="submit" name="submit" value="submit" />
}
</div>

This loads pretty much the same view I was using before except clicking on submit button actually works. Then when I look to view the file I look through the "Result" object in the controller class. Thanks Shakeel for trying to help! Still unsure why the original code doesn't work in the first place. If someone could explain why that'd be great!

Posting partial view form from Jquery dialog using MVC

2 Answers2