1

私はSammyを使用してSPAアプリケーションを作成しようとしています。 #/ entitycreateリンクを呼び出すと、送信するHTMLフォームを含むホームコントローラからの部分的なビューが返されます。部分的な見方は私が期待する通りに来るが、それの残りはうまくいかない。私の問題や質問は以下の通りです。何か助けていただければ幸いです。部分図からAPIへのフォームポスト

  1. デフォルトのSPAプロジェクトテンプレート(home.viewmodel.jsを参照)で正確にどのように処理されたかにかかわらず、KOバインディングは部分的なビューでは機能しません。
  2. この1つは最も重要である:私はアヤックス/ポストと私のAPIには、このフォームを送信するとき、私のモデルはいつもので、私は私のAPIを経由してエンティティを作成することはできません、NULL値に戻ってきます。私は[FromBody]で試してみましたが、モデルは常にnullになります。ある意味で
  3. 一般的な質問は、私は私の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; 
} 

答えて

0

私は記事hereに基づいて、AJAXリクエストからcontentType: "application/json; charset=utf-8",を削除しました。 #2は解決され、#1と#3は依然として答えが残っています。