Как сделать запись формы ASP.NET MVC Ajax с multipart/form-data?
Я работаю над веб-сайтом ASP.NET MVC, у которого есть форма, позволяющая загружать файлы с помощью параметра многомерного / формального данных в теге формы, например:
<form enctype="multipart/form-data" method="post" action='<%= Url.Action("Post","Entries",new {id=ViewData.Model.MemberDetermination.DeterminationMemberID}) %>'>
Как бы я написал это, чтобы сделать вместо этого сообщение формы Ajax ASP.NET MVC?
11 ответов
- Вы можете использовать некоторые дополнительные загрузчики (например, загрузчик нескольких файлов jQuery) (я предпочитаю этот способ, и я предпочитаю не использовать MS Ajax)
Использование:
AjaxHelper.BeginForm("Post", "Entries", new {id=ViewData.Model.MemberDetermination.DeterminationMemberID}, new AjaxOptions(){/*some options*/}, new {enctype="multipart/form-data"})
Но во втором случае я не уверен, что это сработает.
Это возможно, но это долгий путь. Шаг 1: напишите вашу форму
например:
@using (Ajax.BeginForm(YourMethod, YourController, new { id= Model.Id }, new AjaxOptions {//needed options }, new { enctype = "multipart/form-data" }))
{
<input type="file" id="image" name="image" />
<input type="submit" value="Modify" />
}
Шаг 2: перехватить запрос и отправить его на сервер
<script type="text/javascript">
$(function() {
$("#form0").submit(function(event) {
var dataString;
event.preventDefault();
var action = $("#form0").attr("action");
if ($("#form0").attr("enctype") == "multipart/form-data") {
//this only works in some browsers.
//purpose? to submit files over ajax. because screw iframes.
//also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
dataString = new FormData($("#form0").get(0));
contentType = false;
processData = false;
} else {
// regular form, do your own thing if you need it
}
$.ajax({
type: "POST",
url: action,
data: dataString,
dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
contentType: contentType,
processData: processData,
success: function(data) {
//BTW, data is one of the worst names you can make for a variable
//handleSuccessFunctionHERE(data);
},
error: function(jqXHR, textStatus, errorThrown) {
//do your own thing
alert("fail");
}
});
}); //end .submit()
});
</script>
Шаг 3: Поскольку вы делаете вызов ajax, вы, вероятно, хотите заменить какое-либо изображение или что-то multipart/form-data
например:
handleSuccessFunctionHERE(data)
{
$.ajax({
type: "GET",
url: "/Profile/GetImageModified",
data: {},
dataType: "text",
success: function (MSG) {
$("#imageUploaded").attr("src", "data:image/gif;base64,"+msg);
},
error: function (msg) {
alert(msg);
}
});
}
Переменная MSG является зашифрованной строкой base64. В моем случае это источник изображения.
Таким образом, мне удалось изменить изображение профиля, и после этого изображение немедленно обновляется. Также убедитесь, что вы добавляете в Application_Start (global.asax)ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());Довольно мило нет?
PS: Это решение работает, поэтому не стесняйтесь спрашивать более подробную информацию.
Я наткнулся на этот маленький взлом, который решает его красиво
window.addEventListener("submit", function (e) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
if (updateTarget) {
updateTarget.innerHTML = xhr.responseText;
}
}
}
};
xhr.send(new FormData(form));
}
}
}, true);
Код, который я использовал, и он работает! Это копия решения @James 'Fluffy' Burton. Я просто импровизирую его ответ, чтобы люди, которые являются новичками в MVC, смогут быстро понять последствия.
Следующее мое мнение:
@using (Ajax.BeginForm("FileUploader", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "AjaxUpdatePanel" }, new { enctype = "multipart/form-data", id = "frmUploader" })){
<div id="AjaxUpdatePanel">
<div class="form-group">
<input type="file" id="dataFile" name="upload" />
</div>
<div class="form-group">
<input type="submit" value="Upload" class="btn btn-default" id="btnUpload"/>
</div>
</div>}
<script>
window.addEventListener("submit", function (e) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
if (updateTarget) {
updateTarget.innerHTML = xhr.responseText;
}
}
}
};
xhr.send(new FormData(form));
}
}
}, true);
Ниже мой контроллер:
[HttpPost]
public JsonResult FileUploader(HttpPostedFileBase upload)
{
if (ModelState.IsValid)
{
if (upload != null && upload.ContentLength > 0)
{
if (upload.FileName.EndsWith(".csv"))
{
Stream stream = upload.InputStream;
DataTable csvTable = new DataTable();
using (CsvReader csvReader = new CsvReader(new StreamReader(stream), true))
{
csvTable.Load(csvReader);
}
}
else
{
return Json(new { dataerror = true, errormsg = "This file format is not supported" });
}
}
else
{
return Json(new { dataerror = true, errormsg = "Please Upload Your file" });
}
}
return Json(new { result = true });
}
Ниже приведено краткое примечание к приведенному выше коду: с помощью Ajax я разместил свой файл excel (*.csv) на сервере и прочитал его в DataTable с помощью пакета Nuget (LumenWorksCsvReader).
Ура! Оно работает. Спасибо @James
Плагин jquery forms поддерживает загрузку файлов таким образом.
Для тех, у кого еще есть проблемы с использованием @Ajax.BeginForm для многочастных энктипов / загрузок файлов в MVC
Диагностика и предлагаемое решение
Запуск инструмента "Проверка элемента" на элементе формы, созданном @Ajax.BeginForm Помощник обнаруживает, что помощник, совершенно необъяснимо, переопределяет указанный параметр контроллера. Это тот случай, если вы реализовали отдельный контроллер для частичной обратной передачи.
Быстрое решение проблемы заключается в явном указании значения атрибута действия html как /<yourcontrollername>/<youractionname>,
пример
@using (Ajax.BeginForm("", "", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "<TargetElementId>", InsertionMode = InsertionMode.Replace }, new { enctype = "multipart/form-data", action = "/<Controller>/<Action>" }))
Я на самом деле ответил на вопрос сам...
<% using (Ajax.BeginForm("Post", "Entries", new { id = ViewData.Model.MemberDetermination.DeterminationMemberID }, new AjaxOptions { UpdateTargetId = "dc_goal_placeholder" }, new { enctype = "multipart/form-data" }))
Если вам нужно использовать OnSuccess AjaxOption и / или использование Request.IsAjaxRequest() в контроллере проверить тип запроса т.е.
@using (Ajax.BeginForm("FileUploader", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "elementToUpdate", OnSuccess = "mySuccessFuntion(returnedData)", OnFailure = "myFailureFuntion(returnedData)"}, new { enctype = "multipart/form-data" }))
Затем вы можете использовать следующий код (я изменил ответ @James 'Fluffy' Burton). Это также преобразует текст ответа в объект JSON, если это возможно (вы можете опустить это, если хотите).
<script>
if(typeof window.FormData === 'undefined') {
alert("This browser doesn't support HTML5 file uploads!");
}
window.addEventListener("submit", function (e) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.setRequestHeader("x-Requested-With", "XMLHttpRequest"); // this allows 'Request.IsAjaxRequest()' to work in the controller code
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var returnedData; //this variable needs to be named the same as the parameter in the function call specified for the AjaxOptions.OnSuccess
try {
returnedData = JSON.parse(xhr.responseText); //I also want my returned data to be parsed if it is a JSON object
}catch(e){
returnedData = xhr.responseText;
}
if (form.dataset.ajaxSuccess) {
eval(form.dataset.ajaxSuccess); //converts function text to real function and executes (not very safe though)
}
else if (form.dataset.ajaxFailure) {
eval(form.dataset.ajaxFailure);
}
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
if (updateTarget) {
updateTarget.innerHTML = data;
}
}
}
};
xhr.send(new FormData(form));
}
}
}, true);
</script>
NB Я использую функцию JavaScript eval() преобразовать строку в функцию... если у кого-то есть лучшее решение, пожалуйста, прокомментируйте. Я также использую JQuery JSON.parse() так что это не ванильное решение javascript, но для работы скрипта не требуется, чтобы его можно было удалить.
Я смешал ответ Брэда Ларсона с Амирхосейном Мехрварзи, потому что в ответе Брэда не было никакого способа справиться с ответом, а Амирхосейн вызывал 2 постбэка. Я просто добавил ($('#formBacklink'). Valid()) для вызова проверки модели перед отправкой.
window.addEventListener("submit", function (e) {
if ($('#formBacklink').valid()) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var dataString;
event.preventDefault();
var action = $("#formBacklink").attr("action");
if ($("#formBacklink").attr("enctype") == "multipart/form-data") {
//this only works in some browsers.
//purpose? to submit files over ajax. because screw iframes.
//also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
dataString = new FormData($("#formBacklink").get(0));
contentType = false;
processData = false;
} else {
// regular form, do your own thing if you need it
}
$.ajax({
type: "POST",
url: action,
data: dataString,
dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
contentType: contentType,
processData: processData,
success: function (data) {
//BTW, data is one of the worst names you can make for a variable
//handleSuccessFunctionHERE(data);
},
error: function (jqXHR, textStatus, errorThrown) {
//do your own thing
}
});
}
}
}
}, true);
Вы можете использовать этот код вместо Eval
var body = "function(a){ " + form.dataset.ajaxSuccess + "(a) }";
var wrap = s => "{ return " + body + " };"
var func = new Function(wrap(body));
func.call(null).call(null, returnedData);
Из моего небольшого расследования. Все ответы, приведенные выше, кажутся правильными, в зависимости от проблемы, с которой сталкивается Ajax.BeginForm. Однако я только что заметил, что проблема в некоторых случаях связана с библиотекой javascript ~/Scripts/jquery.unobtrusive-ajax.min.js. Так что в моем случае я просто удалил его из модели представления и решил использовать вместо этого плагин JQuery Form для своей необходимой потребности вместе с HTML-формой. Это было предложено выше.
Ajax.BegineForm() работает с данными многоэлементной формы, и вот пример рабочего кода для того же:
Посмотреть:
@using(Ajax.BeginForm("UploadFile","MyPOC",
new AjaxOptions {
HttpMethod = "POST"
},
new
{
enctype = "multipart/form-data"
}))
{
<input type="file" name="files" id="fileUploaderControl" />
<input type="submit" value="Upload" id="btnFileUpload" />
}
Метод действия контроллера:
public void UploadFile(IEnumerable<HttpPostedFileBase> files)
{
HttpPostedFileBase file = files.FirstOrDefault(); //Attach a debugger here and check whether you are getting your file on server side or null.
if (file != null && file.ContentLength > 0)
{
//Do other validations before saving the file
//Save File
file.SaveAs(path);
}
}
PS Убедитесь, что атрибут "name" элемента управления загрузчиком файлов и имя параметра, переданного в метод действия UploadFile(), должны быть одинаковыми (то есть "файлы" в данном случае).