使用JavaScript提交Ajax.BeginForm（）

Question

我正在远离我的电脑输入这个问题，所以我没有确切的代码，但如果没有它，问题可能很简单。

当我在Ajax表单中直接提交按钮并直接单击按钮提交时，一切正常，并且符合预期。 Ajax.Form POST回到控制器，该控制器返回在我当前View中呈现的局部视图。

但我需要的是在Ajax.Form中单击一个按钮，以及运行JavaScript函数。 JavaScript函数会做一些决定是否提交Ajax.Form的vaildation。

我尝试在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>

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