Please find the scenario I'm trying to work on:
I have an aspx page, whose content is loaded by dynamically loading various user controls. Each of these user controls has their set of controls like a textbox, checkboxlist or a checkbox.
On click of "Save" button, I would like to capture the data in the textbox and checked boxes from the checkboxlist.
I was able to gather the data from these controls successfully using the following piece of code:
UserControl ctl1 = placeholder.FindControl("user_control_1") as UserControl;
if (ctl1 != null)
{
RadTextBox txtName = ctl1 .FindControl("txtFirstName") as RadTextBox;
if (txtName != null)
{
// Perform required CRUD
}
}
This approach was working well until I had a new requirement. To address the new requirement I had to change the logic to make an AJAX request from jQuery as below:
$.ajax({
type: "POST",
url: window.location.href,
data: {
data1: data
},
success: function (result) { //success
},
failure: function (result) {
//failure
}
}).done(function (o) {
//Error free
});
With this kind of request, I'm unable to access textbox data (or checkboxlist's checked items) on my .cs. Any call to txtFirstName.Text is coming back as null.
UserControl ctl1 = placeholder.FindControl("user_control_1") as UserControl;
if (ctl1 != null)
{
RadTextBox txtName = ctl1 .FindControl("txtFirstName") as RadTextBox;
if (txtName != null)
{
// Works well till this point.
// txtName.Text returns empty value, inspite of having data in it
}
}
Can anyone please provide pointers on how I can achieve this?
EDIT: Since a new AJAX request is generated on the click of "Save" button, all the user controls are loaded again which is resulting in losing all data entered by an end user. What are some of the ways I can capture all the end user entered data before the AJAX request is made? Perhaps, create a JSON in jQuery for textboxes and checkboxlists, then pass that in "data"?
Sounds like you are mixing jquery ajax calls and webforms which is fine.
In order to send the value back to the server-side code you need to make sure the HTML control in question is set to runat="server". This will add the user control to the viewstate. Just make sure you add a webform UpdatePanel. If not you will have a full post-back when all you really want is a partial postback. You should be able to add the "runat" attribute to any "input" control in the DOM. If you're still having problem or wish to use ASP.NET native control you can add a hidden control to the page and set it's value through javascript.
If you want to bring everything up to a modern design you can disable viewstate all together and call a webmethod to POST your data, I would recommend using WebAPI as it's easier to set up than WCF. Doing so would remove the need to use Ajax UpdatePanels and simplify the code greatly.
If you are using Telerik then instead of using an UpdatePanel you would use the RadAjaxManager.
EDIT: Sorry I just noticed you want to POST from the Ajax and have that sent via viewstate to a the WebForms backend (aspx.cs i'm assuming). This won't work unless you do a forms-data post, which seems like unnecessary effort.
If I was you I would either switch over to WebAPI. OR if you really want to keep that backend code in place I would use UpdatePanels, set the value to a control with runat=true, drive the partial-postback with some sort of hidden button, and then reference the runat control to pull the value out.
Lastly if you really really really want to keep the jQuery Ajax statement there and you really don't want to go through the effort of adding WebAPI you can just switch to ASMX and add your ASMX web-method to the aspx.cs file....although i would advise against this.