Javascript .submit（函数（））在我的模式弹出窗口中不起作用，我的模式弹出窗口将发送正常的http post请求

我正在开发一个asp.net mvc web应用程序。在我的主视图中，我得到了以下创建链接：-

    <a class="btn btn-success" data-modal="" href="/Staff/Create" id="btnCreate">
    <span class="glyphicon glyphicon-plus"></span>      
    </a>


<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

现在，当我单击“创建”链接时，创建操作方法将返回以下局部视图，该视图将在模式弹出窗口中呈现：-

@model SkillManagement.Models.Staff

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Staff</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.GUID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.GUID)
                @Html.ValidationMessageFor(model => model.GUID)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UserName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName)
                @Html.ValidationMessageFor(model => model.UserName)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.IsExternal, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.IsExternal)
                @Html.ValidationMessageFor(model => model.IsExternal)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName)
                @Html.ValidationMessageFor(model => model.FirstName)
            </div>
        </div>

        //code goes here
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@model SkillManagement.Models.Staff
@{
ViewBag.Title=“创建”；
}
创造
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
工作人员

@Html.ValidationSummary（true）
@LabelFor（model=>model.GUID，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.GUID）
@Html.ValidationMessageFor（model=>model.GUID）
@LabelFor（model=>model.UserName，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.UserName）
@Html.ValidationMessageFor（model=>model.UserName）
@LabelFor（model=>model.IsExternal，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.IsExternal）
@Html.ValidationMessageFor（model=>model.IsExternal）
@LabelFor（model=>model.FirstName，新的{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.FirstName）
@Html.ValidationMessageFor（model=>model.FirstName）
//代码在这里
}

到目前为止，我的每件事都很好地工作，Get Create action方法将被调用，部分视图将在一个模式弹出窗口中呈现

但是现在在我的局部视图中，如果我单击“Create”按钮，将调用Post-Create操作方法，但不是因为javascript代码。当我检查Post create action方法中的

Request.IsAjax（）

时，我发现它不是一个ajax请求，这意味着部分视图发送的是一个正常的Post http，而不是脚本中定义的ajax请求，有人能告诉我当前方法的错误吗？

---

谢谢

您正在通过ajax将表单加载到页面中，但是您正在加载的表单是一个常规html表单。如果您希望表单本身使用ajax，我相信您正在寻找

@ajax.BeginForm（）

---

如您所见，只需将

#myModalContent

节点传递给

bindForm

函数，jQuery选择器就会查找

// will never find #myModalContent
$('#myModalContent', myModalContentDOMElement).submit(function () {

相反，你应该这样做

$('form', dialog).submit(function (e) {
    e.preventDefault(); // stop the default form submit action

---

您似乎没有取消默认提交（

return false；

位于

else

块中，该块可能无法调用）。尝试

$（'#myModalContent'，dialog）.submit（函数（e）{e.preventDefault（）；…

@StephenMuecke，但我遵循的方法与此链接中提到的完全相同，当我下载项目时，我发现脚本将能够发送ajax请求，而无需添加e.preventDefault（）？你能告诉我吗？为什么在我的情况下这不起作用？除了链接代码（本文第2部分）在脚本末尾有

返回false，所以它总是被调用-你在
else
块中有它，所以它只有在表单无效时才被调用（因此，如果它有效，它将发出一个ajax调用，并且正常的submit-
返回false
，这将阻止从未调用标准submit）@ StephenMuecke，我开始感觉到我在这个链接上遵循了一个错误的例子，当我面对问题时，你认为链接上的方法是有效的吗？因为我将呈现一个包含HTML的部分视图。Beginform（不是Ajax。然后我将强制Html.Beginform发送一个ajax请求，而不是普通的http请求，我不确定这种方法是否有效？
返回false
（或者如上所述的
e.preventDefault（）
）应该会阻止标准表单提交，所以不确定发生了什么。代码中有一些奇怪的事情（可能与您的问题无关）例如，带有
id=“myModalContent”
的元素是一个
的元素，它没有
.submit
事件，因此我认为
$（'myModalContent'，dialog）。submit（函数（）{..
应该是
$（dialog）。submit（函数（）{..
（假设
dialog
是
元素），我真的不明白为什么要调用
bindForm（）；
在
else
块中。我的原始代码如您所述，但由于在我的主索引视图中，我已经有了一个搜索表单，因此我的jQuery代码似乎会在我的主视图中选择表单，而不是在模式弹出窗口中选择表单。因此，我必须显式地提到表单id…您能再见吗？@johnG
$（'form'，dialog）
正是按照您所说的，在对话框/modalContent中选择表单。这不会像您所说的那样从索引视图中选择表单。另外，您需要阻止默认操作，请检查我的编辑。@johnG好吧，因为（我猜）
$（'form'）
将返回一个所选元素的数组，其中没有
valid（）
method。如果（$（this.valid（）），您将执行如下操作

。我不是

.net

开发人员，尽管这对于任何语言都是完全有效的方法。如果真的有帮助，您介意将此标记为答案吗？@johnG基本上都会/应该生成几乎相同的标记，我想，但是

Ajax.beginfound

可能有自己的JavaScript绑定来修改表单g的行为/方式ets已提交，这实际上是您在JavaScript代码中提交的。希望这有意义。但我发现了这个实现类似功能的链接。您能同意吗？是的，我知道使用Ajax.Beginform是为了发送Ajax post请求而构建的，但我是

// will never find #myModalContent
$('#myModalContent', myModalContentDOMElement).submit(function () {

$('form', dialog).submit(function (e) {
    e.preventDefault(); // stop the default form submit action