ASP.net射擊jQuery的ASP後UPDATE

Question

我有啓動在編輯模式，並允許用戶從下拉菜單中選擇是或否，然後按下「保存」按鈕，這是Formviews更新命令一個FormView：

<asp:FormView ID="FormView1" runat="server" DataSourceID="CustomerEdit"> 
<ItemTemplate> 
hello 
</ItemTemplate> 
    <EditItemTemplate> 
     <asp:Label ID="CustomerNameLabel2" runat="server" 
      Text='<%# Bind("CustomerName") %>' /> 
      <asp:Label ID="CustID" runat="server" visible="false" 
      Text='<%# Bind("CustID") %>' /> 
      <br> 
      <br></br> 
     Is This Your Customer? 
     <br> 
     <br> 
     <asp:DropDownList ID="DropDownList1" runat="server" 
      SelectedValue='<%# Bind("IsThisMyCustomer") %>'> 
      <asp:ListItem Selected="True"></asp:ListItem> 
      <asp:ListItem>Yes</asp:ListItem> 
      <asp:ListItem>No</asp:ListItem> 
     </asp:DropDownList> 
     <br> 
     <br> 
     <asp:Button ID="Button" runat="server" CausesValidation="True" 
      CommandName="Update" Text="Save" /> 
    </EditItemTemplate> 
</asp:FormView> 

此按鈕也有JQuery的背後

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function() { 
    $("input[id$='Button']").click(function() { 
     var div = $("div"); 
     $("img").hide(); 
     div.animate({ height: '300px', opacity: '0.4' }, "slow"); 
     div.animate({ width: '300px', opacity: '0.8' }, "slow", function() { 
     window.location.href = "MyCustomers.aspx"; 
     }); 
    }); 
}); 
</script> 

現在，當用戶點擊該按鈕時，jQuery腳本通過jQuery腳本，通過FormView控件更新指令踢的SQL更新的動畫踢，然後大約一半從本質上阻止了jquery從事它的工作和啓動根據定期更新來調用formview的itemtemplate。

我想要的是發生和回發的SQL更新，然後jquery會直接觸發。

這樣做的最佳方法

Answer 1

您在混合客戶端和服務器端功能。您看到的是事件的順序是這樣的：

• 加載頁面
• 綁定click事件的元素
• 點擊元素（開始播放動畫）
• 刷新頁面
• 將點擊事件綁定到元素上

您的點擊事件實際上只是完成了一件事，將用戶重定向到另一個頁面。無論如何，如果頁面被重新加載，那麼爲什麼不從服務器端代碼做到這一點？

Response.Redirect("MyCustomers.aspx"); 

它沒有動畫，但由於無論如何你都要重新加載頁面，所以動畫是沒有意義的。如果你想有動畫，那麼你可能不要想重新加載頁面，在這種情況下，你會想開始尋找AJAX與JavaScript代碼的服務器交互。 （與Web窗體控件打交道時，它可以是一個相當大的主題，尤其是，它通常最好在這種情況下，只是「做它的WebForms方式」，而不是試圖惹他們。）

---

在您的評論以上，你說你試過這個...

$(window).load(function() { $(document).ready(function() { ... 

這是...不對。不要隨意混搭jQuery代碼，瞭解你在這裏做的是什麼。您是事件處理程序（例如load）內的綁定事件（例如ready），它可能會非常快速地變得非常奇怪。將您想要回復的事件與您用於響應的代碼分開。例如，考慮你有什麼在這裏：

$("input[id$='Button']").click(function() { 
    //... 
}); 

這並不執行函數內部的代碼，它綁定該功能當click事件發生要執行。相同的是這種結構的真實：

$(document).ready(function() { 
    $("input[id$='Button']").click(function() { 
     //... 
    }); 
}); 

此結合一種功能，當ready事件發生時執行。反過來，該功能會綁定另一個要在發生事件時執行的功能。

考慮到例如我在我上面的評論中提及了......如果你真的想動畫的元素，然後後重定向頁面重新加載（我仍然主張是一個非常不好的UX，說實話），那麼你可以這樣做：

$(document).ready(function() { 
    var div = $("div"); 
    $("img").hide(); 
    div.animate({ height: '300px', opacity: '0.4' }, "slow"); 
    div.animate({ width: '300px', opacity: '0.8' }, "slow", function() { 
    window.location.href = "MyCustomers.aspx"; 
    }); 
}); 

這跳過click事件，只是將這些代碼對ready事件立即執行。這意味着它基本上會在頁面加載時執行。這也意味着你不希望總是在頁面中包含這些信息（否則你永遠無法查看該頁面）。你只希望只在回傳中動態地包含它，這會導致重定向。

---

最終，您需要將您的客戶端功能與服務器端功能分開。如果你只是在表單發佈之後重定向（這就是你正在做的），然後從服務器端代碼重定向。如果您想要使用客戶端動畫和UX，不要使用WebForms回發。