knockout.jsを使用するMVC 5アプリケーションをどのようにデバッグしますか？

Question

私はJamie Munroの "ASP.NET MVC 5 with Bootstrap and Knockout.js"という本を取り上げています。私は経験豊富なプログラマーですが、MVCやWeb開発のアマチュアランクです。これは、これを行う方法を学ぶ試みです。

私はこの本を勉強していたので、私は自分のアプリケーションのどこかで間違いを犯しました。今は私のデータベースに投稿や編集を保存できません。そして、私はエラーが何であるか把握する方法を知らない。

このコード例では、一般的なエラーしか表示されません。内部例外またはエラーメッセージを公開する方法を知っておくと便利です。私は2つの質問、特定のものと一般的なものを持っている

self.errorSave = function() { 
    $('.body-content').prepend('<div class="alert alert-danger"><strong>Error!</strong> There was an error saving the author.</div>'); 
} 

：この一般的なエラーのバナーを生成するコードのスニペットは、このです。

具体的には、Webブラウザで詳細なエラーメッセージを表示するにはどうすればよいですか？

Generic：Webアプリケーションをどのようにデバッグしますか？私はVisual StudioでWebアプリケーションではないときにデバッグする方法を知っていますが、このエラーがトラップされることはありません。私のコントローラーやモデル、あるいは私のフォームのブレークポイントは私に有用な情報を与えてくれません。私はまた、ChromeとInternet Explorerでデバッガを試しましたが、それ以上のことを教えてくれない "Internal Server error：500"よりも便利なものを見つける方法が見つかりませんでした。

本のコード例では、ここで見つけることができます：https://github.com/oreillymedia/ASP_NET-MVC-5-with-Bootstrap-and-Knockout_js

の例では、私の知る限り、動作すること。私はローカルSQL Serverを持っていないので、私はそれを実行しませんでしたが、本当に必死ならば、2つのコードセットを並行して実行するように設定する必要があります。私のコードを比較すると、私のエラーを指摘しませんでした。もちろん、これは完全に機能した例であり、私のコードは本の1/3までしか最新ではありません。

私のアクションメソッドでは、最初のチェックはModelState.IsValidで、falseを返します。したがって、保存はありません。

public ActionResult Create([Bind(Include = "Id,FirstName,LastName,Biography")] Author author) 
    { 
     if (ModelState.IsValid) 
     { 
      db.Authors.Add(author); 
      db.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     return View(author); 
    } 

モデルバインドが正しく機能していないようです。こちらのフォームで

は、First Nameフィールドが設定されている方法です：モデル、Author.csで

 <div class="form-group"> 
      @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" }, data_bind = "value: author.firstName" }) 
       @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

：

public class Author 
{ 
    [JsonProperty(PropertyName ="id")] 
    public int Id { get; set; } 

    [JsonProperty(PropertyName = "firstName")] 
    [Display(Name = "First Name")] 
    [Required] 
    public string FirstName { get; set; } 

    [JsonProperty(PropertyName = "lastName")] 
    [Display(Name = "Last Name")] 
    [Required] 
    public string LastName { get; set; } 

    [JsonProperty(PropertyName = "biography")] 
    public string Biography { get; set; } 

    [JsonProperty(PropertyName = "books")] 
    public virtual ICollection<Book> Books { get; set; } 
} 

AuthorFormViewModel.jsは次のようになります。

function AuthorFormViewModel(author) { 

var self = this; 

//variables to track state during saving 
self.saveCompleted = ko.observable(false); 
self.sending = ko.observable(false); 

self.isCreating = author.id == 0; 

//variable to track changes to model 
self.author = { 
    id: author.id, 
    firstName: ko.observable(), 
    lastName: ko.observable(), 
    biography: ko.observable(), 
}; 

self.validateAndSave = function (form) { 
    if (!$(form).valid()) 
     return false; 

    self.sending(true); 

    //include anti forgery token 
    self.author.__RequestVerificationToken = form[0].value; 

    $.ajax({ 
     url: (self.isCreating) ? 'Create' : 'Edit', 
     type: 'post', 
     contentType: 'application/x-www-form-urlencoded', 
     data: ko.toJS(self.author) 
    }) 
    .success(self.successfulSave) 
    .error(self.errorSave) 
    .complete(function() { self.sending(false) }); 
}; 

self.successfulSave = function() { 
    self.saveCompleted(true); 

    $('.body-content').prepend('<div class="alert alert-success"><strong>Success!</strong> The author has been saved.</div>'); 
    setTimeout(function() { 
     if (self.isCreating) 
      location.href = './' 
     else 
      location.href = '../' 
    }, 1000); 
} 

self.errorSave = function() { 
    $('.body-content').prepend('<div class="alert alert-danger"><strong>Error!</strong> There was an error saving the author.</div>'); 
} 

}

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval", "/Scripts/ViewModels/AuthorFormViewModel.js") 
<script> 
    var viewModel = new AuthorFormViewModel(@Html.HtmlConvertToJson(Model)); 
    ko.applyBindings(viewModel); 
</script> 
} 

はまた、文字列は、@ Html.HtmlConvertToJson（モデル）から返されるだけでなく、フォーマットされ表示されます：最後に、作成/編集フォームの下部にあるスクリプトセクションは、一緒にこのような方法でそのすべてを結びつけるしようとします。 + STR { "ID"：0、 "firstNameの"：ヌル、 "lastNameの"：ヌル、 "伝記"：ヌル、 "ブック"：ヌル }システムこれは、Aの試みリターンを作成するものです。ウェブ。HtmlString

デバッグすると、ko.ApplyBindings（viewModel）;が表示されます。ステートメントは完全にスキップされます。 viewModelの構築中にエラーが発生する可能性があります（@ Html.HtmlConvertToJson（Model）ステートメントが成功したように見えます）が、エラーは利用できず、例外/ブレークポイント/呼び出しを取得する方法がわかりませんstack /何か私は調査することができます。

Answer 1

私はこの質問にフォローアップしたいと思いました。

最初に、私がバニラMVCで始めることを提案したコメント者に感謝します。それは忠実なアドバイスでした。私はこれらの過去数ヶ月に多くの夕べを過ごしました。そして、それは取る方がはるかに良い方向だと言ってうれしいです。

私はMVCの実践的な知識を身につけ、それを学ぶためのいくつかの小さなプロジェクトを作成した後、この問題に戻って解決できました。

これを見つけた人は、ここでエラーがあった場所です。

AuthorFormViewModelでは、私のコードはKnockoutを使用してモデルデータをフォームにバインドします。

self.author = { 
    id: author.id, 
    firstName: ko.observable(), 
    lastName: ko.observable(), 
    biography: ko.observable(), 
}; 

空の変数：

エラーは、右の変数は以下のように観察可能なノックアウトバインディングを設定しているのviewmodelの最上部にあります！ MVCモデルバインディングから渡されるオーサモデルにバインドされていません。

それは次のようになります。

self.author = { 
    id: author.id, 
    firstName: ko.observable(author.firstName), 
    lastName: ko.observable(author.lastName), 
    biography: ko.observable(author.biography), 
}; 

皮肉にエラーが全くMVC部分ではありませんでしたが、それは私が私がのために感謝していASP.NETとMVCを学ぶために引き起こさなかったことです。

私はこれほど多くの論理を得て、この簡単なエラーを解決したことはないと思います。