Одностраничное приложение отправляет привязку к тегу формы, не работает - PullRequest
Новая
       19

Одностраничное приложение отправляет привязку к тегу формы, не работает

1 голос
/ 09 августа 2011

Я работал над одностраничным приложением, основываясь на «превосходном» почтовом примере Knockoutjs о создании «одностраничного приложения».Пример Стива Сандерсона использует шаблоны jQuery, которые находятся на странице для всех форм в этом примере.

Я пытаюсь включить .ascx в этот сценарий: пользователь нажимает на строку из списка, который вызываетзапись путем загрузки .ascx.При отправке формы данные успешно отправляются в контроллер, но при возврате не происходит успешных, неудачных или даже завершенных методов вызова .ajax.Вместо этого браузер предупреждает пользователя о необходимости загрузить ответ.

Я постоянно работал над этим и нашел дополнительную информацию, которая может пролить немного света.Кнопка отправки не работает с методом viewModel.updateWorksheet.Он отправляет форму непосредственно контролеру.Я делаю что-то не так с атрибутом knockoutjs data-bind="submit: provViewModel.updateWorksheet" в теге формы?

Контроллер получает 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);
}

Тег формы и кнопка Отправить выглядят какthis: 

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

1 Ответ

1 голос
/ 11 августа 2011

Я нашел ответ ...

Так как .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);

(также мой орфографический ордер на листеAddOrEdit в формеимя не очень помогло моему здравомыслию)

...