Javascript按钮点击导致多个帖子

我有以下脚本，它在对话框中渲染局部视图：

$(function () {
            $('#addressLookupBtn').click(function () {                
            $('#dialog').dialog({
                title: 'Address Lookup Tool',
                modal: true,
                width: '1200',
                height: 'auto',
                resizable: false,
                show: {
                    effect: "fade",
                    duration: 2000
                },
                hide: {
                    effect: "fade",
                    duration: 1000
                },
                open: function (event, ui) {
                    //Load the AddressLookup action which will return
                    //the partial view: _AddressLookup

                    $(this).load("@Url.Action("AddressLookup", new { evpId = Model.EvpId })");

                }
            }).dialog('open');

        });
        });

问题是，当我提交部分视图时，有两个帖子被发送到服务器，我认为部分视图的提交也被绑定到

$（'#addressLookupBtn'）。单击
。有人能看出我哪里做错了吗

更多信息


局部视图

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updatearea" }))
{
    <div id="updatearea" class="form-group">

        <div style="width:300px; display:block; float:left;">
            @Html.TextBox("PostCode", null, new { @class = "form-control" })            
        </div>

        <div id="NewAddressLine">

            <input type="submit" value="Lookup Postcode" class="btn btn-default" />
        </div>
    </div>    

} 

@使用（Ajax.BeginForm（新的AjaxOptions{UpdateTargetId=“updatearea”}））
{
@TextBox（“邮政编码”，空，新{@class=“form control”}）
} 
看起来您正在调用open，但仍将autoOpen设置为true（默认情况下为true）。这将导致open事件运行两次。尝试将autoOpen设置为false

$('#dialog').dialog({
    ...
    autoOpen: false,
    ...
});

看起来您正在调用open，但autoOpen仍设置为true（默认情况下为true）。这将导致open事件运行两次。尝试将autoOpen设置为false

$('#dialog').dialog({
    ...
    autoOpen: false,
    ...
});

这篇文章似乎是使用普通表单提交和jquery事件提交的

可能将其更改为按钮（而不是submit）并仅使用jquery submit，或者删除jquery事件并仅使用普通表单submit

根据评论-使用jquery ajax代替MS ajax的示例：

剧本：

$(document).ready(function() {

  event.preventDefault(); // stop the form from submitting the normal way
  $('#MyForm').submit(function(event) {
    $.post(
        $('#MyForm').attr('action'), 
        { 'PostCode' : $('input[name=PostCode]').val() }
    )
    .done(function(data) {
        alert('Post worked, and data was returned. Parse and/or present.');
        $('#updatearea').html(data); //Replace the current contents of "updatearea" with the returned contents 
    });
  });

});

部分观点：

@using (Html.BeginForm("MyAction", "MyController", new { @id = "MyForm" }))
{
<div id="updatearea" class="form-group">

    <div style="width:300px; display:block; float:left;">
        @Html.TextBox("PostCode", null, new { @class = "form-control" })            
    </div>

    <div id="NewAddressLine">

        <input type="submit" value="Lookup Postcode" class="btn btn-default" />
    </div>
</div>    

} 

@使用（Html.BeginForm（“MyAction”，“MyController”，new{@id=“MyForm”}））
{
@TextBox（“邮政编码”，空，新{@class=“form control”}）
} 
这篇文章似乎是使用普通表单提交和jquery事件提交的

可能将其更改为按钮（而不是submit）并仅使用jquery submit，或者删除jquery事件并仅使用普通表单submit

根据评论-使用jquery ajax代替MS ajax的示例：

剧本：

$(document).ready(function() {

  event.preventDefault(); // stop the form from submitting the normal way
  $('#MyForm').submit(function(event) {
    $.post(
        $('#MyForm').attr('action'), 
        { 'PostCode' : $('input[name=PostCode]').val() }
    )
    .done(function(data) {
        alert('Post worked, and data was returned. Parse and/or present.');
        $('#updatearea').html(data); //Replace the current contents of "updatearea" with the returned contents 
    });
  });

});

部分观点：

@using (Html.BeginForm("MyAction", "MyController", new { @id = "MyForm" }))
{
<div id="updatearea" class="form-group">

    <div style="width:300px; display:block; float:left;">
        @Html.TextBox("PostCode", null, new { @class = "form-control" })            
    </div>

    <div id="NewAddressLine">

        <input type="submit" value="Lookup Postcode" class="btn btn-default" />
    </div>
</div>    

} 

@使用（Html.BeginForm（“MyAction”，“MyController”，new{@id=“MyForm”}））
{
@TextBox（“邮政编码”，空，新{@class=“form control”}）
} 
事实证明，除了将以下捆绑包引用从
\u布局
移动到我的
编辑
视图之外，我不需要做任何更改：

@Scripts.Render("~/bundles/unobtrusive-ajax") 

事实证明，除了将以下捆绑包引用从
\u布局
移动到我的
编辑
视图之外，我不需要做任何更改：

@Scripts.Render("~/bundles/unobtrusive-ajax") 

您可以在其他位置添加单击事件。也就是说，$（“#addressLookupBtn”）。单击可能位于一个以上的位置，如果看不到部分发生了什么，则很难猜测，但是如果嵌套的单击事件中发生了任何有趣的事情，您可以执行：
$（“#something”）。单击（函数（e）{e.stopPropagation（）；…theRestOfYourStuff…）。如果需要，您可以在我的上一个问题中看到我的部分代码，尽管它不再发布4次，但我通过删除额外的Jquery引用对其进行排序，它现在只发布两次。您可以在其他位置添加单击事件。也就是说，$（“#addressLookupBtn”）。单击可能位于一个以上的位置，如果看不到部分发生了什么，则很难猜测，但是如果嵌套的单击事件中发生了任何有趣的事情，您可以执行：
$（“#something”）。单击（函数（e）{e.stopPropagation（）；…theRestOfYourStuff…）。如果需要，您可以在我的上一个问题中看到我的部分代码，尽管它不再发布4次，但我通过删除额外的Jquery引用对其进行了排序，它现在只发布twiceOr remove
。dialog（'open'）
我现在尝试了这两个建议，根据我的更新和imageOr remove
。dialog，我仍然收到两篇文章（'open'）
我现在已经尝试了这两个建议，根据我的更新和图片，我仍然收到了两篇帖子。不过，我不知道jquery事件是从哪里来的，如果我将submit更改为nothing按钮fires@SelectDistinct您是否在您的部分中引用jquery.unobtrusive-ajax.js？我的@Layout@Scripts.Render中有它(“~/bundles/unobtrusiveajax”）这可能是Microsoft ajax LIB和jquery.unobtrusive之间的冲突。为了确保这一点，您可以尝试删除对unobtrusive的引用，或者将ajax.beginform更改为Html.beginform。只是为了找到违规方。是的，如果我将ajax.beginform替换为Html.beginform，我只收到一篇帖子，但它会在新页面中打开，而不是在div中打开/dialogI我不明白jquery事件来自何处，如果我将submit按钮更改为nothing（无）fires@SelectDistinct你在你的部分文章中引用了jquery.unobtrusive-ajax.js吗？我在我的_Layout@Scripts.Render（“~/bundles/unobtrusive ajax”）中有它这可能是Microsoft ajax LIB和jquery.unobtrusive之间的冲突。为了确保这一点，您可以尝试删除对unobtrusive的引用，或者将ajax.beginform更改为Html.beginform。只是为了找到违规方。是的，如果我将ajax.beginform替换为Html.beginform，我只收到一篇帖子，但它会在新页面中打开，而不是在div中打开/dialogGood：很好，你们找到了一种仍然使用这两种语言的方法。我是正确的，因为这是一个不引人注目的问题，或者更确切地说，它被“错误地”引用了“@Mackan是的，你的建议帮了我的忙，所以谢谢，我相信你的解决方案也会起作用，但这对我来说是一个简单的解决方案，所以我会将它标记为答案。很好，你找到了一种方法，仍然使用这两种方法。我是正确的，因为这是一个不引人注目的问题，或者更确切地说，它被“错误地”引用了。”@Mackan是的，你的建议帮助了我，所以谢谢，我相信你的解决方案也会奏效，但这对我来说是一个简单的解决方案，所以我会把它作为答案。