XinarisC

Infinite Scrolling with jQuery & ASP .NET

2011-05-28T22:52:00Z

If you want to find out how you can append data from the server to a web page asynchronously as the user scrolls to the bottom of the page, creating an “infinite scrolling”, then follow this post. Basically this is a functionality that you see in facebook’s News Feed and other popular sites. We are going to see how to fetch the data from the server and append them on the screen. Every time the user scrolls to the bottom of the web page then our code should fetch the data for the next page and append them on the screen. The user should see a spinning loading message to inform him that a process is running on the server. The jQuery library has a full suite of AJAX capabilities that can help you to accomplish this. The functions and methods therein allow us to load data from the server without a browser page refresh.

Notes:

The data is coming from the server so for example you can fetch them from a database. For this example I dynamically fetch the blog posts list from studentguru.gr website by parsing the page tags. Every time the user scrolls to the bottom of the webpage the next page of the blog post list is loaded.

Live DEMO

Download Source Code

Steps

1. Define the div area that the data will be shown in the webpage and add a div area for the loading message and spinning image.

<div id="resultAppendDiv"> </div> <div id="loadingDiv" class="loadingDiv" style="clear: both; text-align: center;"> <div style="text-align: center; vertical-align: middle; width: 400px; padding-left: 200px; color: #999"> <br /> <img src="./Images/loading3.gif" alt="Loading" /><br /> Loading.. <br /> </div> </div

2. Using jQuery .ajax() function make the query to the server for the first time the webpage was loaded.

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

.ajax() is just one of the functions you can use to make an asynchronous request to the server. Other functions are .post() and .live()

3. Write the server side code to fetch the blog post list (creating an HTTP Get and parsing the page)

You can create an ashx handler to return a string containg the data or you can just create a method and a expose it as a web method (with [Web Method])

// Get the results from private static string url = "http://www.studentguru.gr/blogs/Default.aspx?PageIndex="; public void ProcessRequest(HttpContext context) { string strPage; // Check the QueryString if its null or empty // if its null then this is the first time the web page is loaded // so fetch the first page of data if (!String.IsNullOrEmpty(context.Request.QueryString["page"])) strPage = context.Request.QueryString["page"]; else strPage = "1"; // Create an HTTP Get request HttpWebRequest webRequest = WebRequest.Create(url + strPage) as HttpWebRequest; StringBuilder sb = new StringBuilder(); StreamReader responseReader = new StreamReader( webRequest.GetResponse().GetResponseStream() ); // Get the response data // Now the response data contains all the web page as you can see it when you navigate to it string responseData = responseReader.ReadToEnd(); // Parse the web page and get the data we need // Blog list container String bpDelimeter = "BlogPostList"; // Search for bpDelimeter from the start of the web page int intBPContainerStart = responseData.IndexOf(bpDelimeter, 0); int intliItemStart = 0; int intliItemEnd = 0; while (intliItemStart != -1) { // Blog post list item String liDelimeterStart = "BlogPostArea"; intliItemStart = responseData.IndexOf(liDelimeterStart, intliItemEnd); if (intliItemStart == -1) { // If no more Blog post list items are on the web page exist loop break; } String liDelimeterEnd = "</li>"; intliItemEnd = responseData.IndexOf(liDelimeterEnd, intliItemStart + 12); int intBGItemEnd = responseData.IndexOf(liDelimeterStart, intliItemStart + 12); string item = responseData.Substring(intliItemStart - 11, (intliItemEnd - (intliItemStart))); // Add the item to the string buidler sb.Append(item + "</li>"); } string result = sb.ToString(); // Replace the relative paths with the absolute paths result = result.Replace("/blogs/", "http://www.studentguru.gr/blogs/"); result = result.Replace("/members/", "http://www.studentguru.gr/members/"); context.Response.ContentType = "text/plain"; context.Response.Write(result); }

4. Write the JavaScript code to trace the user scrolling to the bottom of the web page.

// When user scrolls to the bottom of the web page add more content $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { AddMoreContent(); } });

5. Using jQuery .ajax() function make the query to the server and append the next page of the data to the screen.

The $lastid variable below is the next page of data to be loaded. The first page was fetched on the page load.

$(document).ready(function () { $lastid = 2; function AddMoreContent() { // send an attribute in QyeryString as the page of data is going to load $.ajax({ contentType: "text/html; charset=utf-8", url: "FetchBlogItems.ashx?page=" + $lastid, dataType: "html", success: function (data) { $("#resultAppendDiv").append(data); // increase the paging $lastid = $lastid + 1; } }); } });

6. Write the code to show or hide the loading div area when the ajax starts and ajax stops respectively.

$(document).ready(function () { // Show the loading Div Area when ajax starts $('#loadingDiv').ajaxStart(function () { $(this).show(); }) // Hide the loading Div Area when ajax stops $('#loadingDiv').ajaxStop(function () { $(this).hide(); }) });

Drag n drop Shopping cart with JQuery & ASP .NET

2010-12-01T22:51:00Z

Let’s see some basics on how to use JQuery with ASP.NET controls with an interesting example. This is a long post so I will try to keep it as simple and organized as possible.

We are going to create a classic shopping cart behavior. The ASP.NET control ListView will hold the products in three columns. A user can drag each item (product) of the ListView and drop it inside a floating div (the shopping cart). We are using various visual effects on loading the ListView, adding/removing an item to/from the shopping cart, dropping an item, hiding and showing Check out div and more. Finally we access the client-side Shopping cart div’s content from the code-behind.

General objectives/What to learn:

ASP.NET ListView Control to hold the products. Use JQuery to define each item of the ListView as the draggable area.
Use a div as the shopping cart. Define it as the droppable area.
Use JQuery to make the shopping cart floating on the screen when you scroll down.
JQuery effects on loading the ListView, adding or removing an item from the shopping cart, dropping a product, hiding/showing ListView, hiding/showing Check Out Div.
Access the client-side shopping cart from the code-behind using JQuery ajax.
Reappear the products in shopping cart on server postback.
Create a client-side and server-side (using ASP.NET AJAX) checkout button to display the products and their total cost in shopping cart.

Using:

The JQuery JavaScript library, last version available to download here,
The JQuery UI JavaScript library (which includes effects and widgets), version 1.8.6 available to download here,
Floating Div JS library, available here (use it to set a DOM object float on screen to follow the users while they scroll the page)

LIVE DEMO:

Source Code/Sample project:

Steps:

1. ListView control to hold the products

2. Shopping cart Div

3. Check Out Div

4. JQuery

4.1. JQuery effects
4.2. Make the shopping cart Div floating on the screen as we scroll down

4.3. Set the ListView items as the draggable area

4.4. Set the Shopping cart Div as the droppable area

4.5. Update the Lists in code-behind about the newly dropped item

4.6. Update the Lists in code-behind when removing an item from the shopping cart

4.7. Client-side show the Check out Div and total amount of order
4.8. Server-side show the Check out Div and total amount of order

5. Manually create PostBack + reappear items in shopping cart

1. ListView control to hold the products

Add a ListView control to the page and set some styling with CSS.

<asp:ListView runat="server" ID="listView" GroupItemCount="3"> <LayoutTemplate> <div style="width: 500px;"> <asp:PlaceHolder runat="server" ID="groupPlaceHolder" /> </div> </LayoutTemplate> <GroupTemplate> <div style="clear: both;"> <asp:PlaceHolder runat="server" ID="itemPlaceHolder" /> </div> </GroupTemplate> <ItemTemplate> <div class="productItemStyle primarydiv" price='<%# Eval("Price") %>' code='<%# Eval("Code") %>' name='<%# Eval("Name") %>' id='<%# Eval("Code") %>'> <img src='<%# "/Products/" + Eval("Picture") %>' height="120" width="120" alt="" /> <b> <br /> <%# Eval("Name") %></b> <br /> Price: $<%# Eval("Price") %><br /> <br /> </div> </ItemTemplate> <ItemSeparatorTemplate> <div class="itemSeparator"> </div> </ItemSeparatorTemplate> <GroupSeparatorTemplate> <div class="groupSeparator"> </div> </GroupSeparatorTemplate> <EmptyDataTemplate> </EmptyDataTemplate> </asp:ListView>

The GroupItemCount="3" ListView attribute, shows 3 items (products) in each row of the ListView. Defining itemSeparator and groupSeparator classes will separate each cell and row as showed in the demo. As we need info about the id, code, name and price of the selected (dragged n dropped in shopping cart) product, one method is to define custom attributes on the main div, so we have access to them from JavaScript. We could also add the custom attributes to the main div by the ListView’s ItemDataBound event.

As for the products in code-behind, for the simplicity of this post I preferred to save them in static Lists rather than save them in a database. So, we need to create a list of products and set them as the source of the ListView on Page Load, update the list when dropped an item to shopping cart or deleting an item from the shopping cart, retrieve the products from the list and show them in the shopping cart on PostBack.

First, create a class for the products:

public class Product { public string picture; public string Name; public string Price; public string Code; public Product(string _picture, string _name, string _price, string _code) { this.picture = _picture; this.Name = _name; this.Price = _price; this.Code = _code; } }

On Page_Load event of the page, create a DataTable and add some items as the ListView datasource.

DataTable table = new DataTable(); table.Columns.Add("Picture", typeof(string)); table.Columns.Add("Name", typeof(string)); table.Columns.Add("Price", typeof(string)); table.Columns.Add("Code", typeof(string)); table.Rows.Add("0694B95DFEA6CE52729FCEB27D6C92C9.png", "LENOVO Ideapad S10-2 ", "249 EUR", "1"); ... ... ... listView.DataSource = table; listView.DataBind();

Create two static Lists, one to hold the products details (productList) and a list to hold the quantity of each item in the basket (countList).

static List<Product> productList = new List<Product>(); // available products in application

static List<int> countList = new List<int>(); // quantity of each item in shopping cart

Add the previously created DataTable row’s contents in the productList and initialize countList

for (int k = 0; k < table.Rows.Count; k++) { productList.Add(new Product(table.Rows[k]["Picture"].ToString(), table.Rows[k]["Name"].ToString(), table.Rows[k]["Price"].ToString(), table.Rows[k]["Code"].ToString())); countList.Add(new int()); countList[k] = 0; }

2. Shopping cart Div

In the demo you can download all the CSS classes showed here.

3. Check Out Div

<div id="checkoutDiv" runat="server" style="border: 1px solid #616161; background-color: #fcfcfc; font-family: Calibri, Verdana; font-size: 12px; display: none;"> <table style="width: 100%"> <tr> <td style="vertical-align: top;"> <img src="images/shopping_cart.jpg" style="height: 89px; width: 112px" alt="" /> </td> <td style="padding-left: 20px;"> <div id="checkOutContentDiv" runat="server"> </div> </td> </tr> <tr> <td style="padding: 5px;"> <img src="images/confirm_checkout.png" alt="" onclick="javasript:ShowlistViewDiv()" /><br /> <a href="#" onclick="BLOCKED SCRIPTShowlistViewDiv()">Back to Products</a> </td> <td> </td> </tr> </table> </div>

4. JQuery

Include the JQuery script file, the JQuery UI script file (to be used for the effects) and the script file to make the shopping cart div float as we scroll the page:

4.1. JQuery effects:

Add ListView onload effect

Add a div around the ListView control (listViewDiv) so you can define a JQuery effect on it.

<script type="text/javascript"> $(document).ready(function () { $("#listViewDiv").show('explode', {}, 500); }); </script>

This will cause the listViewDiv show with the explode effect as the screenshot below:

The $().ready(function () { }); means that the content of it will be executed on body load.

Set effect at the shopping cart div when an item is dropped (This effect is disabled in the demo)

$(document).ready(function () { $("#divStayTopLeft").effect("bounce"); });

Show the check out Div/ Hide the ListView Div

function HidelistViewDiv() { $("#listViewDiv").hide('slide'); $("#checkoutDiv").show('fold'); }

Show the ListView Div/ Hide the check out Div

Note that we can define a callback function on the JQuery show() function’s arguments.

function ShowlistViewDiv() { $("#checkoutDiv").hide('slide'); $("#listViewDiv").show('explode', {}, 500, callbackShowSearch2); } function callbacklistView() { };

4.2. Make the shopping cart Div floating on the screen as we scroll down:

As we previously included the script file jquery.floatobject-1.4.js we can now set the shopping cart float as we scroll the page.

$().ready(function () { $("#divStayTopLeft").makeFloat({ x: "current", y: "current", speed: "fast" }); });

4.3. Set the ListView items as the draggable area:

We previously set the ListView privary div as class="productItemStyle primarydiv", so we use the CSS class name to set the JQuery action:

$(document).ready(function() { $(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" }); });

4.4. Set the Shopping cart Div as the droppable area:

We also added to ListView primary Div some custom attributes to be used. The code below retrieves those custom attribute’s values. Note that, we add a class to the dropped item to make product's image smaller.

$(".dropZone").droppable( { // Set the item to be accepted in the shopping cart (Access only items with a "productItemStyle" class.) accept: ".productItemStyle", // Set the the class of the div when we hover with an item to be dropped in the div hoverClass: "dropHover", // set the action on item dropped drop: function(ev, ui) { // Add a new class to the dropped item. var droppedItem = ui.draggable.clone().addClass("droppedItemStyle"); // Get the product code var productCode = droppedItem[0].attributes["code"].nodeValue; // Get the product price var productPrice = getFormattedPrice(droppedItem[0].attributes["price"].nodeValue); // Create a Remove Link for the item in the shopping cart var removeLink = document.createElement("a"); removeLink.innerHTML = "Remove"; removeLink.className = "deleteLink"; removeLink.href = "#"; removeLink.onclick = function() { $(".dropZone").children().remove("#" + droppedItem[0].id); } droppedItem[0].appendChild(removeLink); $(this).append(droppedItem); //$("#divStayTopLeft").effect("bounce"); // Uncomment this line to get Bounce effect when dropping a product to shopping cart } });

4.5. Update the Lists in code-behind about the newly dropped item:

Add the following code in the drop: function(ev, ui) showed above:

$.ajax({ type: "POST", url: "Default.aspx/UpdatePanel", contentType: "application/json; charset=utf-8", data: "{id:'" + productCode + "'}", dataType: "json" });

The ajax call will create a POST to the server side public static method called "UpdatePanel" which take a string as an argument named productCode

Note that the public static method should marked as [WebMethod] (add a reference to System.Web.Services).

[WebMethod] public static void UpdatePanel(string id) // Add item to basket { // find the product in productsList int foundPos = productSearchById(id); if (foundPos != -1) // If found increase the quantity of the item in countList { countList[foundPos] = countList[foundPos] + 1; } } public static int productSearchById(string id) // find the product with code == id { for (int i=0; i<productList.Count; i++) { if (productList.Code == id) { return i; } } return -1; }

4.6. Update the Lists in code-behind when removing an item from the shopping cart:

Accordingly use a JQuery ajax post to call a server method to delete the Products from the lists.

This is the current removeLink.onclick function (in drop: function(ev, ui)):

removeLink.onclick = function() { $(".dropZone").children().remove("#" + droppedItem[0].id); }

Replace the code above with the following:

removeLink.onclick = function() { $(".dropZone").children("#" + droppedItem[0].id).fadeOut('slow', function () { $(this).remove(); }); $.ajax({ type: "POST", url: "Default.aspx/RemoveItem", contentType: "application/json; charset=utf-8", data: "{id:'" + productCode + "'}", dataType: "json" }); }

Add the following method to code-behind:

[WebMethod] public static void RemoveItem(string id) // Remove item from basket { // find the product in Products List int foundPos = productSearchById(id); if (foundPos != -1) // If found decrease the quantity of the item in countList { countList[foundPos] = countList[foundPos] - 1; } }

4.7. Client-side show the Check out Div and total amount of order:

function listSelectedItems() { var itemsInShoppingCart = $(".dropZone div.primarydiv"); var cart = "<table style='width:100%;'>"; var total = 0; for(i=0;i<=itemsInShoppingCart.length-1;i++) { cart = cart + "<tr><td style='background-color:#f7f7f7;'>" + itemsInShoppingCart[ i ].attributes["name"].nodeValue + "</td><td>" + itemsInShoppingCart[ i ].attributes["price"].nodeValue + "</td></tr>"; total += parseFloat(itemsInShoppingCart[ i ].attributes["price"].nodeValue); } cart = cart + "<tr><td style='font-weight:bold'>Total</td><td style='font-weight:bold'>€ " + total + "</td></tr>"; cart = cart + "</table>"; checkoutDiv.style.display = 'block'; checkOutContentDiv.innerHTML = cart; HidelistViewDiv(); }

4.8. Server-side show the Check out Div and total amount of order:

Note that we surround the following button as well as the check out Div with an UpdatePanel. Find out how we can call a JavaScript function from the code-behind in an ASP.NET Ajax enabled webpage:

protected void checkoutButton_Click(object sender, EventArgs e) { float total = 0; StringBuilder cart = new StringBuilder(); cart.Append("<table style='width:100%;'>"); for (int i = 0; i < countList.Count; i++) { if (countList != 0) { cart.Append("<tr><td style='background-color:#f7f7f7;'>" + productList[ i ].Name + "</td><td>" + productList[ i ].Price + "</td></tr>"); string price = productList[ i ].Price.ToString().Substring(0, productList[ i ].Price.ToString().Length - 4); float subtotal = 0; float.TryParse(price, out subtotal); total += subtotal; } } cart.Append("<tr><td style='font-weight:bold'>Total</td><td style='font-weight:bold'>€ " + total + "</td></tr>"); cart.Append("</table>"); checkoutDiv.Style.Add("display", "block"); checkOutContentDiv.InnerHtml = cart.ToString(); // Call javascript function ClientScriptManager csm = Page.ClientScript; System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append(@"HidelistViewDiv();"); ScriptManager.RegisterStartupScript(shoppingCartUpdatePanel, shoppingCartUpdatePanel.GetType(), Guid.NewGuid().ToString(), sb.ToString(), true); }

5. Manually create PostBack + reappear items in shopping cart

Cycle through productList, find the selected products from countList and show the products in the shopping cart.

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { LoadTable(); } else { // if it is not a postback // fill the basket with the Product items in productList StringBuilder sb = new StringBuilder(); for (int i = 0; i < countList.Count; i++) { if (countList != 0) { sb.Append("<div class=\"productItemStyle primarydiv droppedItemStyle\" price=\"" + productList[ i ].Price + "\" code=\"" + productList.Code + "\" name=\"" + productList[ i ].Name + "\" id=\"" + productList[ i ].Code + "\"><div></div>"); sb.Append("<img src=\"/Products/" + productList[ i ].picture + "\" height=\"64\" width=\"64\" /><b><br />"); sb.Append(productList[ i ].Name + "</b><br />"); sb.Append("Price: " + productList[ i ].Price + "<br /><br />"); sb.Append("<a href=\"#\" class=\"deleteLink\" code=\"" + productList[ i ].Code + "\" onclick=\"BLOCKED SCRIPTRemoveProductItem(" + productList[ i ].Code + ")\" >Remove</a>"); sb.Append("</div>"); } } dropPanel.InnerHtml = sb.ToString(); } }

Final notes

This is a small example of what you can achieve using JQuery in your ASP.NET projects. It is easy to use and gives your WebPages a better look with impressive effects. I hope you like it!

Call the Master Page from a Content Page (ASP.NET)

2010-11-04T15:53:00Z

We can see how to call a Master Page public method from the content page with a real problem when dealing with Master Pages.

How can we select/mark the selected link on the menu of an html website?

Usually this is done using CSS.

What about an ASP.NET website with the menu in the Master Page?

Unfortunately we can’t use CSS to accomplish this. So we need to define new methods. A server-side solution of the problem is showed below, but any better methods are welcome. The general idea is to call a Master Page method from the content page and pass a string that will recognize which page has loaded. For example in the content page “Downloads” we call the public method setBodyId("downloads") that exists in the Master Page. Then in the Master Page we can select the downloads div by changing it's background-color.

Live Demo:

Source Code/Sample project:

Steps:

1. Master Page: Prepare the menu:

In this demo I created a floated div menu with LinkButtons as their content:

Make sure all menu items (div in this case) have an id and runat="server" attribute so that we have access to the div from the code-behind.

2. Master Page: Add an id attribute to the Master Page's body tag

<body id="<%=BodyId%>"></body>

3. Master Page: Add public method

public string BodyId; public void setBodyId(string idPassed) { BodyId = idPassed; if (idPassed == "home") { homeDiv.Style.Add("background-color", "#bfcbd6"); } else if (idPassed == "downloads") { downloadDiv.Style.Add("background-color", "#bfcbd6"); } else if (idPassed == "about") { aboutDiv.Style.Add("background-color", "#bfcbd6"); } }

So now let's see how we call the setBodyId(string idPassed) public method.

4. Content Page: Add @MasterType directive to the top of the content page's declarative markup

<%@ MasterType VirtualPath="~/MasterPage.master" %>

With this directive added you can reference the Master Page's public methods and properties programmatically in the content page's code-behind.

5. Content Page: Call the Master Page's method on page load

protected void Page_Load(object sender, EventArgs e) { this.Master.setBodyId("about"); }

That's it! This is a simple task but again this is not the best and efficient way to do it.

Live Demo

Sample project

Post Updated: Thanks to djsolid's feedback!

Data Binding Techniques (ASP.NET, LINQ)

2010-03-17T21:04:00Z

Μια κατηγορία controls που είναι ιδιαίτερα σημαντικά σε ένα ASP.NET Website, πιστεύω κανένας δεν θα αρνηθεί ότι είναι τα Data Controls. Δηλαδή αυτά, με τα οποία μπορούμε με περισσότερη ευελιξία να αναπαραστήσουμε δεδομένα με τον τρόπο που εμείς θέλουμε τα οποία συνήθως προέρχονται από μια βάση δεδομένων ή άλλα μέσα.

Έχω δημιουργήσει πέντε παραδείγματα, στα οποία χρησιμοποιώ το control GridView. Κατά τον ίδιο και παρόμοιο τρόπο λειτουργούν και τα υπόλοιπα controls, όπως DataList, DetailsView, FormView κτλ.

Γενικά:

Για τα παραδείγματα χρησιμοποίησα μια βάση δεδομένων (DataBindingDB) που περιέχετε στο Source Code.
Ένα LINQ to SQL αρχείο (DataBindingDataClasses.dbml) με τα ακόλουθα tables:

Source Code:

1. Αυτόματος ορισμός πηγής δεδομένων:

Σε αυτό και στα ακόλουθα παραδείγματα θα πάρουμε από την βάση τα στοιχεία των χρηστών που βρίσκονται στο table Account καθώς και κάποιες άλλες πληροφορίες στην συνέχεια.

Δημιουργούμε ένα GridView και επιλέγουμε από το βελάκι στο control "Choose Data Source".	Επιλέγουμε Data Source Type: Linq
Επιλέγουμε το Context Object το οποίο έχει αυτόματα οριστεί όταν δημιουργήσαμε το .dbml αρχείο	Επιλέγουμε τα πεδία από το table που θέλουμε

Έτσι αν τρέξουμε το project μας έχουμε το παρακάτω αποτέλεσμα:

2. Bound fields, DataKeyNames, RowCommand, RowDeleting:

Εισάγουμε στην σελίδα μας το παρακάτω GridView:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="UserId" onrowcommand="GridView1_RowCommand" onrowdeleting="GridView1_RowDeleting"> <Columns> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="Gender" HeaderText="Gender" /> <asp:BoundField DataField="Telephone" HeaderText="Telephone" /> <asp:ButtonField Text="More" CommandName="More"/> <asp:CommandField ShowDeleteButton="True" /> </Columns> </asp:GridView>

Παρατηρούμε το property DataKeyNames στο GridView. Με αυτό τον τρόπο έχουμε σε κάθε record του GridView το UserId του χρήστη το οποίο θα το χρησιμοποιήσουμε αργότερα.
Το DataField έχει value το όνομα του column όπως εμφανίζεται στην βάση δεδομένων (*).
Το ButtonField με CommandName="More" καλεί το event GridView1_RowCommand.
Το CommandField που στην περίπτωσή μας έχει το ShowDeleteButton="True" καλεί το event GridView1_RowCommand με e.CommandName="Delete" και στη συνέχεια το GridView1_RowDeleting.
Στο Page_Load της σελίδας ανακτούμε τους χρήστες από την βάση.με τον ακόλουθο τρόπο:

protected void Page_Load(object sender, EventArgs e) { DataBindingDataClassesDataContext db = new DataBindingDataClassesDataContext(); var users = from u in db.Accounts select u; GridView1.DataSource = users; GridView1.DataBind(); } protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) { ; } protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { int index = Convert.ToInt32(e.CommandArgument); string keyname = ((GridView)sender).DataKeys[index].Value.ToString(); Guid userGuid = new Guid(keyname); if (e.CommandName == "More") { ; } }

(*) Αν θέλουμε να αποφύγουμε το value του DataField να είναι το ίδιο με το όνομα του column στη βάση (αυτό θα βοηθήσει και στην περίπτωση που έχουμε ίδια ονόματα σε column διαφορετικών tables που θα πάρουμε τα δεδομένα) τότε π.χ. έχουμε:

<asp:BoundField DataField="name_of_user" HeaderText="Firstname" />

και στον κώδικα:

protected void Page_Load(object sender, EventArgs e) { DataBindingDataClassesDataContext db = new DataBindingDataClassesDataContext(); var users = from u in db.Accounts select new { name_of_user = u.FirstName, surname = u.LastName, gender = u.Gender, telephone = u.Telephone, UserId = u.UserId }; GridView1.DataSource = users; GridView1.DataBind(); }

3. TemplateFields:

Εισάγουμε το παρακάτω GridView. Τώρα έχουμε μόνο ένα Column με ένα TemplateField όπου μέσα μπορούμε να τοποθετήσουμε οποιοδήποτε server-side control θέλουμε ή html, δίνοντας έτσι την συγκεριμένη εμφάνιση/μορφή που θέλουμε στο GridView.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="UserId"> <Columns> <asp:TemplateField> <ItemTemplate> <table style="font-family:Calibri; font-size:small"> <tr> <td colspan="4" style="font-size:medium; font-weight:bold"> <asp:Label ID="firsnameLastnameLabel" runat="server" Text='<%# Eval("firsnameLastname") %>' /> </td> </tr> <tr> <td class="leftTextStyle"> UserName: </td> <td style="width:100px"> <asp:Label ID="userNameLabel" runat="server" Text='<%# Eval("UserName") %>' /> </td> <td class="leftTextStyle"> Gender: </td> <td style="width:100px"> <asp:Label ID="genderLabel" runat="server" Text='<%# Eval("gender") %>' /> </td> </tr> <tr> <td class="leftTextStyle"> Email: </td> <td> <asp:Label ID="emailLabel" runat="server" Text='<%# Eval("email") %>' /> </td> <td class="leftTextStyle"> Telephone: </td> <td> <asp:Label ID="Label1" runat="server" Text='<%# Eval("telephone") %>' /> </td> </tr> <tr> <td colspan="4">   </td> </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

Κατα τον ίδιο τρόπο με το προηγούμενο παράδειγμα στο event Page_Load:

4. DataTable, Call function from GridView:

Στα προηγούμενα παραδείγματα είδαμε ότι Gender εμφανίζεται ως True/False γιατί στην βάση μας είναι ορισμένο ως bit. Άρα θέλουμε ένα τρόπο έτσι ώστε να "πειράξουμε" το Gender πριν να θέσουμε το DataSource του GridView.

private void LoadContent() { DataBindingDataClassesDataContext db = new DataBindingDataClassesDataContext(); DataTable usersTable = getUsersTable(); var users = from u in db.Accounts orderby u.aspnet_User.UserName ascending select u; foreach (var user in users) { string gender = ""; if (user.Gender == true) gender = "Female"; else gender = "Male"; usersTable.Rows.Add(user.UserId, user.FirstName + " " + user.LastName, user.aspnet_User.UserName, user.aspnet_User.aspnet_Membership.Email, gender, user.Telephone); } GridView1.DataSource = usersTable; GridView1.DataBind(); } private DataTable getUsersTable() { DataTable table = new DataTable(); table.Columns.Add("UserId", typeof(string)); table.Columns.Add("firsnameLastname", typeof(string)); table.Columns.Add("UserName", typeof(string)); table.Columns.Add("email", typeof(string)); table.Columns.Add("gender", typeof(string)); table.Columns.Add("telephone", typeof(string)); return table; }

Επίσης θέλουμε να προσθέσουμε ένα Image στο GridView που να ξεχωρίζει το φύλο των χρηστών. Έτσι έχουμε αυτό το control μέσα σε ένα TemplateField:

<asp:Image ID="genderImage" runat="server" ImageUrl='<%# GetImage(DataBinder.Eval(Container.DataItem, "gender")) %>' />

και την παρακάτω συνάρτηση:

public static string GetImage(object DisplayText) { if (DisplayText.ToString() == "Female") { return "~/images/female.png"; } else { return "~/images/male.png"; } }

Άν ορίσουμε Paging στο GridView:

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { GridView1.PageIndex = e.NewPageIndex; LoadContent(); }

5. Gridview in Gridview and more:

Υπάρχουν περιπτώσεις που μέσα σε ένα GridView πρέπει να τοποθετήσουμε άλλο GridView ή άλλα server-side controls. Σε ένα cell του 3ου παραδείγματος τοποθετούμε το παρακάτω GridView:

<asp:GridView ID="languagesGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="langId" OnRowDataBound="languagesGridView_RowDataBound"> <Columns> <asp:TemplateField> <ItemTemplate> <table style="width: 100%"> <tr> <td> <asp:Label ID="langName" runat="server" Text='<%# Eval("langName") %>' /> </td> </tr> </table> </ItemTemplate> <HeaderTemplate> <table style="width: 100%"> <tr> <td> Language </td> </tr> </table> </HeaderTemplate> </asp:TemplateField> </Columns> </asp:GridView>

Γενικά χρησιμοποιούμε το event RowDataBound για να ρυθμίσουμε εσωτερικά controls:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { GridView languages = (GridView)e.Row.FindControl("languagesGridView"); Guid userGuid = new Guid((DataBinder.Eval(e.Row.DataItem, "UserId")).ToString()); DataBindingDataClassesDataContext db =new DataBindingDataClassesDataContext(); var usersInLanguages = from u in db.UserInLanguages where (u.UserId == userGuid) select new { langId = u.Language, langName = u.ProgrLanguage.languageName }; languages.DataSource = usersInLanguages; languages.DataBind(); } }

Πώς μπορούμε να έχουμε access από το εσωτερικό GridView σε controls που βρίσκονται στο εξωτερικό GridView:

protected void languagesGridView_RowCommand(object sender, GridViewCommandEventArgs e) { Control c = (Control)sender; c = (c.Parent).Parent; GridViewRow parentGridViewRow = (GridViewRow)c; Label messageLabel = (Label)parentGridViewRow.FindControl("messageLabel"); // do things messageLabel.Text = "Updated"; }

Generate a Captcha - Image Verification (ASP.NET, C#)

2010-01-31T13:22:00Z

Ένα CAPTCHA συνήθως αποτελείται από μια εικόνα στην οποία απεικονίζεται ένα κείμενο, και ο χρήστης καλείται να πληκτρολογήσει το κείμενο που βλέπει στην εικόνα. Χρησιμοποιείται σε Login forms, Register forms, User Comments ή σε οποιαδήποτε άλλη περίπτωση θέλουμε να ξεχωρίσουμε ένα πραγματικό χρήστη από ένα bot/υπολογιστή. Με την χρήση αυτή αποφεύγουμε για παράδειγμα τις πολλαπλές επερωτήσεις στην βάση μας στην περίπτωση ενός Login form. Αυτό προσφέρει σαφώς μεγαλύτερη ασφάλεια στο σύστημα μας, αλλά θα πρέπει να αναφέρουμε ότι υπάρχουν εξελιγμένοι αλγόριθμοι (Image Recognition/Text Recognition algorithms) που μπορούν να αποσπάσουν το κείμενο από την εικόνα.

Στο διαδίκτυο υπάρχουν πάρα πολλά έτοιμα Captcha από διάφορες εταιρίες που μπορείς να τοποθετήσεις στο site σου αλλά συνήθως ξεχωρίζουν στη σελίδα με υπερβολικά χρώματα και μεγάλα logos. Γι' αυτό πάντα προτιμώ τα self-made που είναι customizable:P (άσχετα αν είναι πετυχημένα στο design ή όχι). Έχω υλοποιήσει σε C# την δημιουργία ενός σχετικά απλού Captcha σε ένα <asp:Login /> control και εξηγώ τα βήματα που ακολούθησα. Τα backgrounds και τo text δεν είναι και τόσο αισθητικά ωραία, αλλά λόγω έλλειψης χρόνου θα αρκεστώ σε αυτά που βρήκα στο διαδίκτυο.

Τελικό αποτέλεσμα:

Source Code:

Example Project

Γενική ιδέα:

Σε ένα folder στο project μας έχουμε τα background images των captcha που θέλουμε να χρησιμοποιήσουμε. Επιλέγουμε τυχαία ένα από αυτά και γράφουμε πάνω του ένα random string το οποίο μπορεί να είναι αριθμοί, γράμματα, σύμβολα ή συνδυασμός τους.
Κρυπτογραφούμε (π.χ. με md5) το random string και το τοποθετούμε σε ένα Session Variable.
Από τη φόρμα που χρησιμοποιούμε τελικά το Captcha, κρυπτογραφούμε το κείμενο που έδωσε ο χρήστης και το συγκρίνουμε με αυτό που βρίσκεται στο Session. Αν οι δύο τιμές δεν είναι ίσες τότε διακόπτουμε την ενέργεια του χρήστη.

Βήματα:

1. Δημιουργούμε μια νέα .aspx σελίδα, δεξί click στο project μας, Αdd New Item -> Web Form ('getRandomImage.aspx')

Σε ένα folder έχουμε τοποθετήσει τα background images. (Έχω χρησιμοποιήσει .jpg 60x30px με ονόματα background1.jpg, background2.jpg, background3.jpg, background4.jpg). Στο Page_Load χρησιμοποιούμε τον παρακάτω κώδικα τον οποίο εξηγώ σε σχόλια όπου χρειάζεται.

// Get a random integer from RandomNumber(int min, int max) method Random random = new Random(); int ImageNum = RandomNumber(1, 5); // (1-max number of background images) // Select Background Image string filename = Server.MapPath("images/background" +ImageNum + ".jpg"); // Load image Bitmap bitMapImage = new System.Drawing.Bitmap(filename); Graphics graphicImage = Graphics.FromImage(bitMapImage); // Get random string from RandomString(int sizeOfString) method string textToWrite = RandomString(5); // Write text on image graphicImage.DrawString(textToWrite, new Font("Arial", 12, FontStyle.Bold), SystemBrushes.WindowText, new Point(0, 5)); // Encode random string and save the cipher text to a session variable MD5 md5 = new MD5CryptoServiceProvider(); byte[] pass = Encoding.UTF8.GetBytes(textToWrite); Session["captchavalue"] = Encoding.UTF8.GetString(md5.ComputeHash(pass)); System.IO.MemoryStream mstr = new System.IO.MemoryStream(); // Save the image bitMapImage.Save(mstr, ImageFormat.Jpeg); // Set the content type Response.ContentType = "image/jpeg"; // Write image Response.BinaryWrite((byte[])(mstr).ToArray()); //Clean graphicImage.Dispose(); bitMapImage.Dispose();

Οι συναρτήσεις για την δημιουργία τυχαίων ακεραίων και συμβολοσειρών:

private int RandomNumber(int min, int max) { Random random = new Random(); return random.Next(min, max); // max is exclusive } private string RandomString(int size) { StringBuilder builder = new StringBuilder(); Random random = new Random(); double thisdouble = random.NextDouble(); char ch; // You should see the ascii table to understand the attribute value for the Convert method for (int i = 0; i < size; i++) { ch = Convert.ToChar(Convert.ToInt32(Math.Floor(74 * random.NextDouble() + 48))); builder.Append(ch); } return builder.ToString(); }

2. Στην default .aspx σελίδα που έχουμε π.χ. το login control, τοποθετούμε ένα textbox και ένα image

<asp:TextBox ID="captchaTextBox" runat="server" Height="22px" Width="97px"></asp:TextBox>

<asp:Image ID="imgSaved" runat="server" ImageUrl="getRandomImage.aspx" AlternateText="Random Image" />

3. Στο .cs αρχείο της default σελίδας, στο Login1_LoggingIn event τοποθετούμε τον εξής κώδικα:

// Get user text string userInput = ((TextBox)((Login)LoginView1.FindControl("Login1")).FindControl ("captchaTextBox")).Text; // Encode user text MD5 md5 = new MD5CryptoServiceProvider(); byte[] pass = Encoding.UTF8.GetBytes(userInput); string userInputVal = Encoding.UTF8.GetString(md5.ComputeHash(pass)); // Retrieve the cipher Captcha text from the session variable named "captchavalue" string captchaVal = Session["captchavalue"].ToString(); // Compare the two strings if (String.Compare(captchaVal,userInputVal) != 0) e.Cancel = true; // Stop the LoggingIn action

JavaScript with ASP .NET

2010-01-17T10:07:00Z

Η χρήση κώδικα JavaScript σε μια σελίδα ASP .NET δεν είναι και τόσο εύκολη υπόθεση σε μερικές περιπτώσεις. Θα προσπαθήσω να καταγράψω τις λύσεις σε βασικά προβλήματα που συναντά κάποιος όταν ασχοληθεί με το συγκεκριμένο θέμα.

Include ενός JavaScript αρχείου σε MasterPage

Το Πρόβλημα: Έστω ότι έχουμε αυτή την δομή αρχείων και καταλόγων στο project μας:

Στο αρχείο myscript.js έχουμε μια συνάρτηση που θέλουμε να την καλούμε από τις σελίδες MasterPage.master, Default.aspx και users.aspx. Στο MasterPage λοιπόν κάνουμε include με τον συνήθη τρόπο το JavaScript αρχείο:

Η κλήση της συνάρτησης στο myscript.js από το MasterPage.master και Default.aspx γίνεται επιτυχώς αλλά από το users.aspx αποτυγχάνει. Ο λόγος που συμβαίνει αυτό είναι γιατί το myscript.js (για την σελίδα users.aspx) δεν βρίσκεται πλέον στον κατάλογο scripts/myscript.js αλλά στον ../scripts/myscript.js. Άρα καταλήγουμε στο συμπέρασμα ότι το πρόβλημα βρίσκεται στο path του .js αρχείου και της αδυναμίας να ορίσουμε τον αρχικό κατάλογο σε JavaScript.

Λύσεις:

Το src να είναι url address στα .js αρχεία που έχουμε ανεβάσει σε κάποιο server. π.χ. <script src="http://studentguru.gr/blogs/xinarisc/scripts/myscript.js" type="text/javascript"></script>
Χρήση του HtmlGenericControl (Δημιουργία server-side control που κάνει mapping σε ένα στοιχείο HTML όπως το <head>:

Χρήση του LiteralControl (Thanks to djsolid's feedback)

protected void Page_Load(object sender, EventArgs e) { this.Page.Header.Controls.Add(new LiteralControl("<script src=" + ResolveUrl("~/scripts/myscript.js") + _" type='text/javascript'></script>")); }

protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterClientScriptInclude("MyScript","~/scripts/myscript.js") }

Κλήση ή ενσωμάτωση μιας JavaScript συνάρτησης από server-side κώδικα

Οι δύο κύριες μέθοδοι που χρησιμοποιήσουμε για να το πετύχουμε αυτό είναι η RegisterStartupScript και η RegisterClientScriptBlock.

Για παράδειγμα θέλουμε να ενσωματώσουμε την συνάρτηση AlertHello() στην σελίδα μας:

protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterStartupScript("MyScript", "<script language=javascript>" & "function _AlertHello() { alert('Hello ASP.NET'); }</script>") }

Ή έχουμε ήδη δηλωμένη την συνάρτηση στην .aspx σελίδα μας

και θέλουμε να την καλέσουμε:

ClientScriptManager csm = Page.ClientScript; System.Text.StringBuilder sb = new System.Text.StringBuilder(); if (User.Identity.IsAuthenticated == false) { sb.Append(@"<script language='javascript'>"); sb.Append(@"switchMenu('hide');"); sb.Append(@"<"); sb.Append(@"/script>"); } if (!csm.IsStartupScriptRegistered("LeftPanScript")) { csm.RegisterStartupScript(this.GetType(), "LeftPanScript", sb.ToString()); }

Τελικά η κύρια διαφορά μεταξύ των RegisterStartupScript και η RegisterClientScriptBlock είναι ότι το πρώτο ενσωματώνει τον κώδικα JavaScript στο τέλος της ASP .NET σελίδας ακριβώς πρίν το closing tag </form>, ενώ το δεύτερο ενσωματώνει τον κώδικα JavaScript στην αρχή της ASP .NET σελίδας, αρκιβώς μετά το opening tag <form>.

Η ανάθεση της κλήσης μιας JavaScript συνάρτησης από ένα asp .net control π.χ. ενός button on Page_Load:

cancelRenameButton.Attributes.Add("onclick", "BLOCKED SCRIPTreturn HideRenameCategoryDiv()");

ή αν το control βρίσκεται μέσα σε ένα άλλο control:

((Button)LoginView1.FindControl("cancelRenameButton")).Attributes.Add("onclick", "BLOCKED SCRIPTreturn HideRenameCategoryDiv()");

ή από το onClientClick του control.

<asp:Button ID="btnContent" runat="server" Text="Button" OnClientClick="HideRenameCategoryDiv();" />

ή κατευθείαν στα controls της html βάζοντας runat="server" για να γίνουν server-side controls (Thanks to solidus's feedback)

Κλήση μιας JavaScript συνάρτησης σε ASP.NET AJAX enabled σελίδα από server-side κώδικα

Αν προσπαθήσουμε να κάνουμε register ένα script με τις προηγούμενες μεθόδους από συνάρτηση που χρησιμοποιείται από update panel δεν θα λειτουργήσει. Σε αυτή την περίπτωση πρέπει να χρησιμοποιήσουμε το ScriptManager για να κάνουμε register ένα script.

ClientScriptManager csm = Page.ClientScript; System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append(@"openChatConversationWindow(" + chat.reqId + ");"); ScriptManager.RegisterStartupScript(ChatUpdatePanel, ChatUpdatePanel.GetType(), _Guid.NewGuid().ToString(), sb.ToString(), true);

Instant Messaging (Chat) without page refresh in ASP .net

2010-01-12T15:51:00Z

Σε συνέχεια του προηγούμενου post για τους online users, επεκτείνω τον κώδικα για να δείξω πώς μπορούμε να υλοποιήσουμε ένα αρκετά απλό (server side) chat engine.

Στο υλικό που βρήκα ψάχνοντας στο διαδίκτυο αναφέρονται αρκετοί τρόποι και παραδείγματα για την υλοποίηση ενός chat σε ASP .NET. Όμως, τα περισσότερα από αυτά είναι πολύπλοκα και χρονοβόρα στην μελέτη τους. Ένας απλός τρόπος, ο οποίος δεν απαιτεί refresh/reload της σελίδας και όλα φαίνονται καλά στα μάτια του χρήστη (με το μειονέκτημα των συχνών επερωτήσεων στην βάση δεδομένων) εξηγείται πιο κάτω.

Το παράδειγμα αφορά ένα chatroom και μπορεί εύκολα να επεκταθεί για πολλαπλά chatrooms ή για private chatting μεταξύ δύο χρηστών.

ONLINE DEMO: εδώ (Δοκιμάστε με δύο διαφορετικούς browser ταυτόχρονα για να γίνει ένα υποτιπώδες chat)

1. Δημιουργούμε τον ακόλουθο πίνακα στην βάση μας:

2. Δημιουργούμε μια νέα .aspx σελίδα και σε αυτή τοποθετούμε τα ακόλουθα:

Ένα textbox στο οποίο θα γράφει ο χρήστης το μήνυμα του (newMessageTextBox) και ένα button για την αποστολή του μηνύματος (sendButton)
Ένα <asp:BoundField /> το οποίο βρίσκεται μέσα σε ένα GridView (messagesGridView), στο οποίο θα κάνουμε bind τα μηνύματα
Ένα listbox στο οποίο θα εμφανίζονται οι online users (usersInChatListBox)
Ένα timer που ορίζουμε εμείς όσο θέλουμε το interval (ChatTextTimer) π.χ. κάθε 1 δευτερόλεπτο

Τοποθετούμε το messagesGridView και το usersInChatListBox μέσα σε Update Panels για να πετύχουμε την ανανέωση των δεδομένων χωρίς να γίνεται refresh/reload η σελίδα και βάζουμε triggers στα πιο πάνω controls. Δηλαδή εμείς θέλουμε κάθε φορά που πατά ο χρήστης το sendButton να εισάγονται τα δεδομένα στην βάση και να εμφανίζονται στο messagesGridView και σε κάθε interval του ChatTextTimer να ανανεώνονται τα μηνύματα στο messagesGridView και οι online users στο usersInChatListBox. Για να γίνουν αυτά λίγο πιο κατανοητά:

<asp:UpdatePanel ID="ChatUpdatePanel" runat="server" UpdateMode="Always"> <ContentTemplate> <div id="ChatText" style="width: 100%; height: 100%; overflow: auto; text-align: left"> <asp:GridView ID="messagesGridView" runat="server" Width="100%" AutoGenerateColumns="False"> <Columns> <asp:BoundField Visible="False" DataField="sender" /> <asp:TemplateField> <ItemTemplate> <asp:Label ID="msgContentLabel" runat="server" Text='<%#Eval("msgContent")%>' Font-Names="calibri" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField Visible="false" DataField="isTitle" /> </Columns> </asp:GridView> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" /> <asp:AsyncPostBackTrigger ControlID="SendButton" EventName="Click" /> </Triggers> </asp:UpdatePanel> <asp:Timer runat="server" ID="ChatTextTimer" Interval="1000" /> Online Users: <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:ListBox ID="usersInChatListBox" runat="server" Width="100%" CssClass="usersinchatstyle" Height="115px"> </asp:ListBox> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ChatTextTimer" EventName="Tick" /> </Triggers> </asp:UpdatePanel>

To online demo είναι μια παραλλαγή του source code ούτως ώστε να λειτουργεί και για μή εγγεγραμένους χρήστες στο site.

Who is online? (ASP .NET)

2009-12-29T17:20:00Z

Υπάρχει κάποιος μηχανισμός από τον Membership ή Profile Provider σε ένα ASP.net site για να βλέπουμε τους ενεργούς χρήστες (online users);

Το μόνο που μας παρέχεται είναι η ημερομηνία και ώρα για το τελευταίο login του χρήστη από το field LastLoginDate από τον πίνακα aspnet_Membership και το field LastActivityDate από τον πίνακα aspnet_Users. Αυτό δεν μας βοηθά ιδιαίτερα στο να καταλάβουμε αν ο χρήστης πραγματικά βρίσκεται online ή όχι γιατί όπως θα διαπιστώσετε το field LastActivityDate δεν ενημερώνεται στα χρονικά διαστήματα που αναμένουμε. Μάλιστα υπάρχει ένα stored procedure στο ASP.NET Schema με όνομα aspnet_Membership_GetNumberOfUsersOnline που επιστρέφει πόσοι χρήστες είναι συνδεδεμένοι (online), παίρνοντας σαν όρισμα τον χρόνο που θέλουμε να προσθέσει στο LastActivityDate για να το συγκρίνει με το DateTime την συγκεκριμένη στιγμή.

Μια μέθοδος για να πετύχουμε πιο αξιόπιστα αποτελέσματα (χωρίς αυτό να είναι απόλυτο), περιγράφεται παρακάτω. Μία σκέψη είναι όταν ο χρήστης κάνει login, να τον αποθηκεύουμε σε μια λίστα για να ξέρουμε ότι είναι online και όταν κάνει logout να τον αφαιρούμε. Έτσι, δημιουργούμε ένα νέο class αρχείο (Δεξί κλίκ στο project > Add New Item > Class).

Σε αυτό το αρχείο (είτε σε καινούργιο) δημιουργούμε μια κλάση που θα περιέχει τα στοιχεία για κάθε χρήστη που θέλουμε να κρατήσουμε.

public class StateCollection { private string _sessionId; private string _username; private string _userid; public string SessionID { get { return _sessionId; } set { _sessionId = value; } } public string Username { get { return _username; } set { _username = value; } } public string UserId { get { return _userid; } set { _userid = value; } } }

Επίσης δηλώνουμε το ArrayList στο οποίο θα κρατάμε τα objects των χρηστών.

public static ArrayList States = new ArrayList();

Στην συνέχεια δημιουργούμε και τις μεθόδους που θα μας βοηθήσουν στην εισαγωγή, αφαίρεση και την αναζήτηση των χρηστών.

Στην .aspx σελίδα μας εισάγουμε ένα login control και αλλάζουμε το LoggedIn event:

protected void Login1_LoggedIn(object sender, EventArgs e) { string userUniqueId = "-1"; userUniqueId = Membership.GetUser(User.Identity.Name).ProviderUserKey.ToString(); SessionTrack.Add(new StateCollection() { SessionID = Session.SessionID, Username = HttpContext.Current.User.Identity.Name, UserId = userUniqueId }); }

Τοποθετούμε και ένα control LoginStatus και αλλάζουμε το LoggingOut event:

protected void LoginStatus1_LoggingOut(object sender, LoginCancelEventArgs e) { string userUniqueId = "-1"; userUniqueId = Membership.GetUser(HttpContext.Current.User.Identity.Name).ProviderUserKey.ToString(); SessionTrack.Remove(new StateCollection() { UserId = userUniqueId }); }

Αυτό φυσικά, δουλεύει μια χαρά στην περίπτωση login του χρήστη. Όμως ο χρήστης υπάρχει πιθανότητα να μην πατήσει logout και απλά να κλείσει τον browser. Σαν αποτέλεσμα ο χρήστης δεν αφαιρείται από την λίστα και παραμένει λανθασμένα σε αυτή. Αυτό μπορεί εν μέρει να ληθεί με την αφαίρεση του χρήστη από την λίστα όταν λήξει το Session του. Για να το πετύχουμε αυτό:

Προσθέτουμε στο αρχείο της κλάσης μας τις μεθόδους για αφαίρεση και αναζήτηση μέσω του Session.

public static void RemoveFromSession(StateCollection state) { int StateIndex = IndexFromSession(state); if (StateIndex >= 0) { States.RemoveAt(StateIndex); } } private static int IndexFromSession(StateCollection state) { for (int j = 0; j < States.Count; j++) if (((StateCollection)States[j]).SessionID == state.SessionID) return j; return -1; }

Στην συνέχεια δημιουργούμε ένα Global.asax αρχείο.(Δεξί κλίκ στο project μας > Add New Item > Global Application Class).

void Session_End(object sender, EventArgs e) { SessionTrack.RemoveFromSession(new StateCollection() { SessionID = Session.SessionID }); }

Τέλος για να δούμε τους ενεργούς χρήστες σε ένα Gridview:

Tip: Για να ορίσουμε το χρόνο με τον οποίο λήγει ένα session, στο web.config αρχείο αλλάζουμε το forms timeout:

<system.web>
<authentication mode="Forms">
<forms timeout="10"/> // σε λεπτά

</authentication>
</system.web>

Multisite Translator (c#, windows forms)

2009-12-14T16:03:00Z

Το “Multisite Translator” είναι μια παραθυρική εφαρμογή, η οποία χρησιμοποιεί δημοφιλή διαδικτυακά translators engines για την μετάφραση κειμένων.

Χαρακτηριστικά:

Στην παρόν έκδοση, υπάρχουν τρία engines.

Google Translate: αναγνώριση γλώσσας (Detect language), λειτουργία «listen» λέξεων, λεξικό.
Bing Translator (or Microsoft Translator): αναγνώριση γλώσσας (Auto-Detect).
Yahoo Babelfish

Λειτουργία αυτόματης ενημέρωσης των διαθέσιμων γλωσσών στα engines. Δηλαδή αν κάποια από τις εταιρίες προσθέσει ή αφαιρέσει γλώσσες, το πρόγραμμα ενημερώνεται κατάλληλα.
Εισαγωγή κειμένου και αποθήκευση αποτελεσμάτων σε text αρχεία. (thanks to Vangos Pterneas's Document Manager)
Ο χρήστης μπορεί να κάνει update την εφαρμογή σε νεότερη έκδοση χωρίς να χρειάζεται να κατεβάσει και να τρέξει μόνος του το setup.

Μάθετε από τον κώδικα:

Χρήση του XmlSerializer για να κάνουμε Serialize και Deserialize αντικείμενα προς και από έγγραφα XML.
HTTP Get, HTTP Post. Πώς κάνουμε extract το Viewstate, Event Validation ή άλλων στοιχείων από websites.
Χρήση Application Settings: Δημιουργία και πρόσβαση σε τιμές που διατηρούνται μεταξύ των εκτελέσων της εφαρμογής.
Πώς βάζουμε το application στο System Tray.
Απλή χρήση του Clipboard (Cut-Copy-Paste).
Απλό XML Parsing.
“Smart Update” με threads και delegates:

Έλεγχος για updates.
Αυτόματο κατέβασμα του νέου version με εμφάνιση progress bar και ποσοστού που κατέβηκε.
Κλείσιμο προγράμματος και εκκίνηση εγκατάστασης.

Screenshot:

Downloads:

Για οποιοδήποτε bug παρατηρήσετε παρακαλώ επικοινωνήστε μαζί μου στο xinaris[at]gmail.com

HTTP Get weather data and XML parsing (ASP.NET, C#)

2009-11-25T00:44:00Z

Σε αυτό το πρώτο μου post θα προσπαθήσω να δείξω πως μπορούμε να κάνουμε ένα απλό HTTP GET για να πάρουμε δεδομένα για το καιρό (5 day forecast) από το Yahoo Weather και πως μπορούμε να πάρουμε τα στοιχεία που μας ενδιαφέρουν από το XML Response και τέλος να τα παρουσιάσουμε με ένα ωραίο UI (σε asp.net website) στον χρήστη. Καθώς πρόκειται για αρκετό κώδικα δεν θα αναφέρω πολλά στο post αλλά στο τέλος του post δίνω link για το ολοκληρωμένο project.

Καταρχήν γιατί να πάρουμε τα δεδομένα από το Yahoo; Γιατί το response είναι σε xml και μπορούμε αρκετά εύκολα να πάρουμε τα δεδομένα που μας χρειάζονται.Πως βρήκαμε το HTTP Get request για το Yahoo Weather; Κατεβάζουμε το Yahoo Widgets και συγκεκριμένα το widget Yahoo! Weather. Με ένα tool για Windows όπως το Fiddler μπορούμε να δούμε τα requests και responses που πραγματοποιούνται από και προς το pc μας.

Για αναζήτηση πόλης θα δούμε ότι πρέπει να αναπαράγουμε το ίδιο request από το πρόγραμμά μας:

Μας επιστρέφεται ένα xml stream από το οποίο θα πάρουμε τις πόλεις από τα αποτελέσματα της αναζήτησης:

Αντίστοιχα, για να πάρουμε τα δεδομένα για τον καιρό πρέπει να αναπαράγουμε το ίδιο request:

Μας επιστρέφεται ένα xml stream, το οποίο πρέπει να μελετήσουμε για να πάρουμε τα δεδομένα που μας ενδιαφέρουν:

Δημιουργούμε ένα νέο ASP.NET project, και ένα αρχείο class (.cs). Στο αρχείο αυτό βάζουμε όλες τις συναρτήσεις για την αναζήτηση πόλης και το διάβασμα των responses από τα requests.

Στις συναρτήσεις resolvePlace() και getWeather(string result) πραγματοποιούμε τα δύο HTTP GET requests που χρειαζόμαστε. Η συνάρτηση getWeatherIcon() επιστρέφει τα urls σε icons βάση της μελέτης που κάναμε στο xml response.

Στην συνέχεια δημιουργούμε ένα νέο Web User Control και τοποθετούμε τα διάφορα controls, όπως φαίνεται πιο κάτω (Στο project έχω χρησιμοποιήσει το Αccordion control από το AjaxControlToolkit):

Δεν θα αναφέρω την ακριβή ανάλυση της λογικής του parsing του xml. Αυτό μπορείτε να το κάνετε οι ίδιοι με υπομονή καθώς είναι αρκετά μεγάλο και με πολλά διαφορετικά δεδομένα.

Τέλος, δημιουργούμε μια .aspx σελίδα και με ένα drag n drop του Web User Control (.ascx) έχουμε το τελικό αποτέλεσμα.

Τελικό Project: YahooWeatherPlugin.zip