1
私はSammyを使用してSPAアプリケーションを作成しようとしています。 #/ entitycreateリンクを呼び出すと、送信するHTMLフォームを含むホームコントローラからの部分的なビューが返されます。部分的な見方は私が期待する通りに来るが、それの残りはうまくいかない。私の問題や質問は以下の通りです。何か助けていただければ幸いです。部分図からAPIへのフォームポスト
- デフォルトのSPAプロジェクトテンプレート(home.viewmodel.jsを参照)で正確にどのように処理されたかにかかわらず、KOバインディングは部分的なビューでは機能しません。
- この1つは最も重要である:私はアヤックス/ポストと私のAPIには、このフォームを送信するとき、私のモデルはいつもので、私は私のAPIを経由してエンティティを作成することはできません、NULL値に戻ってきます。私は[FromBody]で試してみましたが、モデルは常にnullになります。ある意味で
- 一般的な質問は、私は私のAPIアクションで私の形でHtml.AntiForgeryToken()と[ValidateAntiForgeryToken]属性を含める必要がありますか?
部分図:
@model namespace.SectorViewModel
<!-- ko with: sectorcreate -->
<div class="six wide column">
<div class="ui segments">
<div class="ui segment">
<h4 class="ui center aligned header">Create New Sector</h4>
</div>
<div class="ui secondary segment">
<form id="entity-create-form" class="ui form" action="#/sectorcreatepost" method="post" data-bind="submit: createEntity">
<!-- I am not sure if I should include AntiForgeryToken for WebAPI call -->
<!-- Html.AntiForgeryToken() -->
<fieldset>
<div class="field required">
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name, new { data_bind = "value: name" })
</div>
<div class="ui two buttons">
<button class="ui positive button" type="submit">Create</button>
<button class="ui button" type="button" id="operation-cancel">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- /ko -->
JSビューモデル:
function SectorCreateViewModel(app, dataModel) {
var self = this;
self.name = ko.observable("ko binding doesn't work");
self.createEntity = function() {
console.log("ko binding doesn't work");
}
Sammy(function() {
this.get("#sectorcreateget", function() {
$.ajax({
url: "/home/getview",
type: "get",
data: { viewName: "sectorcreate" },
success: function (view) {
$("#main").html(view);
}
});
return false;
});
this.post("#/sectorcreatepost",
function() {
$.ajax({
url: "/api/sectors",
type: "post",
data: $("#entity-create-form").serialize(),
contentType: "application/json; charset=utf-8",
success: function (response) {
console.log(response);
},
error: function (xhr, status, error) {
console.log(xhr);
console.log(status);
}
});
return false;
});
this.get("#/yeni-sektor", function() {
this.app.runRoute("get", "#sectorcreateget");
});
});
return self;
}
app.addViewModel({
name: "SectorCreate",
bindingMemberName: "sectorcreate",
factory: SectorCreateViewModel
});
APIの処置:
public HttpResponseMessage Post([FromBody]SectorViewModel model)
{
// model is always null, with or without [FromBody]
if (!ModelState.IsValid)
return Request.CreateResponse(HttpStatusCode.BadRequest);
// repository operations...
return response;
}