html使用ajax提交表单,使用JavaScript提交Ajax.BeginForm()

我要在计算机之外输入此问题,所以我没有确切的代码,但是没有它,问题可能很简单.

当我在Ajax表单中直接有一个提交按钮,并且直接单击该按钮进行提交时,一切正常,并且符合预期. Ajax.Form POST回传给控制器,该控制器返回呈现在当前View内部的局部视图.

但是我需要的是在Ajax.Form中单击一个按钮,并运行一个JavaScript函数. JavaScript函数将进行一些验证,以决定是否提交Ajax.Form.

我试过将2个按钮放在Ajax.Form中,一个隐藏的提交按钮和一个常规按钮.我使用常规按钮的onclick事件来调用我的JavaScript函数,然后该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：

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;

}

}

});

}

解决方法:

您可以使用OnBegin() ajax选项来调用在提交表单之前运行的函数(如果要取消提交,则返回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);

});

}

}

});

});

标签：html5,ajax,javascript,asp-net-mvc,jquery

来源： https://codeday.me/bug/20191119/2035573.html