Ajax Asp .net MVC的Ajax js修改

许多新手C＃ASP .NET MVC程序员（以下称为mvc）都面临着使用Ajax发送数据的任务。 但是实际上，这项任务并不容易。

在我的工作中，我尝试遵守某些软件开发原则。 其中之一是最大程度地减少代码编写以及通用类和函数的创建。 正是这一原则建议对mvc使用jquery.unobtrusive-ajax.js和Ajax类。

在本文中，我们直接对Ajax.BeginForm感兴趣。

一个例子：

@using (Ajax.BeginForm("UploadAvatarImage", "Dashboard", null, new AjaxOptions {HttpMethod = "POST", OnSuccess = "UpdateAvatars()", OnFailure = "document.refresh()" }, new {Id = "UploadAvatartForm", enctype = "multipart/form-data" })) { <div class="input-group pt-1 pl-1"> <input type="file" name="avatarFile" class="form-control" id="fileUploaderControl" accept=".jpg"/> </div> <button class="btn btn-sm btn-primary btn-block m-1" type="submit" ></button> } 

面对Ajax.BeginForm不传递输入[type = file]的事实，我进行了全局搜索以找到此问题的解决方案。 每个解决方案上最喜欢的旧stackoverflow提供了相同的功能。 不要使用Ajax.BeginForm，不要使用FormData，不要使用php处理程序，甚至不要增加用于增加程序代码的技巧。

如前所述，在我的产品中，我坚持原则，并且由于找不到满足我要求的答案，因此我必须自己做所有事情。

需要做的第一件事是确定jquery.unobtrusive-ajax.js中的哪个函数负责生成数据。

 $(document).on("submit", "form[data-ajax=true]", function (evt) { var clickInfo = $(this).data(data_click) || [], clickTarget = $(this).data(data_target), isCancel = clickTarget && (clickTarget.hasClass("cancel") || clickTarget.attr('formnovalidate') !== undefined); evt.preventDefault(); if (!isCancel && !validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", //     data: clickInfo.concat($(this).serializeArray()) }); }); 

我们对函数$（this）.serializeArray（）感兴趣。 在变量$（this）中，进入表单<form />，然后将其实现为数组。 通过在控制台中对其进行测试，以及对其模拟序列化（），可以确定这些功能原则上不会加载文件。 因此决定重写它。

但是首先您需要解决下载文件的问题，为此，我们使用FileReader类。

 $(document).on("change", "form[data-ajax=true] input[type=file]", function (evt) { var form = $($(evt.target).parents("form")[0]); if (evt.target.files.length > 0) { var fileObj = evt.target.files[0]; var reader = new FileReader(); reader.onload = function () { evt.target.setAttribute("data-ajax-image-data", reader.result); form.find("button[type=submit]")[0].classList.remove("disabled"); } reader.onerror = function () { console.log("Error while loading"); form.find("button[type=submit]")[0].classList.remove("disabled"); } form.find("button[type=submit]")[0].classList.add("disabled"); reader.readAsDataURL(fileObj); } }); 

关于代码的一点点。

首先，我们绑定输入更改事件，选择落在“更改”上。

然后检查是否选择了文件。

如果选择了文件，则我们开始下载它。 问题在于数据需要存储在某个地方，在示例中，我们将数据写入对象本身的属性。

锁定确认按钮，直到下载文件。

如果发生错误，请将其写入控制台。 这不是该功能的最终版本，每个人都可以对其进行升级以满足自己的需求。

创建文件数据的加载之后，我们进行序列化的现代化。

 function selfFormSerializeArray(form) { var array = form.serializeArray(); for (var i = 0; i < form[0].length; i++) { if (form[0][i].type === "file") { var fileObj = form[0][i]; var data = fileObj.getAttribute("data-ajax-image-data") || ""; if (data !== "") { array.push({ name: fileObj.name, value: data }); // console.log("SUCCESS"); } else { //console.log("ERROR"); } } } return array; } 

并且我们在主函数中使用此函数。

 $(document).on("submit", "form[data-ajax=true]", function (evt) { var clickInfo = $(this).data(data_click) || [], clickTarget = $(this).data(data_target), isCancel = clickTarget && (clickTarget.hasClass("cancel") || clickTarget.attr('formnovalidate') !== undefined); evt.preventDefault(); if (!isCancel && !validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", data: clickInfo.concat(selfFormSerializeArray($(this))) // clickInfo.concat($(this).serializeArray()) }); }); 

完成后，您需要添加处理器和数据解析器。 赶时间，看起来像这样。

处理程序

 public PartialViewResult UploadAvatarImage() { if (!ImageHelper.LoadAvatarImage(this.Request.Form["avatarFile"])) { return null; } return PartialView("Null"); } 

帮手

 public static bool LoadAvatarImage(string data) { try { var file = AjaxFile.Create(data); return true; } catch (Exception ex) { return false; } 

解析器

 public AjaxFile(string data) { var infos = data.Split(','); this.Type = infos[0].Split(';')[0].Split(':')[1].Split('/')[1]; this.Source = Convert.FromBase64String(infos[1]); ; } public static AjaxFile Create(string data) { return new AjaxFile(data); } 

恭喜你！ 现在，您可以使用标准Ajax for mvc上传文件。