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
Related
I am using a web service API to pull json data then convert it to Dataset and show the data into REPEATER inside page load. now my question is that is there a way i can load the page first then it will show a message like loading please wait and then all the processing like pulling the data and showing in the repeater takes place. Is there any event like that in asp.net page lifecycle.
I recommend you to change your strategy. Instead of mixing ASP server controls and their events with AJAX use classic AJAX (jQuery) + html/css instead.
Your repeater would be a simple div
<div id="DataWrapper">
<div id="loadingLabel" style="display:none;">Loading...</div>
<div id="DataContainer">
</div>
</div>
You can then use either page web method or ASMX web service (or AJAX-enabled WCF service which I personally prefer):
public static IEnumerable GetMyData(int KeyID)
{
DataTable sourceData = GetRepeaterData(KeyID);
return sourceData.AsEnumerable().Select(row =>
{
return new
{
id = row["ID"].ToString(),
someName = row["UserName"].ToString(),
someSurname = row["userSurname"].ToString()
};
});
}
In JavaScript make a function that will call this service:
//but before that call, show the loading.. label
$('#loadingLabel').show();
$.ajax({
type: 'POST',
url: '/' + 'GetMyData',
data: {'KeyID':'8'},
contentType: "application/json; charset=utf-8",
dataType: "json",
timeout: 30000,
success: onSuccess,
error: onError
});
..and loop through the result in JavaScript:
function onSuccess(result)
{
var src = result.d;
for (var post in src) {
/*
here you can create an JavaScript element and assign a CSS class to it
*/
$("#DataContainer").append('<div class="myClass">'+ src[post].someName+'</div>');
}
// when loading is finished hide the loading.. label
$('#loadingLabel').hide();
}
..and CSS:
.myClass
{
border: 1px single #000000;
padding: 5px;
}
This is of course only extremely brief answer but I hope it gives you some general idea. This is very lightweight solution and you will find it much more effective than mixing ASPs repeaters and update panels etc.
To get some real numbers about the performance install the Fiddler and compare.
Also, check out this article which is very useful and contains some very helpful advices:
http://encosia.com/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/
There is no event like that in the ASP.NET life-cycle, although you could contrive something with .NET controls (update panels, timers, etc.) but a more reasonable solution could be to simply use AJAX and WebMethods (of which here is an example).
You can generally omit the housing element of a server-side repeater then, too, and just populate native client-side-only HTML elements.
I made a dashboard for my e-commerce website from where there is an option to selected page
after selecting a particular page if i press save button there i want to run these codes on selected page dynamically by which i can use scriptAnalytics.js file only for the pages i want.
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src","scriptAnalytics.js")
document.getElementsByTagName("head")[0].appendChild(fileref)
You can use jQuery Ajax function to load and run your script:
$.ajax({
url: url,
dataType: "script",
success: successFunction()
});
or try to use shorthand method jQuery.getScript()
You can load js dynamically using jQuery.getScript() method on the page you want.
I have some markup that I am generating in a Helper file (which is located in the root\App_Code\myHelper.cs directory):
#helper GenerateMarkup(int id)
{
<div class="dude">
Wow
</div>
}
and, in my results page, I have a place where this is supposed to go. It's supposed to go inside a Container div:
<div class="ContainerDIV">
</div>
I made a little jQuery to try and send an ID (int) to the GenerateMarkup(int id) method inside the Helper file, which should return the generated markup back to the jQuery function, which, in turn, should display the generated markup inside the ContainerDIV, mentioned above.
Here's my jQuery stuff (which is inside the ContainerDIV's div (please excuse the sucky-ness of my jQuery, I'm quite new to it):
<div id="ContainerDIV" class="Bordered">
<script>
$('.MoreInformationOnPosition').click(function () {
var elID = $(this).attr('id');
$.ajax({
type: "POST",
url: "JTS.cs/GenerateMarkup",
data: elID,
contentType: "application/html",
dataType: "html",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#ContainerDIV").attr(msg.d);
}
});
});
</script>
</div>
It's just not working. I've tried PageInspecter with Visual Studio 2012, and can't find any "issues", but I do know I've done something wrong. I believe this is quite a unique situation, which might explain why I failed to find anything on the web about this.
How can I achieve this? I'd appreciated any help at all.
Are you getting the result from the helper? If yes, try this instead:
$("#ContainerDIV").html(msg.d);
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.
The title sort of explains what I'm trying to do.
The reason for this is that I am trying to implement infinite scrolling on my ASP.NET C# Website. I've previous accomplished the "effect" of lazy scrolling with the ListView Control but that was a dirty and 'slow' trick that used a DataPager and a couple of HiddenFields.
I would like to send a completely pre-formatted HTML element from a WebMethod to jQuery so that I can append it on the container <div>.
Actually what I need rendered in the WebMethod is a bunch of objects inside a container <div> that are similiar to the Facebook Wall. What I previous had was a ListView (B) nested in another ListView (A). A Single Each <ItemTemplate> from a single ListView had multiple ListViewItems of the other ListView. (A) Representing a wall post and (B) Comments bound to the Primary Key of (A).
Anyway, am I looking at this issue from the right corner or should I figure out some other way of doing this? Please share you thoughts.
Thank you.
You can just return a string from your webmethod with the html in it - and then pump it directly into an html element on your page on the 'success' function. NB I think this is the 'html()' element - or you can use .append(text);
Using JQuery
$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#Result").click(function() {
$.ajax({
type: "POST",
url: "Default.aspx/GetHTMLFormatted",
data: "{}",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").html(msg.d); // or .append(msg.d);
}
});
});
});
A better way to do it though is to return a JSON structure and use a template library to emit your html structure. See http://stephenwalther.com/blog/archive/2010/11/30/an-introduction-to-jquery-templates.aspx