在提交ajax后不需要表单默认值

Question

我有这个脚本，它打算做的是：在一个包含联系人列表的视图中，每当您点击其中一个链接时显示一个编辑在部分视图中（在父视图中只有一个div用于保存）在单击的联系人下方，因为它会向服务器发送ajax调用并获取该联系人的信息。提交后，通过ajax，它刷新列表。

一切似乎工作正常，但如果我编辑联系人，刷新列表后，我尝试再次打开同一联系人上的窗体，信息与编辑前相同。虽然调试我看到服务器列表是正确的（列表中的显示也是如此，但它只是在表格中显示）

事情是在铬开发人员工具中，我可以看到窗体中有一些“默认值”设置为以前的东西。我直到现在还不知道他们，我不知道如何摆脱他们，因为据我了解，我打电话给服务器，无论如何，我已经试过这个

document.getElementById（ “editForm”）复位（）;

没有运气。

感谢

脚本

(function ($) { 
    var editContainer = $(document.getElementById('editContainer')); 

    $('#editContainer').on('submit', '#editForm', ajaxEditCall); 

    $('a.edit').on("click", displayEditForm); 

    function displayEditForm(e) { 
     var clickedElement = $(this).parent(), 

     url = editContainer.data('amp-edit-url'); 

     $.get(url, { 
      id: parseInt(this.id, 10) 
     }, function (result) { 
      editContainer.html(result); 
      $.validator.unobtrusive.parse(editContainer); 
      // Display edit form just below the "item" clicked 
      if (editContainer.is(":visible")) { 
       editContainer.slideToggle(300, function() { 
        editContainer.appendTo(clickedElement); 
        editContainer.slideToggle(300); 
       }); 
      } else { 
       editContainer.appendTo(clickedElement); 
       editContainer.slideToggle(300); 
      } 
     }, "html"); 
     e.preventDefault(); 
    } 

    function ajaxEditCall(e) { 
     e.preventDefault(); 
     //if ($('#editForm').valid()) { 
     var list = $(document.getElementById('list')); 

     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       if (result.passedValidation == true) { 
        $.get(result.action, function (partial) { 
         document.getElementById("editForm").reset(); 
         list.html(partial); 
         $('a.edit').on("click", displayEditForm); 
         $('#editForm').slideUp(300); 
         setTimeout(function() { 
          list.effect("highlight", {}, 3000); 
         }, 1000); 
        }); 
       } else { 
        $(document).scrollTop(0); 
        editContainer.html(result); 
        $.validator.unobtrusive.parse('#editForm'); 
       } 
      } 
     }); 
     //} return false; 
    } 
}(jQuery)); 

而如果认为是相关

@model ContactListViewModel 

@{ 
    ViewBag.Title = " My Contacts"; 
} 

<div id="myContacts"> 
    <h2>My Contacts</h2> 

    <div id="editContainer" data-amp-edit-url="@Url.Action("Edit", "Contacts")" class="initiallyHidden"></div> 

    <div id="list"> 
     @{ Html.RenderPartial("_ContactList", Model); } 
    </div> 
    <div id="dialog" data-amp-del-url="@Url.Action("Delete", "Contacts")" title="Confirmation Required"> 
     <p>Are you sure you want to delete this Contact?</p> 
    </div> 
</div> 

@section Foot 
{ 
    <script src="~/Scripts/AMPContacts.js"></script> 
    <script src="~/Scripts/conditional-validation.js"></script> 
    <script src="~/Scripts/Placeholders.min.js"></script> 
} 

嗯，这是很明显的父视图，部分一个是只是一堆领域，我删除其中的大部分，以避免增加已经很长的帖子

@model AddContactViewModel 

@using (Html.BeginForm("Edit", "Contacts", FormMethod.Post, new { @id = "editForm", @class = "addTab" })) 
{ 
    @Html.ValidationSummary(true, "Please correct the errors and try again.") 

    @Html.HiddenFor(m => m.Id) 
    @Html.HiddenFor(m => m.OwnedItemId) 
    @Html.HiddenFor(m => m.AddressId) 

    <div id="editContactDetails"> 
      <div> 
       @Html.DisplayFor(m => m.PlanName) 
      </div> 

      <div> 
       @Html.DropDownListFor(m => m.Title, Model.TitleList, "Title") 
      </div> 
      <div> 
       @Html.EditorFor(m => m.FirstName, new { @id="editFirstName", data_placeholders_focus = "false", placeholder = ViewData.ModelMetadata.Watermark }) 
       @Html.ValidationMessageFor(m => m.FirstName) 
      </div> 

     // And so on.... 

     <div class="addDEC"> 
      <input class="addDECButton" type="submit" value="Save" /> 
     </div> 
} 

Answer 1

我遇到了这个问题，我正在处理一个网站。你需要禁用AJAX缓存：

//Disbable cache for all jQuery AJAX requests 
$.ajaxSetup({ cache: false }); 

那会做所有的Ajax调用，所以你可能只希望做的是在某些页面，根据您的使用。