Build a Selected Text Favorites Utility for your Web Site

Build a "selected text" Favorites page to store interesting web pages

You have probably seen applications like “EverNote” and others that let you select some text on a web page of interest, choose a Favorite or Bookmark from your preferred browser, execute it, and have the page, title, url and the selected text stored in your “account” for later viewing.

You can easily build such an application for yourself to use as you wish for your ASP.NET web site or Blog. The key is the javascript that grabs the current url, the title of the page, and any text that you have selected. and then sends this on the querystring to your “capture” page.

To make this dynamic, cross-browser, and automatically adjust for the location of your website, the script would look like this:

<a href="javascript:function getSel(){return (!!document.getSelection) ? document.getSelection():(!!window.getSelection)?window.getSelection():document.selection.createRange().text;} window.location.href='<%=Request.Url %>?url='+encodeURIComponent(window.location.href)+'&text='+ getSel()+'&title='+document.title;" ><font size="2">
Grab it!</font></a>

Note that there is an inline ASP.NET server-side script tag, <%=Request.Url %> that enables this.

In order to create a page that will automatically “grab” this posted information from any page and store it in a SQL Server database table, we need to have a couple of simple component parts.

First, we need a database table “FAVS” and a simple stored procedure to perform the inserts. I won’t show this here as you can get the SQL from the downloadable sample solution below.

Next, we need to create the page that would receive the requests and handle the insert. In this sample, I”ve combined everything into a single page. Here’s the relevant markup:

<form id="form1" runat="server">
<div>
<div align="center">Add this favorite to your bookmarks or favorites to use:</div>
<div align="center"><a href="javascript:function getSel(){return (!!document.getSelection) ? document.getSelection():(!!window.getSelection)?window.getSelection():document.selection.createRange().text;} window.location.href='<%=Request.Url %>?url='+encodeURIComponent(window.location.href)+'&text='+ getSel()+'&title='+document.title;" ><font size="2">
Grab it!</font></a></div>
<asp:Label ID="LabelUrl" runat="server" Text="URL:"></asp:Label>
<br />
<asp:Label ID="LabelTitle" runat="server" Text="TITLE:"></asp:Label>
<br />
<asp:Label ID="LabelBodyText" runat="server" Text="BodyText:"></asp:Label>
<br />
<asp:Label ID="LabelResult" runat="server" Text=""></asp:Label>
<hr />
<asp:DataList ID="DataList1" runat="server" BackColor="LightGoldenrodYellow"
BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black"
Width="1093px">
<FooterStyle BackColor="Tan" />
<ItemTemplate >
<p>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl=<%# Eval("Url") %> ><%# Eval("Title") %></asp:HyperLink>
<div ID="label1" runat="server"><%#Eval("BodyText") %>></div>
</p>
</ItemTemplate>
<AlternatingItemStyle BackColor="PaleGoldenrod" Font-Bold="False"
Font-Italic="False" Font-Names="Verdana" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Left" />
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Names="Verdana"
Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
HorizontalAlign="Left" />
<SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
</asp:DataList>
</div>
</form>

Now, in the codebehind class:

public partial class _Default : System.Web.UI.Page
{
private string connString = ConfigurationManager.ConnectionStrings["FAVS"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
string title = Request["title"];
string url = Request["url"];
string description = Request["text"];
this.LabelUrl.Text = this.LabelUrl.Text +" "+ url;
this.LabelTitle.Text = this.LabelTitle.Text +" "+ title;
this.LabelBodyText.Text = this.LabelBodyText.Text +" "+ description;
object[] parms = {url, title, description, DateTime.Now};
try
{
int retval = SqlHelper.ExecuteNonQuery(connString, "dbo.InsertFavorite", parms);
if (retval == 1)
{
LabelResult.Text = "Favorite " + title + " inserted!";
}
else
{
LabelResult.Text = "Favorite " + title + " already in database.";
}
}
catch(SqlException ex)
{
LabelResult.Text = ex.Message;
}

string sql = "Select * from FAVS";
DataSet ds = SqlHelper.ExecuteDataset(connString, CommandType.Text, sql);
DataTable dt = ds.Tables[0];
this.DataList1.DataSource = dt;
DataList1.DataBind();
}
}

Note above that I am using the trusty old SqlHelper V2 class that makes doing any kind of ADO.NET Sql work just about as simple as it can be. This class  is in the sample solution. I see lots of people writing an awful lot of code to execute a stored procedure, but the SqlHelper class is not only super easy to use, it even caches your SqlParameters for you - speeding up data access even more. All you need to do is create an object array containing the parameter values, specify the name of the stored procedure and the connection string, and you are done.

In the same page, I’m providing the user with the javascript favorite that they can add to their bookmarks, the display of the results of a request to the page, and a simple DataList that displays all the current results with links to the saved urls.

The sample SQL Script also creates a few entries that I put in while I was testing this out.

This is not a “complete solution”, but iIt is designed to give you the very basics of how to make this work. To be really useful, you would want to add search capability and a paged display (since I would expect you’ll end up with lots of cool entries).

You can also make this multi-user by checking for a logged in user and adding a UserID to the FAVS database table. Then in your select statement, you would get the UserId using your favorite Membership provider, and restrict any searches to that UserID.

To make this sample work, you need to do the following:

1) Create a new SQL Server / SQLEXPRESS database “FAVORITES”, and execute the provided SQL script “Favorites.Sql” against it. This will create the FAVS table and add a stored proc that performs the inserts, preventing duplicate urls.

2) Correct the connection string in the web.config to match your environment.

3) Execute the application and add the “Grab it” link / favorite to your browser’s Favorites or bookmarks.

4) With the application running, browse to the web site of your choice, select some relevant text on the page, and choose your “Grab It!” favorite from your browsers’s bookmarks and execute it. The default.aspx page will come up showing the results of your insert, along with a display of the current list of items you have entered:



You can download the sample working solution here.

By Peter Bromberg   Popularity  (3331 Views)