根据控制器响应动态更改视图的各个部分

我正在寻找以下方案的最佳方法建议：

• 用户可以选择一个或多个csv文件进行validation（附件1），其中“validation”按钮单击会通过validation代码（显示进度条直到它返回输出）。
• 返回响应是成功消息或选择用于validation的每个文件的错误详细信息（附件2）
• 现在可以使用“上传”按钮将成功validation的文件上载到azure存储。

附件1

附件2

现在，为了使一切都异步 ，我的想法是视图需要为每个文件提供单独的灵活部分。

我正在使用knockout.js处理MVC5 razor视图，我对部分视图有不错的想法，但我不确定如何解决这个问题。 如果不是部分观点，那么最好的方法是什么。

Answer 1

我的想法是视图需要为每个文件都有单独的灵活部分

我认为你需要的是一个单独的模型/类文件，以便按需运行ajax命令，至少这是我理解你的解释。

看看这个jsfiddle，我添加了一些随机的true / false和string东西，试着尽可能快地模仿你的布局。 对于测试尝试使用5个或更多文件（随机生成器在JS中有点挑剔）。

https://jsfiddle.net/n2ne6yLh/10/

所以基本上你在文件输入上监听一个更改事件。 在这种情况下，将每个文件映射到新模型“FileModel”，然后将其推入observableArray文件。 每个FileModel都有自己独立的结果，validationfunction等。然后布局负责其余部分。

您需要查看FormData Web API，以便在Javascript中处理文件。 如果您的客户/用户使用过时的浏览器，那么FormData的东西，jquery和你有什么样的填充/填充。 https://developer.mozilla.org/en-US/docs/Web/API/FormData

var PageModel = function(r) { var self = this; this.Files = ko.observableArray(); this.FileErrors = ko.computed(function() { return _.some(self.Files(), function(file) { return file.IsValid() === false; }); }); this.ClearFiles = function() { document.getElementById("your-files").value = ""; self.Files([]); }; var control = document.getElementById("your-files"); control.addEventListener("change", function(event) { // When the control has changed, there are new files var i = 0, files = control.files, len = files.length; var form = new FormData(); for (; i < len; i++) { form.append(files[i].name, files[i]); self.Files.push(new FileModel(files[i], files[i])); } }, false); } var FileModel = function(r, fileObject) { var self = this; this.FileObject = fileObject; this.Name = r.name; this.Type = r.type; this.Size = r.size; this.IsValidated = ko.observable(false); this.IsValid = ko.observable(); this.ValidationErrors = ko.observable(); this.ValidateFile = function() { //Do some ajax to validate file //console.log('Doing an ajax thing.') // Randomizers for validation, remove in production var random_boolean = Math.random() >= 0.5; var random_strins = Math.random().toString(36).substring(7); // Set vals based on returned ajax response. self.IsValidated(true); self.IsValid(random_boolean); self.ValidationErrors(random_strins); }; this.UploadFile = function() { alert('uploading this file to the interwebs, yay!') } } window.model = new PageModel(); ko.applyBindings(model); 

    
 
 
 
 
   Clear  
 
 
 
 
 
 
 
 
Validate Files
  
 
 
 
Name
 
Type
 
Size (bytes)
 
 
 
  
 
 
 
 
 
 
 
 Validate Upload 
 
  
 
  
 
 
File Errors
  
 
 
 
Name
 
Error Message
 
 
 
   
 
 
 
   
 
  
 
  

Answer 2

以下简单算法怎么样？
让我们在你的html中假设你有一个

您可以在主视图文件中编写以下内容

  function validateFiles(filesToValidate)) { foreach(file in filesToValidate) { var fileDivWithIdTheNameOfTheFile = @Html.RenderPartial("A_View_WithProgressBar",file) allFiles.AddElement(fileDivWithIdTheNameOfTheFile ); ajax.Get("YourActionThatReturnsAResultView",file) .OnSuccess(args) { FindDivForCurrentFile.ReplaceWith(args.ResultView) } } } 

这样大多数代码都在ServerSide上，只需一些jquery代码就可以在文件validation完成后替换部分页面

Answer 3

使用局部视图将起作用。 只需要一个具有基本表格布局的局部视图即可满足您的需求。 然后有

在您隐藏的主窗体中。 使用knockout或jquery将您的文件发布到您的上传操作。 让动作返回您的局部视图。 然后使用knockout或jquery的成功回调，做这样的事情：

 success: function(data) { $('#partial').html(data); } 

插入部分视图的html