使用JavaScript提交Ajax.BeginForm()

Question

我离开了电脑，所以没有精确的代码，但问题也许足够简单明了。当我在Ajax表单中直接放置提交按钮并单击该按钮进行提交时，一切都很好，符合预期。Ajax.Form将POST回控制器，该控制器返回一个部分视图，该视图在当前视图内呈现。但是我需要的是，在单击Ajax.Form中的一个按钮后运行JavaScript函数。JavaScript函数将执行一些验证，决定是否提交Ajax.Form。我尝试在Ajax.Form中放置2个按钮，一个隐藏的提交按钮和一个常规按钮。我使用常规按钮的onclick事件调用我的JavaScript函数，然后调用隐藏的提交按钮的click方法。（我还尝试过直接使用document.forms[formname].submit()提交Ajax.Form）这种方法有点奏效，但由于某种原因不正确。Ajax.Form将POST回控制器，但当控制器返回部分视图时，部分视图是唯一呈现的内容，并且呈现为基本HTML，没有CSS/Bootstrap。实际单击提交按钮和以编程方式单击提交按钮之间有什么区别？如何实现我想做的事情？

 @using (Ajax.BeginForm("GetInstructorInfo", "Incident", FormMethod.Post, new AjaxOptions { OnBegin = "lookupInstructor();", UpdateTargetId = "InstructorInfo" }, new { @class = "form-inline", role = "form", @id = "instructorInfoForm", @name = "instructorInfoForm" }))
{

//code in here

}

编辑2/3:

<script>
    function lookupInstructor()
    {
        if ($('input[name="Instructors['+userInputInstructor+'].Username'+'"]').length > 0)   //Don't allow user to enter multiple instances of the same Instructor
        {
            document.getElementById("InstructorUsername").value = ''; //clear textbox value
            return false;
        }
        var userInputInstructor =  document.getElementById("InstructorUsername").value;
        $.ajax({
            url: '@Url.Content("~/Incident/LookUpUsername")',
            data: { userInput: userInputInstructor },
            success: function (result) {
                if (result.indexOf("not found") != -1){ //if not found

                    $("#InstructorNotFoundDisplay").show();
                    document.getElementById("InstructorUsername").value = ''; //clear textbox value

                    $('#InstructorInfo').empty();
                    return false;
                }
                else {
                    $("#InstructorNotFoundDisplay").hide();
                    return true;
                }
            }
        });
  }
</script>

- Michael

---

如果您正在使用 Ajax.BeginForm()，那么您可以使用 OnBegin ajax 选项在提交之前运行脚本（必要时取消提交）。 - user3559349

在函数中，你只需使用 return false;。例如：function Validate() { if (isValid) { return true; } else { return false; } } 然后，在 ajax 选项中使用 OnBegin = "return Validate();" （但为什么人们仍然使用过时的 Ajax 方法而不是 $.ajax()，我永远不会理解）。 - user3559349

@StephenMuecke 好的，那确实有所帮助，但是我仍然在{返回true/false}方面有一些问题。我已经将函数代码添加到了我的原始OP中。但是我测试了一个简单的函数，如果我使用简单的if/else并分别返回true和false，它可以正常工作。所以我猜可能与嵌套函数有关？在上面的代码中，我使用一个名为functionResult的变量来保存返回值，但我也尝试在$.ajax的if/else中显式地返回true/false，但也没有起作用。另外，如果我将functionResult初始化为true或false，也可以正常工作。 - Michael

你需要在成功回调函数中返回functionResult的值（因为ajax是异步的，所以实际上你返回的是undefined，因为return functionResult;语句在ajax调用完成之前就被执行了）。 - user3559349

我们有点偏离你最初的问题了。你需要创建单独的函数来处理这个问题。现在没有时间，但稍后可以编辑我的问题（虽然我建议你放弃Ajax方法，改用jQuery.ajax() - Ajax函数已经从最新版本的MVC中删除了）。 - user3559349

Answer 1

您可以使用OnBegin() ajax选项，在表单提交之前调用一个函数（如果您想取消提交，可以return false）。例如：

function Validate() { 
    var isValid = // some logic
    if (isValid) { 
        return true; 
    } else { 
        return false;
    }
}

然后在Ajax.BeginForm()选项中

OnBegin = "return Validate();"

编辑

根据问题和评论的编辑，您想在OnBegin()选项中调用一个ajax函数，但这不起作用，因为ajax是异步的。相反，使用jQuery.ajax()提交表单，而不是Ajax.BeginForm()方法（并节省包括jquery.unobtrusive-ajax.js的额外开销）。

将Ajax.BeginForm()更改为Html.BeginForm()，在表单标签内用<button type="button" id="save">保存</button>替换提交按钮，并处理它的.click()事件。

var form = $('#instructorInfoForm');
var url = '@Url.Action("GetInstructorInfo", "Incident")';
var target = $('#InstructorInfo');

$('#save').click(function() {
  if ($('input[name="Instructors['+userInputInstructor+'].Username'+'"]').length > 0) {
    ....
    return; // exit the function
  }
  $.ajax({
    ....
    success: function (result) {
      if (result.indexOf("not found") != -1) {
        ....
      }
      else {
        $("#InstructorNotFoundDisplay").hide();
        // submit the form and update the DOM
        $.post(url, form.serialize(), function(data) {
          target.html(data);
        });
      }
    }
  });
});

- user3559349