使用 JavaScript 提交 Ajax.BeginForm()

Posted 2023-03-05

【中文标题】使用 JavaScript 提交 Ajax.BeginForm()

【英文标题】：Use JavaScript to submit Ajax.BeginForm()

【发布时间】：2016-03-06 03:57:15

【问题描述】：

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

当我在 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 回控制器，但是当从控制器返回局部视图时，局部视图是唯一呈现的内容，它被呈现为没有 css/bootstrap 的基本 html。

实际单击提交按钮和以编程方式执行此操作有什么区别？

如何才能实现我想要做的事情？

编辑

 @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>

【问题讨论】：

如果您使用Ajax.BeginForm()，那么您可以使用OnBegin ajax 选项在提交前运行脚本（并取消提交是必要的）

@Stephen Muecke 我确实考虑过尝试使用 OnBegin()，但是当我实现它时它不能正常工作。我不知道你可以取消提交，你会怎么做？

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

@StephenMuecke 工作完美！如果您想将此添加为答案，我会将其标记为答案。非常感谢您。我使用任何我拥有的 ajax 方法的原因是因为我对 Web 开发非常陌生，而且我根本没有时间正确地学习很多东西。我只是暂时放弃我可以参考的以前编写的代码。我迫不及待地想真正坐下来学习这些东西。

@StephenMuecke 实际上，即使我指定 return false; ， Ajax.BeginForm() 似乎仍然回发到控制器 在 javascript 函数中。我会将 Ajax.BeginForm() 的标题添加到我的 OP 中。任何原因返回false；不工作吗？

【参考方案1】：

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

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

然后在Ajax.BeginForm() 选项中

OnBegin = "return Validate();"

编辑

根据对问题和 cmets 的编辑，您想在 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);
        );
      
    
  );
);