Question

我正在使用带C＃的MVC开发网页。我在页面上打开了一个Jquery对话框，在该对话框中我加载了一个局部视图。该视图包含一个包含要上载的文件的表单，然后Jquery对话框有一个提交按钮。

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

@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: Submitting a partial view form within a modal dialog。看了这个后，我改变了我的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调用中获取表单'data'到我的控制器？当我使用对话框完成此操作时，数据通常通过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>

这加载了我之前使用的相同视图，除了点击提交按钮实际上有效。然后，当我查看文件时，我查看控制器类中的“Result”对象。谢谢Shakeel试图提供帮助！仍然不确定为什么原始代码首先不起作用。如果有人能解释为什么那会很棒！

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

2 个答案: