Creating a Widget

Need to use JQuery tmpl plugins and Below code explains very straight forward.

Client side Code : 

<script id="uniquescriptId" type="text/javascript" src="http://<yourdomain>/widgets/embed.aspx?<your feed querystring>"></script>


Server sid code in embed.aspx ?<your feed querystring>:


public partial class embed : System.Web.UI.Page
    {
        private const string divFeedName = "uniquedivid";
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder mainJS = new StringBuilder(string.Empty);

            // Include all the javascript plugins
            mainJS.Append(File.ReadAllText(Server.MapPath("js/jquery-1.4.1.min.js")));
            mainJS.Append(File.ReadAllText(Server.MapPath("js/jquery.tmpl.min.js")));


           // here construct your json object to load.
            string movies = "var movies =[{ Name: \"The Red Violin\", ReleaseYear: \"1998\" },{ Name: \"Eyes Wide Shut\", ReleaseYear: \"1999\" },{ Name: \"The Inheritance\", ReleaseYear: \"1976\" }];";
            mainJS.Append(movies);
            
            mainJS.Append(File.ReadAllText(Server.MapPath("js/embed.js")));

            Response.ContentType = "text/plain";
            Response.Write(mainJS.ToString());
            Response.End();
        }
}

embed.js file code:


var newDiv = document.createElement("div");
newDiv.id = "temperarydiv";
$(newDiv).insertAfter($("#uniquescriptId"));


var tmpl = "<script id=\"movieTemplate\" type=\"text/x-jquery-tmpl\"><li><b>${Name}</b> (${ReleaseYear})</li></script><ul id=\"movieList\"></ul>";

var v = document.getElementById("temperarydiv").innerHTML = tmpl;

$("#movieTemplate").tmpl(movies).appendTo("#movieList");


:) simple...