i want to upload file using jquery dialog. I have created a partial view and showing that partial view in the dialog.

The problem is, when I directly browse the partial view and upload a file, it works perfect. BUT when I put the partial view inside a jquery dialog, it submits the form, but don't submits the file. So i have null value. I really dont understand what is the difference here!!

Hope someone can help me to identify the problem.

here is some codes;

jquery codes:

$('#UploadDialog').dialog({
        autoOpen: false,
        width: 580,
        resizable: false,
        modal: true,
        open: function (event, ui) {
        $(this).load('@Url.Action("Upload","Notes")');
        },
        buttons: {
            "Upload": function () {
                $("#upload-message").html(''); 
                $("#noteUploadForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
    $(".uploadLink").click(function () {
        $('#UploadDialog').dialog('open');
        });
        return false;
});

partial view:

@using (Ajax.BeginForm("Upload", "Notes", null, new AjaxOptions
{
UpdateTargetId = "upload-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "uploadSuccess"
}, new { id = "noteUploadForm" , enctype="multipart/form-data"}))
{
<div>
<div id="upload-message"></div>
<div class="editLabel">
    @Html.LabelFor(m => m.Notes.NoteTitle)
</div>
<div class="editText">
    @Html.TextBoxFor(m => m.Notes.NoteTitle)
</div>
<div class="clear"></div>

<div class="editLabel">
    @Html.Label("Upload file")
</div>
<div class="editText">
    <input type="file" name="file" />(100MB max size)
</div>

</div>
}