使用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的幫助！ 仍然不確定為什么原始代碼一開始就不起作用。 如果有人可以解釋為什么那會很棒！