AJAX, Postback, EventValidation, & so on...

[Eder]

Hi!.
I have an issue by trying to implement AJAX with jQuery.
What I've tried to do is to avoid dropdownlist's postback in this way:

Creating a WebService
Call the WebService via AJAX
Populate the dropdownlist


and this is how I did it:

WebService

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<string> getAllSites()
{
// Implementation
return siteList;
}

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<string> getAllClients()
{
// Implementation
return clientList;
}

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<string> getAllBuyers()
{
// Implementation
return buyerList;
}

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<string> getAllMRPs()
{
// Implementation
return mrpList;
}


AJAX (jQuery), Populating dropdownlist (client-side)

function getSites() {
var ddlSites = jQuery("select[id$='_ddlSites']");

jQuery.ajax({
type: "POST",
data: "{}",
url: "ReportService.asmx/getAllSites",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function(msg) {
with (ddlSites.get(0)) {
options.length = 0;
options[0] = new Option("All", "-1");
jQuery.each(msg.d, function(index, item) {
++index;
options[index] = new Option(item, index);
});
}
},

error: function() {
ddlSites.get(0).options.length = 0;
alert("Failed to load sites..");
}
});
}

function getClients() {
// ...
}

function getBuyers() {
// ...
}

function getMRPs() {
// ...
}

jQuery(document).ready(function() {
getSites();
getClients();
getBuyers();
getMRPs();
});


Binding onchange event

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ddlSites.Attributes.Add("onchange", "changeSites(this); return false;");
ddlWorkCells.Attributes.Add("onchange", "changeClients(this); return false;");
ddlBuyerName.Attributes.Add("onchange", "changeBuyers(this); return false;");
ddlMRPs.Attributes.Add("onchange", "changeMRPs(this); return false;");
}
}


Client-Side onchange implementation

function changeSites(obj) {
// Change implementation
}

function changeClients(obj) {
// Change implementation
}

function changeBuyers(obj) {
// Change implementation
}

function changeMRPs(obj) {
// Change implementation
}


Everything seemed to work perfectly, weee! :)



Until I asked myself, How am i supposed to retrieve the selected values for those dropdownlists?

So now the problems are:

I populated those dropdownlist via AJAX and returned false to avoid the postback, now the event's on the server-side won't fire.

I can not retrieve the dropdownlists selected items.

I added a button to retrieve values and do some actions, but i can not retrieve values and I can not do actions cause clicking the button will fire a refresh.

I had to se EventValidation to false, since I can't add registration to my javascript functions. Something that it's almost near to impossible.



Do you have any suggestions?, that would be highly appreciated!

~ Thanks in advance
Eder Quiñones