J'ai un système hérité où je veux améliorer l'expérience de l'utilisateur. Sur l'un des formulaires, il y a 2 listes déroulantes; le changement d'une cascade ddl à l'autre. Dans le formulaire actuel, ceci est obtenu par l'événement selectedindexchanged à partir duquel l'autre ddl peut être repeuplé. Bien que cela fonctionne, pour que l'événement soit déclenché, le contrôle doit avoir le jeu de propriétés autopostback = true. Cette publication crée une mauvaise expérience utilisateur. Donc la solution simple est de mettre les ddls dans un contrôle de panneau de mise à jour. Cependant, cela a l'effet étrange de désactiver mes contrôles JQuery Cluetip. Je ne sais pas pourquoi c'est. Dans ce cas, il est temps pour moi de remplir mes commandes en utilisant JQuery et/ou AJAX. J'ai donc essayé la solution suivante ci-dessous dans une application de test. Cependant, lorsque je clique sur le bouton "Soumettre", les modifications que je fais dans les sous catégories ddl ne sont pas récupérées dans le code derrière l'événement pour mon bouton (un contrôle côté serveur). La raison semble être que les mises à jour côté client se sont produites après la dernière publication, et ainsi sur le serveur, le contrôle a toujours les valeurs précédentes. Comment puis-je récupérer les nouvelles valeurs côté serveur ou dois-je essayer autre chose? J'utilise un bouton de contrôle du serveur parce que c'est ce que fait le code hérité original, et tout changer du côté client serait un gros travail.ASP.NET, JQUERY: Comment puis-je récupérer les valeurs renseignées sur le client APRÈS la dernière publication?
La page Web;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/RM.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='Default.js'></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Test Categories</h1>
<table>
<tr>
<th class="wid3">Category:</th>
<td class="wid4"><asp:DropDownList
ID="Categories_ddl" runat="server" DataSourceID="odsCategories"
DataTextField="Category1" DataValueField="Category_ID"
>
</asp:DropDownList>
</td>
<th class="wid3">Sub Category:</th>
<td class="wid4"><select
ID="Sub_Categories_ddl" runat="server" DataSourceID="odsSub_Categories_4_Category"
DataTextField="Sub_Category1" DataValueField="Sub_Category_Id">
</select></td>
</tr>
</table>
<asp:ObjectDataSource runat="server" ID="odsCategories"
TypeName="ClassLibraryRiskManCategories.DAL" SelectMethod="GetCategories" />
<asp:ObjectDataSource runat="server" ID="odsSub_Categories_4_Category"
TypeName="ClassLibraryRiskManCategories.DAL" SelectMethod="GetSubCategories">
<SelectParameters>
<asp:ControlParameter ControlID="Categories_ddl" Name="categoryId"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<div style="padding:100px"><asp:Button runat="server" ID="btnTest" Text="Submit"
onclick="btnTest_Click" /></div>
</div>
</form>
</body>
</html>
Le JScript
$(document).ready(function() {
$("#Categories_ddl").change(function() {
$("#Sub_Categories_ddl").html("");
var CategoryId = $("#Categories_ddl > option:selected").attr("value");
if (CategoryId != 0) {
$.getJSON('LoadSubCategories.ashx?CategoryId=' + CategoryId, function(Sub_Category1) {
$.each(Sub_Category1, function() {
$("#Sub_Categories_ddl").append($("<option></option>").val(this['Sub_Category_Id'].toString()).html(this['Sub_Category1']));
});
});
}
});
});