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.