单击按钮时,Ajax函数调用两次

时间:2012-10-29 21:32:14

标签: c# jquery ajax

我在这里看到了几个类似的问题,但我无法解决这个问题。这似乎不是出价协议,因为它最终会起作用,但是如果我调试的话,在点击按钮时尝试使用Ajax显示隐藏的div(模仿弹出窗口)我可以看到方法中的控制器(ConfirmMaxBid)被调用两次(甚至更多)我有时甚至感觉更多,并且通过代码混合流程,即来回走动。)

这是视图

@model UI.Models.BidOnAuctionViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/BidAndMaxBidConfirmation.js")" type="text/javascript"></script>

@{
   var disableButton = Model.AuctionOpen ? "" : "bid-btn-disabled";     
}

@using (Html.BeginForm("ConfirmMaxBid", "Lot"))
{
  <fieldset>
    <div class="lotdetail-maxbid-row">
        <label>Your Max Bid</label>
        @*<input id="Amount" class="radius2 text-box single-line valid" type="text" name="Amount" data-val-required="The Amount field is required." data-val-number="The field Amount must be a number." data-val="true">*@
        @if (Model.AuctionOpen)
        {
            @Html.TextBoxFor(model => model.Amount, new {@class = "radius2 text-box single-line valid"})
        }
        else
        {
            @Html.TextBoxFor(model => model.Amount, new {@class = "radius2 text-box single-line valid", @disabled = "disabled"})
        }
    </div>
    <input type="submit" id="autobidButton" value="Increase Max bid" class="btn btn-level2 btn-maxbid @disableButton" />
  </fieldset>

  <div id="autoBidConfirmation" class="lotdetail-modal" style="display: none;"> 
    @Html.HiddenFor(model => model.AuctionId)
    @Html.HiddenFor(model => model.AutobidAmount)
    @Html.HiddenFor(model => model.AuctionEventId)
    <h4 id="confirmationMessage"></h4>
    <span id="returnedCorrectedAmount" class="lotdetail-modal-msg"></span>
    <input name="button" value="Place bid" type="submit" class="btn btn-level2" />
    <input id="cancelAutoBid" name="button" value="Cancel" type="submit" class="btn btn-level2 btn-cancel" />
  </div>
}

这是在document.ready

时调用的脚本函数
$('#autobidButton').click(function (e) {
    e.preventDefault();
    var model =
        {
            AuctionEventId: $('#AuctionEventId').val(),
            AuctionId: $('#AuctionId').val(),
            Amount: $('#Amount').val()
        };
    $.ajax({
        url: "/Lot/ConfirmMaxBid",
        dataType: 'json',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        success: function (data) {
            var amount = "$" + data.AutobidAmount;
            $('#returnedCorrectedAmount').html(amount);
            $('#AutobidAmount').val(data.AutobidAmount);
            $('#confirmationMessage').text(data.AutobidConfirmationMessage);
            $('#autoBidConfirmation').show();
        }
    });
});

最后这是方法(该部分至少被调用两次,以避免这个问题太长)

public ActionResult ConfirmMaxBid(string button, BidOnAuctionViewModel model)
    {
        if(Request.IsAjaxRequest())
        {
            var confirmationMessage = "Confirm your bid";
            var correctedAmount = model.Amount;
            if (!CheckMaxBidFitsIncrementTier(model.Amount, model.AuctionEventId))
            {
                confirmationMessage = "This bid can't be placed, do you want to place the following instead?";
                correctedAmount = CalculateNextBidAmountForWrongMaxAmount(model.Amount, model.AuctionEventId);
            }

            return Json(new
            {
                AutobidAmount = correctedAmount,
                model.AuctionId,
                model.AuctionEventId,
                AutobidConfirmationMessage = confirmationMessage
            });
        }

        if (button == "Place bid")
        {
          //Here's the code to do the stuff when confirming in the partial view

知道为什么会这样吗?

提前致谢

更新

在发出一些警报之后(非常原始的调试方式,我猜)我看到该方法在成功函数的最后一行之后再次调用(在$('#autoBidConfirmation')之后。show();)< / p>

1 个答案:

答案 0 :(得分:1)

异步回发后,您的文档可能已准备好多次。

尝试类似:

$(document).ready(OnDocumentReady);

function OnDocumentReady()
{
     $("#autobidButton")
          .unbind("click", AutoBidFunction)
          .click(AutoBidFunction);
}

function AutoBidFunction(e)
{
    // Code Here
}