我有一个控制器,有一个Create
行动。其目的是从文件形式接收名称和数据,并且IndexViewModel
return IEnumerable<File>
files.
public class HomeController : Controller
{
static List<Models.File> files = new List<Models.File>();
public HomeController() { }
[HttpGet]
public IActionResult Index() => View(new IndexViewModel { Files = files });
[HttpGet]
public IActionResult Create() => View();
[HttpPost]
public IActionResult Create(IFormFile file)
{
var filename =
ContentDispositionHeaderValue.Parse(file.ContentDisposition)
.FileName;
using (var reader = new StreamReader(file.OpenReadStream()))
{
var content = reader.ReadToEnd();
files.Add(new Models.File { Name = filename, Data = content });
}
return RedirectToAction(nameof(Index));
}
}
当我在静态中使用表单时html,没关系,服务器接收到数据了。但是当我在一个中使用相同的形式时Angular2模板却没有。
import {Component} from 'angular2/core';
import {File} from './file';
@Component({
selector: 'listfile',
template: `
<form method="post" asp-action="Index" asp-controller="Api/File" enctype="multipart/form-data">
<input type="file" name="files" #newFile (keyup.enter)="addFile(newFile.value)"
(blur)="addFile(newFile.value); newFile.value='' ">
<input type="submit" value="Upload" />
</form>
<table class="table">
<th>id</th><th>name</th>
<tr *ngFor="#file of files">
<td>{{file.id}}</td>
<td>{{file.name}}</td>
</tr>
</table>
`
})
export class ListFileComponent {
files = [
new File(1, 'file1'),
new File(2, 'file2')
];
addFile(newFile: string) {
if (newFile) {
this.files.push(new File(this.files.length + 1, newFile.split(/(\\|\/)/g).pop()))
}
}
falert(value) {
alert(value);
}
}
你对以下内容有一个误解Angular2模板化和MVC预处理。这是一个帖子 https://ievangelistblog.wordpress.com/2016/01/13/building-an-angular2-spa-with-asp-net-5-mvc-6-web-api-2-and-typescript-1-7-5/这可能会澄清这一点。你有ASP.NET标签助手不会在服务器上呈现,而是按原样发送到客户端。
您正在使用传递表单数据的表单帖子 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data,相反,你应该使用Web API with Angular2 的 Http https://angular.io/docs/ts/latest/api/http/index/Http-class.html服务。
您有很多选择,但目前其中两个是最实用的:
- 您可以选择使用以下的力量MVC进行预处理并让部分视图返回表单。在您的组件中,您使用
templateUrl
而不是template
并指向/controller/action
这将预处理标签助手并根据需要返回 HTML(然后这将用作Angular2模板。
- 您可以开始利用Angular2作为一个真实的SPA,并且只使用 MVC 来服务单个页面......
/home/index
。然后你使用templateUrl
指向本地.html
用作模板的文件。并构建一个 API 来支持您所需的所有交互。
我希望这能解决问题!
If you are going to use the inline or the static
.html
you'll need to remove the
ASP.NET tag helpers.
@Component({
selector: 'listfile',
template: `
<form (submit)="" >
<input type="file" name="files" #newFile (keyup.enter)="addFile(newFile.value)"
(blur)="addFile(newFile.value); newFile.value='' ">
<input type="submit" value="Upload" />
</form>
<table class="table">
<th>id</th><th>name</th>
<tr *ngFor="#file of files">
<td>{{file.id}}</td>
<td>{{file.name}}</td>
</tr>
</table>
`
})
export class ListFileComponent {
// ...
constructor(private http: Http) { }
onSubmit() {
const body = JSON.stringify({ this.files });
this.http
.post('api/file/create',
body,
{ headers: new Headers({ "Content-Type": "application/json" }) })
.map(response => response.json())
.subscribe(json => { /* handle it */ });
}
}
然后,您必须更改 API 签名才能更准确地接受数据。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)