根據控制器響應動態更改視圖的各個部分

Question

我正在尋找以下方案的最佳方法建議：

• 用戶可以選擇一個或多個csv文件進行驗證（附件1），其中“驗證”按鈕單擊會通過驗證代碼（顯示進度條直到它返回輸出）。
• 返回響應是成功消息或選擇用於驗證的每個文件的錯誤詳細信息（附件2）
• 現在可以使用“上傳”按鈕將成功驗證的文件上載到azure存儲。

附件1

附件2

現在，為了使一切都異步 ，我的想法是視圖需要為每個文件都有單獨的靈活部分。

我正在使用knockout.js處理MVC5 razor視圖，我對部分視圖有不錯的想法，但我不確定如何解決這個問題。 如果不是部分觀點，那么最好的方法是什么。

Answer 1

我的想法是視圖需要為每個文件都有單獨的靈活部分

我認為你需要的是一個單獨的模型/類文件，以便按需運行ajax命令，至少這是我理解你的解釋。

看看這個jsfiddle，我添加了一些隨機的true / false和字符串，試着盡可能快地模仿你的布局。 對於測試嘗試使用5個或更多文件（隨機生成器在JS中有點挑剔）。

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

所以基本上你在文件輸入上監聽一個更改事件。 在這種情況下，將每個文件映射到新模型“FileModel”，然后將其推入observableArray文件。 每個FileModel都有自己獨立的結果，驗證功能等。然后布局負責其余部分。

您需要查看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); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-md-push-3"> <div class="form-group"> <div class="input-group"> <input type="file" class="form-control" id="your-files" multiple> <span class="input-group-btn"> <button class="btn btn-info" data-bind="click: ClearFiles">Clear</button> </span> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <h4>Validate Files</h4> <!-- ko if: Files().length > 0 --> <table class="table table-condensed table-hover"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Size (bytes)</th> </tr> </thead> <tbody> <!-- ko foreach: Files --> <tr data-bind="css: IsValid() ? 'success' : ''"> <td><span data-bind="text: Name"></span> </td> <td><span data-bind="text: Type"></span> </td> <td><span data-bind="text: Size"></span> </td> <td> <button class="btn btn-sm btn-success" data-bind="click: ValidateFile, visible: !IsValidated()">Validate</button> <button class="btn btn-sm btn-success" data-bind="click: UploadFile, visible: IsValid()">Upload</button> </td> </tr> <!-- /ko --> </tbody> </table> <!-- /ko --> </div> <div class="col-sm-6"> <h4>File Errors</h4> <!-- ko if: FileErrors() --> <table class="table table-hovered"> <thead> <tr> <th>Name</th> <th>Error Message</th> </tr> </thead> <tbody> <!-- ko foreach: Files --> <!-- ko if: IsValid() == false --> <tr> <td data-bind="text: Name"></td> <td data-bind="text: ValidationErrors"></td> </tr> <!-- /ko --> <!-- /ko --> </tbody> </table> <!-- /ko --> </div> </div> </div> 

Answer 2

以下簡單算法怎么樣？
讓我們在你的html中假設你有一個<div id =“allFiles”>

您可以在主視圖文件中編寫以下內容

 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代碼就可以在文件驗證完成后替換部分頁面

Answer 3

使用局部視圖將起作用。 只需要一個具有基本表格布局的局部視圖即可滿足您的需求。 然后有

<div id='partial'/>

在您隱藏的主窗體中。 使用knockout或jquery將文件發布到您的上傳操作。 讓動作返回您的局部視圖。 然后使用knockout或jquery的成功回調，做這樣的事情：

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

插入部分視圖的html