Question

我的PartialView是在View中渲染，然后这个PartialView需要post控制器，并捕获响应，并显示。怎么样？

查看

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

PartialView

@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来提交数据，并且当您的action方法返回JSON respose时，根据需要使用udpate DOM。您需要使用FormData发送表单中的文件和其他输入字段。

假设您的部分视图呈现了标识为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;
        }
    });

});

假设您的action方法返回带有status属性的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用于定义在成功的Ajax请求之后将触发的JavaScript函数。

然后你可以这样写：

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

PartialView in View post和return response json

2 个答案: