title: JQuery and Ajax.BeginForm() posting same data twice
body: <p>Ok I'm a total web newbie but I must admit I'm totally hooked now.  Here's my problem: </p>
  
  <p>I have a page with an MVCContrib grid and a "Add Accounts" link that brings up an Ajax form wrapped in a JQuery dialog.  When I go through the workflow the first time everything works great.  I can add a new item and refresh the grid all via JQuery / Ajax (so I think).  However, when I try to add the form a second time, the data from the first form is always submitted.  I've been looking at the problem for way too long and must admit I'm totally stuck.  Btw - I'm sure I'm doing this totally wrong so feel free to suggest anything better.  </p>
  
  <p>Here's the form:</p>
  
  <pre><code>@using (Ajax.BeginForm("SaveCheckAccount", "UserManagement", null, new AjaxOptions { OnSuccess = "onAccountAdded", OnFailure = "onAccountAddedFailed"}, new { id = "accountDetails" }))
  {
      @Html.ValidationSummary(true)
      @Html.HiddenFor(model =&gt; model.Id)
      @Html.HiddenFor(model =&gt; model.version)
      @Html.HiddenFor(model =&gt; model.User_Id)
      @Html.HiddenFor(model =&gt; model.IsDefault)        
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Account Number
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(model =&gt; model.AccountNumber)
                  @Html.ValidationMessageFor(model =&gt; model.AccountNumber, "*")
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Routing Number
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(model =&gt; model.RoutingNumber)
                  @Html.ValidationMessageFor(model =&gt; model.RoutingNumber, "*")
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Account Type
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DropDownListFor(model =&gt; model.AccountType_Id, new SelectList(@accountTypes, "ID", "Name", Model.AccountType_Id))
                  @Html.ValidationMessageFor(model =&gt; model.CheckAccountType)
                  @Html.ValidationMessageFor(model =&gt; model.AccountType_Id, "*")
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Bank Name
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(model =&gt; model.BankName)
                  @Html.ValidationMessageFor(model =&gt; model.BankName, "*")
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Account Name
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(model =&gt; model.AccountName)
                  @Html.ValidationMessageFor(model =&gt; model.AccountName, "*")
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;   
  }
  
  &lt;script type="text/javascript"&gt;
      $.ajaxSetup({ cache: false });
  &lt;/script&gt;
  </code></pre>
  
  <p>This javascript resides in bank.js file</p>
  
  <pre><code>function BindCommands(createUrl) {
  
        $("#modalAdd").live("click", function (e) {
            var dialogBox = $("&lt;div&gt;");
            e.preventDefault();
            $(dialogBox).dialog({
                autoOpen: false,
                resizable: false,
                title: 'Create Account',
                modal: true,
                show: { effect: "blind", duration: 50 },
                hide: { effect: "blind", duration: 50 },
                open: function (event, ui) {
                    $.ajax(
                        {
                            type: "Get",                          
                            url: createUrl,
                            success: function (result) {
                                $(dialogBox).html(result);
                            }
                        });
                },
  
                buttons: {
                    Save: function () {
                        $("#accountDetails").submit();
                        $(this).dialog('close');                      
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $(dialogBox).dialog('open');
        });
    }
  
    function onAccountAdded(data, status, xhr) {      
        $("#accounts-grid").html(data);
    };
  
    function onAccountAddedFailed(data, status, xhr) {
        alert("Failed");      
    };
  </code></pre>
  
  <p>The for is intially rendered by clicking the add link on this view: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $.ajaxSetup({cache:false});
      $(document).ready(function() {
          var createUrl = '@Url.Action("NewBankAccountDetails", "UserManagement", new {userId=@Model.Id})';
          BindCommands(createUrl);
      });
  
  &lt;/script&gt;       
  @if (Model != null &amp;&amp; Model.Id &gt; 0)
  {
  
      &lt;tr&gt;
          &lt;td class="header" colspan="2"&gt;
              User Accounts
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;a href="#" id="modalAdd"&gt;Add Account&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      Html.RenderPartial("_BankAccountGrid", Model.CheckAccounts);
  }
  </code></pre>