MVC3 & JQuery 对话框在打开对话框时不会提交表单

Question

我有一个用于在 MVC3 应用程序中搜索的对话框。对话框上的“搜索”按钮发布到 MVC3 控制器操作，该操作返回搜索结果的 JSON，然后将其解析为 HTML 表。当用户单击对话框上的“搜索”按钮时，所有这些都可以正常工作。

但是，在某些情况下，我希望在对话框打开后立即自动开始搜索。不幸的是，这不起作用。用户必须物理单击搜索按钮才能启动搜索。

我的代码如下所示：

$('#RepSearchDialog').dialog({
          autoOpen: true,
          width: 1050,
          height: 500,
          resizable: false,
          title: 'Rep Search',
          modal: true,
          open: function () {
            $('.ui-dialog-titlebar').hide();
            $('#RepSearchStoreId').val($('#StoreId').val());

            // This part doesn't work, not sure why
            //RepSearchDialog_SearchForReps();
          }
        });

搜索按钮有这样的JS：

 $('#RepSearchButton').click(function (e) {
      RepSearchDialog_SearchForReps();
    });

RepSearchDialog_SearchForReps 看起来像这样：

function RepSearchDialog_SearchForReps() {
    $('#RepSearchForm').submit(function () {
      $.ajax({
        url: this.action,
        type: "POST",
        cache: false,
        dataType: 'text json',
        data: $(this).serialize(),
        success: RepSearchDialog_SearchForRepsComplete,
        error: function (request, status, error) {
          alert("An error occurred submitting the form. \r\n\r\n Error: " + request.responseText);
        }
      });
      return false;
    });
  }

  function RepSearchDialog_SearchForRepsComplete(response, status, xhr) {
    $('#RepSearchButton').unbind(); // NECESSARY, or you will get stacked calls!!
    if (status == "error") {
      alert('failed');
    }
    else {
      LoadRepSearchResults(response);
    }
  }

RepSearchDialog_SearchForReps 调用只是对 MVC3 控制器进行 AJAX 调用，并将返回值附加到 Dialog 中托管的 DIV 中的 HTML 表中。当用户单击“搜索”按钮时，所有这些都有效。但是尝试在 OPEN 函数中自动启动它不会。任何线索为什么？

Answer 1

您的搜索按钮工作的原因是它仍在使用普通帖子以及调用您的 javascript。您需要将其更改为：

$('#RepSearchButton').click(function (e) {
    e.preventDefault();
    RepSearchDialog_SearchForReps();
});

这里的e.preventDefault() 将阻止本机提交事件发生。

另一个问题是您的 RepSearchDialog_SearchForReps。按照您的设置方式，每次调用 RepSearchDialog_SearchForReps 时，您都将 $.ajax 调用绑定到 submit 事件。您有两种选择。你可以这样做：

function RepSearchDialog_SearchForReps() {
    var form = $('#RepSearchForm');
    $.ajax({
        url: form.attr('action'),
        type: "POST",
        cache: false,
        dataType: 'text json',
        data: form.serialize(),
        success: RepSearchDialog_SearchForRepsComplete,
        error: function (request, status, error) {
          alert("An error occurred submitting the form. \r\n\r\n Error: " + request.responseText);
        }
    });
}

或者这个

// this goes in your document ready code elsewhere...
$(function() {
    $('#RepSearchForm').submit(function () {
        $.ajax({
            url: this.action,
            type: "POST",
            cache: false,
            dataType: 'text json',
            data: $(this).serialize(),
            success: RepSearchDialog_SearchForRepsComplete,
            error: function (request, status, error) {
              alert("An error occurred submitting the form. \r\n\r\n Error: " + request.responseText);
            }
        });
        return false;
    });
});

function RepSearchDialog_SearchForReps() {
    $('#RepSearchForm').submit();
}