C# drop down access issue using jquery - c#

I have issue in accesing drop down item from c# code behind
Scenario:
i am modifying drop down based on user selection using jquery/ajax call. while accesing the drop down item from code behind, still it retains old list.
Please help to access updated drop down list from c# code behind.
Sample code
Jquery code :
$.ajax({
type: 'POST',
url: "Search.aspx/LoadNewOptions",
contentType: 'application/json;charset=utf-8;',
dataType: "json",
data: "",
success: function (data) {
$("#dropdown").empty();
$($.parseJSON(data.d)).each(function () {
var Option = $('<option />');
xOption.attr('value', this.value).text(this.label);
$('#dropdown').append(Option);
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
C# Code behind code :
dropdown.SelectedItem.Value.Trim() // returns old value
Alternate Solution:
Created separate javascript function and store selected item values in hidden variable. No issues in accessing hidden variables from code behind.

The server has no knowledge of what ensued on the client unless you tell it.
It looks like you are dynamically appending elements to the dropdown. If you rebind the list when the page next executes, it doesn't know that you have modified it on the client.
hidden field is fine for simple situations
you can examine the POST and see if it contains a value which does not exist in the list, and if so, add it

The reason your old value didn't change because the server side has no knowledge of the new value. Unless you post it back to the server it will not be visible.

Related

How to retrieve POST parameters sent via AJAX with C#?

I have a simple C# application that uses a WebView that is loading a small html form that is hosted locally.
The form has two fields, such as: Name and E-mail. It is a button that, when pressed, calls a javascript function that takes all the values of the existing fields in the form, and which must be sent back to C#.
So that later I can save them in the local database or maybe send them to an online server.
var form= $("#formId");
$.ajax({
type: 'POST',
url: 'HOW CAN I SEND BACK TO C#?',
data: form.serialize(),
success: function (data) {
console.log('HOW C# CAN RESPOND BACK?');
}
});
Is it possible for C# to receive this ajax request under the hood? If not, what are the other ways to retrieve these form fields with C# once the user clicks the submit button?

How to use Bootstrap Timeline to display Data in ASP.NET C#

In my ASP.NET Application, I want to use the Bootstrap timeline to display an activity log in the application.I have been searching the internet a lot on how to use the Twitter Bootstrap timeline to display data in ASP.NET C# but couldn't find any. I understand the html behind it very well but don't know how to make it dynamic in fetching data.
I hope someone can please help me with ideas as to how I can solve this problem. Tutorial links will also be appreciated.
This is a link to the bootstrap timeline I am talking about.
http://bootsnipp.com/snippets/featured/timeline
Many thanks.
Make a call to your code behind page and return json. Next use jQuery or javascript to loop over that json to dynamically build the html that the timeline needs.
<ul id="myTimeline" class="timeline">
Add li tags in a loop. This would be a good use for something like Aurelia, knockout or angular. Otherwise just use javascript to append the li tags to the ul tag. The bootstrap timeline class will take care of the rest.
$.ajax({
url: "/yourURL",
data: JSON.stringify({ yourPostData }),
type: "Post",
datatype: "json",
contentType: "application/json; charset=utf-8"
}).then(function (data) {
var obj = $.parseJSON(data.d);
$.each(obj.timelineList, function(index, item) {
$("#myTimeline").append("<li>" + item.timelineText + "</li>");
});
});
Since there is alot of html that goes into each li tag this would be a good place for a template. Look into either the template tag or use:
<script type="html" id="myTemplate">
..your html

I have issue regarding ascx user control method calling by jquery

I have user control which is included in most of my aspx page. This user control shows huge data from database. Now I have decided to fetch that by jquery. I am very much familiar with jquery and how to call server side method by jquery. My problem is that I can not specify ascx file in jquery ajax post method. Like
function loadMore() {
$.ajax({
type: "POST",
url: "Left.ascx/LoadData",
data: "{PageIndex:1}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
},
error: function (request, status, error) {
alert(request.responseText);
}
});
}
I can not call ascx code behind method by jquery because ASCX is not directly served via URL.
I cannot write even C# code for loading & populating ascx from aspx server side method dynamically because it has been used in many aspx. So now I am in problem. No easy & good idea is coming to my mind...so I am stuck. Please show me the way to achieve it. Thanks
You cannot call the ascx method directly. What you have to do is call an aspx page method and from that call the user control method. This sounded familiar so I checked. I have an answer to a similar question here:
Jquery .ajax async postback on C# UserControl
which shows the way this can be done.
It looks to me like you want to get HTML back from your response? Possibly so you can just set the contents of a div instead of having to build the html on the client. If that is the case, then make a new aspx page that contains your ascx and have the ascx databind in the page load of the aspx.

asp:dropdownlist change dynamically

Is there any chance, when I select a row from asp:dropdownlist, dynamically change page, execute sql query and after result, change selected row in second asp:dropdownlist?
If this isn't possible only with asp.net and codebehind, please let me know how to execute SELECT-query in javascript (may be with Ajax; but I don't understand it) and change second dropdown's selected row.
Thanks!
Its a bit of a generic question because there is a couple of options that you could do plus I'm not 100% sure what you want to do. In short you could use AJAX to contact a PHP page which will do an operation on your database. A result it generated and sent back to the client. You could use JSON to hold the data that is getting sent to the browser.
All AJAX does is allow you to get data from another location based on the URI you give. I would use the JQuery library as it makes it easy to implement AJAX.
// This will trigger ajax whenever the is a change in the drop down. I am assuming the drop down class is .dropdown
$('.dropdown').change(function() {
$.ajax({
type: "POST",
url: "page_change.php",
data: { name: "about_us" }
dataType:JSON,
success: function(data) {
//The data returned from test.php is loaded in the .result tag
$('.result').html(data.html);
// If you want to change page you would execute
window.location(data.url);
}
});
});
page_change.php will then contact your database and generate JSON.
More information about JQuery AJAX here:
http://api.jquery.com/jQuery.ajax/
You will need to look at JQuery, AJAX, PHP and JSON to change data on your page.
If you just want to change page on a drop down change I suppose you could store the page name in the option id?
$('.dropdown').change(function() {
var page = $(this).attr('id');
window.location(page + ".html");
});

How can I call a non static method written in code behind using javascript?

Kindly help me to call a non-static method from code behind, using json object.
The following code is used in aspx page:
function columnDropdownScript() {
if (id == "ExpressionsLink") {
var dropdown = document.getElementById("<%=ddlTableNames.ClientID%>");
}
/
/ Configure AJAX call to server on itemChange of ddlTableNames
$.ajax({
type: "POST",
url: "Webtop.aspx/FillColumnDropdown",
data: requestTableParameters,
//contentType: "plain/text",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if (id == "ExpressionsLink") {
$("#ddlColumnNames").empty();
}
}
// alert('Check Column DropDown' + msg.d.length);
},
error: DisplayError //Event that'll be fired on Error
});
}
The following code is written in aspx.cs page
[WebMethod]
public static List<string> FillColumnDropdown(string selTableName)
{
//Code to update Selected Columns in table
}
Since you want to call page's instance method I believe that you want to use other page's controls properties or features provided by an ASP.NET platform like ViewState or some other. But when you fire plain ajax request you can't use any of that possibilities.
So the only one option for you to use ASP.NET Ajax. In that case page comes through full life cycle including recreation all page's controls instances on the server, reading ViewState and so on.
Mostly for using ASP.NET you don't need any custom javascript calls because all required javascript provided out of the box.
What do you need it's just add ScriptManager and UpdatePanel controls onto the page, put your dropdown in UpdatePanel and set AutoPostback on it to true. That's all. After that you can use server-side SelectedIndexChanged event habdler of that dropdownlist and it will be fired asynchronously.
For more info about using an UpdatePanel follow this link: Introduction to the UpdatePanel Control
EDIT: by the way: if you need only the Session or Application state or Cache but no page's controls properties and no ViewState you still can use plain ajax calls and static server methods.
Actually the AJAX is quite tricky thing :)

Categories

Resources