knockout.js를 사용하는 MVC 5 응용 프로그램을 어떻게 디버그합니까?

Question

Jamie Munro의 "ASP.NET MVC 5 with Bootstrap and Knockout.js"라는 책을 통해 작업하고 있습니다. 저는 경험 많은 프로그래머이지만 MVC와 웹 개발을하는 아마추어 랭킹입니다. 이것은 어떻게하는지 배우려는 시도입니다.

나는이 책을 작업하면서 응용 프로그램의 어딘가에서 실수를 범 했으므로 데이터베이스에 제출 또는 편집을 저장할 수 없습니다. 그리고 나는 그 오류가 무엇인지 알아내는 방법을 모른다.

예제 코드는 일반적인 오류 만 나타냅니다. 내부 예외 또는 오류 메시지를 노출하는 방법을 알고 있으면 도움이됩니다. 이 일반 오류 배너를 생성하는 코드의 조각은 이것이다 :

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

나는 두 가지 질문, 특정 하나는 일반적인 있습니다.

구체적으로 어떻게하면 웹 브라우저에서 자세한 오류 메시지를 볼 수 있습니까?

일반 : 웹 응용 프로그램을 디버깅하는 방법은 무엇입니까? Visual Studio에서 웹 응용 프로그램이 아닌 디버깅하는 방법을 알고 있지만이 오류가 발생하지 않습니다. 내 컨트롤러 또는 모델의 중단 점 또는 심지어 내 양식이 유용한 정보를 제공하지 않습니다. 또한 Chrome과 Internet Explorer에서 디버거를 사용해 보았지만 "내부 서버 오류 : 500"보다 유용한 것을 얻지 못했습니다. 그러면이 모든 것을별로 알려주지 않습니다.

책의 코드 예제는 여기에서 찾을 수 있습니다 : https://github.com/oreillymedia/ASP_NET-MVC-5-with-Bootstrap-and-Knockout_js

그 예는 내가 아는 한, 작동합니다. 로컬 SQL Server가 없기 때문에 실행하지 못했지만 필자가 정말로 필사적이라면 두 세트의 코드를 나란히 실행하도록 설정해야 할 것입니다. 내 코드를 내 오류와 비교하지 않았다. 물론 이것은 완전히 작동되는 예제이며 내 코드는이 책을 통해 1/3에 불과합니다.

내 작업 메서드에서 첫 번째 검사는 false를 반환하는 ModelState.IsValid입니다. 따라서 저장하지 않습니다.

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); 
    } 

모델 바인딩이 제대로 작동하지 않는 것으로 보입니다.

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는 다음과 같습니다 : 모델에서

 <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> 

Author.cs : 양식에서

, 여기에 이름 필드 설정 방법입니다

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 (모델)에서 반환 잘 서식이 나타납니다 14,마지막으로 작성/편집 양식의 맨 아래에있는 스크립트 부분은 함께 이러한 방법으로 모든 넥타이하려고합니다. + STR {NULL, "전기": 널 (null), "이 lastName" "ID": 0, "firstName을"널 (null), "책"널 } 시스템이는 시도 수익을 생성하는 것이다. 편물.HtmlString

디버깅 할 때 ko.ApplyBindings (viewModel); 문을 완전히 건너 뜁니다. 어쩌면 viewModel 생성 중에 오류가 발생합니다 (@ Html.HtmlConvertToJson (Model) 문이 성공적으로 나타남). 그러나 그 오류를 사용할 수 없다는 사실에 좌절감을 느낍니다. 예외/중단 점/호출을 얻는 방법을 알 수 없습니다. stack/뭔가 조사 할 수 있도록.

Answer 1

나는이 질문에 후속 조치를 원했다.

먼저 바닐라 MVC로 시작하는 의견 제시자에게 감사드립니다. 그것은 충실한 조언이었습니다. 저는 지난 몇 달간 많은 저녁을 보냈습니다. 그게 훨씬 좋은 방향이라고 말할 수있어서 기쁩니다.

MVC에 대한 확실한 지식을 습득하고 그것을 배우기 위해 몇 가지 소규모 프로젝트를 작성한 후에이 문제로 돌아와 해결할 수있었습니다.

오류를 발견 한 사람은 누구나 여기에 오류가 있습니다.

AuthorFormViewModel에서 내 코드는 녹아웃을 사용하여 모형 데이터를 양식에 바인딩합니다.

오류는 바로 변수로 관찰 녹아웃 바인딩을 설정하는 뷰 모델의 상단에 :

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

빈 변수! 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를 배우고 원인 않은 것입니다 .

나는 이처럼 간단한 오류를 해결하는 많은 논리를 얻지 못했다고 생각합니다.