代码之家 › 专栏 › 技术社区 › Archer_A

PartialView-in-View-post-and-return-response-json

asp.net-ajax asp.net-mvc c#

Archer_A · 技术社区 · 8 年前

我的PartialView是在视图中渲染的,那么这个PartialView需要post控制器,捕捉响应,并显示。怎么做到的?

看法

<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);
}

2 回复 | 直到 8 年前

C_T 8 年前

在我看来,最简单的方法是使用 Ajax.BeginForm 扩展而不是 Html.BeginForm . 代码更少,易于阅读。

jquery.unobtrusive-ajax.js 以及Jquery。

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

在这里 getResult

然后你可以写这样的东西:

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

Shyju 8 年前

您必须使用ajax来提交数据,当您的操作方法返回JSON响应时,根据需要udpate 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;
        }
    });

});

假设您的操作方法返回带有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 有一个类型的属性 HttpPostedFileBase

public HttpPostedFileBase Img { set; get; }