web-dev-qa-db-ja.com

データとファイルを含むJSONをWeb APIに投稿する-jQuery / MVC

JSONを使用したApiコントローラー（できれば）に1つのリクエストで投稿する必要があります。

問題は、データとファイル（画像のアップロード）を渡すことです。私の財産は空（ヌル）になります。

私はかなりの数のブログを見てきましたが、画像のデータを渡すことができないようです。

_public class SomeModel
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string City { get; set; }
    public HttpPostedFileBase Image { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string CountryCode { get; set; }
}


    [HttpPost]
    public void CreateContestEntry(SomeModel model)
    {
        // model.Image is always null
        // .. get image here - the other properties no issues
    }
_

jQuery

_    // create model for controller
    var model = {
        Name: $.trim($contestForm.find('[name="nombre"]').val()) + ' ' + $.trim($contestForm.find('[name="apellido"]').val()),
        Email: $.trim($contestForm.find('[name="email"]').val().toLowerCase()),
        City: $.trim($contestForm.find('[name="cuidad"]').val()),
        Title: $.trim($contestForm.find('[name="title"]').val()),
        Description: $.trim($contestForm.find('[name="description"]').val()),
        CountryCode: 'co',
        Image: $contestForm.find('[name="file-es"]')[0].files[0]  // this has the file for sure
    };

    $.ajax({
        url: '/Umbraco/api/ControllerName/CreateContestEntry',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(model),
        //data: $('#test-form').serialize(),  // tried this and using FormData()
        processData: false,
        async: false,
        contentType: 'application/json; charset=utf-8',
        complete: function (data) {

        },
        error: function (response) {
            console.log(response.responseText);
        }
    });
_

enter image description here

私が見たブログ：

FormDataと$('#form1').serialize()のアプローチを試したとき、_provider.FileData_と_provider.FormData_も常に空でした。メソッドからmodelパラメーターを削除し、切り替えたときにブレークポイントがヒットしました。

_    [HttpPost]
    public void CreateContestEntry()
    {
        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);

        try
        {
            // Read the form data.
            Request.Content.ReadAsMultipartAsync(provider);

            // This illustrates how to get the file names.
            foreach (MultipartFileData file in provider.FileData)
            {
                // empty
            }

            foreach (var key in provider.FormData.AllKeys)
            {
                foreach (var val in provider.FormData.GetValues(key))
                {
                    // empty
                }
            }
            //return Request.CreateResponse(HttpStatusCode.OK);
        }
        catch(Exception ex)
        {

        }
    }
_

ソリューション：

@Musaの答えに続いて、Api Controllerコードを示します。 NameValueCollectionをモデルにマップしました。

_    [HttpPost]
    public void CreateContestEntry()
    {
        try
        {
            // get variables first
            NameValueCollection nvc = HttpContext.Current.Request.Form;
            var model = new WAR2015ContestModel();

            // iterate through and map to strongly typed model
            foreach (string kvp in nvc.AllKeys)
            {
                PropertyInfo pi = model.GetType().GetProperty(kvp, BindingFlags.Public | BindingFlags.Instance);
                if (pi != null)
                {
                    pi.SetValue(model, nvc[kvp], null);
                }
            }

            model.Image = HttpContext.Current.Request.Files["Image"];
        }
        catch(Exception ex)
        {

        }
    }
_
c#jqueryajaxjsonasp.net-mvc
30
Rob Scott

JSONはテキスト形式であるため、JSONを使用してファイル（任意のバイナリデータ）をアップロードすることはできません。マルチパートフォームデータを使用する必要があります。

// create model for controller
var model = new FormData();
model.append('Name', $.trim($contestForm.find('[name="nombre"]').val()) + ' ' + $.trim($contestForm.find('[name="apellido"]').val()));
model.append('Email', $.trim($contestForm.find('[name="email"]').val().toLowerCase()));
model.append('City', $.trim($contestForm.find('[name="cuidad"]').val()));
model.append('Title', $.trim($contestForm.find('[name="title"]').val()));
model.append('Description', $.trim($contestForm.find('[name="description"]').val()));
model.append('CountryCode', 'co');
model.append('Image', $contestForm.find('[name="file-es"]')[0].files[0]);  // this has the file for sure

$.ajax({
    url: '/Umbraco/api/ControllerName/CreateContestEntry',
    type: 'POST',
    dataType: 'json',
    data: model,
    processData: false,
    contentType: false,// not json
    complete: function (data) {
        var mediaId = $.parseJSON(data.responseText); //?

    },
    error: function (response) {
        console.log(response.responseText);
    }
});
22
Musa