1

私は、「シングル ページ アプリ」を作成するKnockoutjs の優れたメールの例に基づいて、シングル ページ アプリに取り組んできました。Steve Sanderson の例では、例のすべてのフォームのページに存在する jQuery テンプレートを使用しています。

このシナリオに .ascx を組み込もうとしています。ユーザーがリストの行をクリックすると、.ascx を .load してレコードが表示されます。送信すると、フォーム データはコントローラーに正常に送信されますが、戻り値は .ajax 呼び出しの成功、失敗、または完了したメソッドにはヒットしません。代わりに、ブラウザーはユーザーに応答をダウンロードするよう警告します。

私はこれに着実に取り組んでおり、さらに光を当てる可能性のある追加情報を見つけました. viewModel.updateWorksheet送信ボタンはメソッドに実行されません。フォームをコントローラーに直接送信します。data-bind="submit: provViewModel.updateWorksheet"formタグのknockoutjs属性に何か問題がありますか?

コントローラーは、次のメソッドで json を受け取ります。

public JsonResult WorksheetUpdateAjax( WorksheetDTO worksheetDTO)
{
  //(some code here)

  try
  {
    _wksRepos.Update();
  }
  catch (Exception e)
  {
    return Json(e.Message, JsonRequestBehavior.AllowGet);
  }
  return Json("Successfully updated", JsonRequestBehavior.AllowGet);
}

フォーム タグと送信ボタンは次のようになります。

<form name="wokrsheetAddOrEdit" 
      class="ui-widget" 
      data-bind="submit: viewModel.updateWorksheet" action="/WorksheetUpdateAjax">
    <br /><br />
    (html here)<br /><br />
    <button type="submit">Update</button>
    <br />
</form>

これがviewModel宣言です（多くは省略されています）

viewModel = {
    updateWorksheet: function () {
        $.validator.unobtrusive.parse("#worksheetForm");
        if (!$('#worksheetForm').valid()) {
            return false;
        }
        var worksheetJson = ko.toJSON({
            worksheetDTO: provViewModel.selectedWorksheet
        });

        //ko.utils.postJson($("form").wokrsheetAddOrEdit, worksheetJson); -- tried this but does the same
        $.ajax({
            url: $("form").worksheetAddOrEdit,
            type: "POST",
            data: worksheetJson,
            dataType: "json",
            success: function (data) {
                // here I'd like to return to the app
            },
            failure: function (data) {
                alert(data);
                return false;
            }
        });
    }
}
4

1 に答える 1

1

私は答えを見つけました...

.load（）が使用されるため、ko.applyBindingsをリセットする必要があります。

viewModel.selectedWorksheet = ko.dependentObservable(function () {
  var worksheetIdToFind = this.selectedWorksheetId();
  var worksheetToReturn = ko.utils.arrayFirst(viewModel.currentProvWorksheets(), function (item) { return item.Id == worksheetIdToFind; });
  if (worksheetIdToFind) {
    $("#worksheetForm").load("/Provider/GetWorksheetForm/" + worksheetIdToFind,
        function () {
            var theForm = document.forms.worksheetAddOrEdit;
            ko.applyBindingsToNode(theForm, null, provViewModel);
        });
}
return worksheetToReturn;  }, viewModel);

（フォーム名のworksheetAddOrEditのスペルミスも、私の正気をあまり助けませんでした）

于 2011-08-10T21:19:44.447 に答える