根据控制器响应动态更改视图部分 [英] Changing parts of view dynamically based on controller response

问题描述

我正在寻找以下情况的最佳方法建议:

I'm looking for best approach suggestions for the below scenario:

• 用户可以选择一个或多个要验证的csv文件(附件1)，在验证"按钮上单击可通过验证码(显示进度条，直到返回输出).
• 返回响应可以是成功消息，也可以是每个要验证的文件的错误详细信息(附件2)
• 现在可以使用上传"按钮将已成功验证的文件上传到Azure存储.

附件1

附件2

现在，要使所有内容异步，我认为视图需要为每个文件具有单独的灵活部分.

Now, to make everything asynchronous, my thought is that the view needs to have individual flexible section for each file.

我正在使用基因敲除(snockout.js)处理MVC5剃刀视图，我对局部视图有不错的想法，但是我不确定如何做到这一点.如果不是局部视图，那将是最好的方法.

I'm working with MVC5 razor views with knockout.js, I have decent idea about partial views but I am not certain on how to go about this. If not partial views, then what would be the best approach.

推荐答案

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

my thought is that the view needs to have individual flexible section for each file

种类，我认为您需要的是文件的单独模型/类，以便按需运行ajax命令，至少这就是我理解您的解释的方式.

Kind of, what I think you need is a separate model/class for the files in order to run ajax commands on demand, at least that's how I understood your explanation.

查看此jsfiddle，我添加了一些随机的true/false和字符串内容，以尝试尽快模拟您的布局.为了进行测试，请尝试使用5个或更多文件(在JS中，随机生成器有点挑剔).

Check out this jsfiddle, I have added some random true/false and string stuff to try and mimic your layout as quickly as possible. For testing try to use 5 or more files (random generators are kind of finicky in JS).

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

因此，从本质上讲，您在文件输入上侦听更改事件.在这种情况下，将每个文件映射到新模型"FileModel"，然后将其推入observableArray文件中.每个FileModel都有其自己的单独结果，验证功能等.然后布局将负责其余的工作.

So essentially you listen for a change event on the file input. Map each file to a new model "FileModel" in this case, then push it into the observableArray Files. Each FileModel houses it's own individual results, validation functions etc. Then the layout takes care of the rest.

您需要研究FormData Web API才能处理Javascript中的文件.如果您的客户/用户使用的是过时的浏览器，则对于FormData内容，jquery以及您所拥有的内容，将有填充/填充. https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

You will have need to look into the FormData Web API in order to do stuff with the files in Javascript. If your clients/users are using outdated browsers there a shims/polyfills for the FormData stuff, jquery and what have you. 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>

这篇关于根据控制器响应动态更改视图部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！