视图中的 PartialView post 和 return 响应 json

Question

我的PartialView是在View中渲染的，那么这个PartialView需要postcontroller，catch response，显示。怎么做到的？

查看

<div class="row">
        <div id="partialViewContainer"></div>
    </div>

局部视图

@model foo

@using (Html.BeginForm("UploadFile", "ManageFiles", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    //Some Html
    <div id="ResponsePost">
    </div>
}

控制器

[HttpPost]
public JsonResult UploadFile(UploadFileViewModel m)
{        
            if (!ModelState.IsValid)
            {
                var errorList = (from item in ModelState
                             where item.Value.Errors.Any()
                             select item.Value.Errors[0].ErrorMessage).ToList();

                    return Json(errorList);
            }

            //Some Logic             
            var foo = new { ... };
            return Json(foo);
}

Answer 1

您必须使用 ajax 来提交您的数据，并且当您的操作方法 returns JSON 响应时，根据需要更新 DOM。您需要使用 FormData 发送文件和表单中的其他输入字段。

假设您的部分视图呈现了一个 ID 为 replaceYourFormIdHere 的表单，其中有一个 ID 为 Img

的输入文件元素

$("#replaceYourFormIdHere").submit(function(e) {
    e.preventDefault();

    var formAction = $(this).attr("action");

    var fdata = new FormData();

    var fileInput = $('#Img')[0];
    var file = fileInput.files[0];
    fdata.append("Img", file);

    // You can update the jquery selector to use a css class if you want
    $("input[type='text'").each(function (x, y) {
        fdata.append($(y).attr("name"), $(y).val());
    });

    $.ajax({
        url: formAction,
        type: "POST",
        data: fdata,
        processData: false,
        contentType: false,
        success: function (data) {
            var msg = "<ul>";
            if (data.status === "success") {
                msg += '<li>' + data.message + '</li>';;
            } else {
                $.each(data.errorList,
                    function(a, b) {
                        msg+= '<li>' + b + '</li>';
                    });
            }
            msg += "</ul>";
            $("#ResponsePost").html(msg);
        },
        error: function(x, y, z) {
            alert('error al postear');
            return false;
        }
    });

});

假设您的操作方法 returns 具有状态属性的 JSON 响应。

public ActionResult UploadFile(UploadFileViewModel model)
{
    if (ModelState.IsValid)
    {
        //to do : Save model.Img
        return Json(new {status = "success", message = "Success!"});
    }
    else
    {
        var errorList = (from modelStateVal in ViewData.ModelState.Values from error 
                            in modelStateVal.Errors select error.ErrorMessage).ToList();
        return Json(new { status = "error", errorList = errorList });
    }
}

假设您的 UploadFileViewModel 有 Img 属性类型 HttpPostedFileBase

public HttpPostedFileBase Img { set; get; }

确保您没有将脚本放在局部视图中。最好在主视图中包含脚本。

Answer 2

我认为最简单的方法是使用 Ajax.BeginForm 扩展而不是 Html.BeginForm。代码少，易读。

权衡是您需要包括 jquery.unobtrusive-ajax.js 和 Jquery。

@using (Ajax.BeginForm("UploadFile","ManageFiles" , new AjaxOptions() {  OnSuccess = "getResult" }))

这里，getResult用于定义JavaScript函数，在Ajax请求成功后触发。

然后你可以这样写：

function getResult(data){
    $('#ResponsePost').append('<p>' + data.message + '</p>');
}

视图中的 PartialView post 和 return 响应 json

PartialView in View post and return response json

c#

asp.net-mvc

asp.net-ajax