Question

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

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

但我需要的是在Ajax.Form中单击一个按钮，以及运行JavaScript函数。 JavaScript函数将执行一些vaildation，它决定是否提交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>

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

使用JavaScript提交Ajax.BeginForm（）

1 个答案: