1

我一直在基于 Knockoutjs的创建“单页应用程序”的优秀邮件示例开发单页应用程序。Steve Sanderson 的示例为示例中的所有表单使用驻留在页面中的 jQuery 模板。

我正在尝试将 .ascx 合并到此场景中：用户单击列表中的一行，该行通过加载 .ascx 来显示记录。在提交表单数据成功地进入控制器，但返回没有达到成功、失败甚至 .ajax 调用的完成方法。相反，浏览器会提醒用户下载响应。

我一直在稳步研究这个问题，并发现了一些可能会带来更多启示的附加信息。提交按钮不会运行到该viewModel.updateWorksheet方法。它将表单直接提交给控制器。data-bind="submit: provViewModel.updateWorksheet"我对表单标签上的 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 回答