使用MVC从Jquery对话框发布部分视图表单

Question

我正在使用将MVC与C＃结合使用的网页。 我在页面上打开了一个Jquery对话框，并在该对话框中加载了部分视图。 该视图包含一个带有要上传文件的表单，然后Jquery对话框具有一个Submit按钮。

我首先尝试使用常规的cshtml begin表单并按原样提交

@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"/>
}

然后，当我按下对话框内的提交按钮时，它什么也没做。 因此，然后在StackOverFlow上，我发现其他人也遇到类似的问题，并看着jQuery，MVC3：在模式对话框中提交部分视图表单 。 看完之后，我将我的Jquery对话框更改为具有类似的提交功能。

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

这是我在控制器中的动作

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

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

上面的ajax成功调用了post方法“ UploadShipmentOut”，但问题是该模型不包含我表单中的数据。 我是MVC和Jquery / Javascript / Ajax的新手，所以有人可以解释一下我如何以正确的方式解决问题吗？ 如果是的话，如何从Ajax调用中获取“数据”表格到我的控制器中？ 使用对话框完成此操作后，数据通常通过ID绑定到模型。

Answer 1

您没有在请求中向服务器发送文件数据。 您需要同时发布文件数据和表单才能成功发布表单。 您可以使用FormData() 。 尝试以下代码

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

Answer 2

我设法解决了这个问题。 似乎我不应该这样做

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

将视图加载到对话框中。 相反，我应该像这样直接将其（窗体）放在对话框的div中，

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

这加载了几乎与我之前使用的视图相同的视图，只是单击了提交按钮实际上起作用。 然后，当我查看文件时，将通过控制器类中的“结果”对象进行查看。 感谢Shakeel的帮助！ 仍然不确定为什么原始代码一开始就不起作用。 如果有人可以解释为什么那会很棒！