In this post you can learn how to disable a dropdown list item using jquery.
Here is the HTML Code
Mercedes
Audi
Here is the JQuery code to disable list item in the dropdown using jquery
$(document).ready(function() {
$(“#DropdownListId option[value=’1′]”).attr(“disabled”,”disabled”);
});
The value with the id ‘1’ is disabled
Scott Hunter just announced a new open source project from appendTo called Juice UI. Juice UI is a collection of Web Forms components which make it incredibly easy to leverage jQuery UI widgets in ASP.NET Web Forms applications. You can start using it right away by adding the JuiceUI NuGet package to your app, and you’re welcome to go nuts with the source, which is dual licensed under MIT and GPL.
What Juice UI does
jQuery UI is a library that’s built on top of jQuery. It’s got a lot of great widgets for common scenarios – things like date pickers, dialogs, and tabs – and they’re all built on a really solid widget platform from some of the sharpest Javascript developers in the field. You’ve always been able to make use of these libraries using jQuery and jQuery UI, but the new Juice UI controls make it that much easier.
Juice UI is launching with 14 widgets and behaviors. You can see the whole list of controls at http://juiceui.com/controls, and they’ve all got interactive examples.
Add the JuiceUI NuGet package
I’m going to start with a new ASP.NET 4 Web Forms project. I’ll right click on the References folder, select Manage NuGet Packages…, and search for “juiceui”
Step 1
Enable the shotren url API here
Step 2
Get the API Key
Step 3
Add the following name spaces
using System.Net;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;
Public class GoogleShortnerApi
{
private const string key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx";
public static string Shorten(string url)
{
string post = "{\"longUrl\": \"" + url + "\"}";
string shortUrl = url;
HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://www.googleapis.com/urlshortener/v1/url?key=" + key);
try
{
request.ServicePoint.Expect100Continue = false;
request.Method = "POST";
request.ContentLength = post.Length;
request.ContentType = "application/json";
request.Headers.Add("Cache-Control", "no-cache");
using (Stream requestStream = request.GetRequestStream())
{
byte[] postBuffer = Encoding.ASCII.GetBytes(post);
requestStream.Write(postBuffer, 0, postBuffer.Length);
}
using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
{
using (Stream responseStream = response.GetResponseStream())
{
using (StreamReader responseReader = new StreamReader(responseStream))
{
string json = responseReader.ReadToEnd();
shortUrl = Regex.Match(json, @"""id"": ?""(?.+)""").Groups["id"].Value;
}
}
}
}
return shortUrl;
}
}
The code is also very simple. I didn’t add all the extra options that the API makes available and just wrote enough for me to shorten a URL. Here it is:
public static class BitlyApi
{
private const string apiKey = "[add api key here]";
private const string login = "[add login name here]";
public static BitlyResults ShortenUrl(string longUrl)
{
var url =
string.Format("http://api.bit.ly/shorten?format=xml&version=2.0.1&longUrl={0}&login={1}&apiKey={2}",
HttpUtility.UrlEncode(longUrl), login, apiKey);
var resultXml = XDocument.Load(url);
var x = (from result in resultXml.Descendants("nodeKeyVal")
select new BitlyResults
{
UserHash = result.Element("userHash").Value,
ShortUrl = result.Element("shortUrl").Value
}
);
return x.Single();
}
}
public class BitlyResults
{
public string UserHash { get; set; }
public string ShortUrl { get; set; }
}
The API is pretty well documented at http://code.google.com/p/bitly-api/wiki/ApiDocumentation
This post explains how to display notification messages like twitter in asp.net at the top of the page.
Step 1
Download the JQuery plugin from http://sizzlejs.com/
Step 2
Include the following in header section
<script src="Scripts/Notification.js" type="text/javascript"></script>
<style type="text/css">
.divFaliure
{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 32768;
background-color: #efefef;
font-size: 18px;
color: #000;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding: 20px 0px;
border-bottom: 1px solid #bbb;
cursor: pointer;
color: #f00;
background-color: #fdd;
}
.divsuccess
{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 32768;
background-color: #efefef;
font-size: 18px;
color: #000;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding: 20px 0px;
border-bottom: 1px solid #bbb;
cursor: pointer;
color: #060;
background-color: #BBFFB6;
}
</style>
Step 3
Place the button control in the form
<div id="divMessage" runat="server" visible="false">
Message Here
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></div>
Code Behind Code:
divMessage.Visible = true;
StringBuilder strScript = new StringBuilder();
strScript.Append("$(document).ready(function(){");
strScript.Append("setTimeout(function(){");
strScript.Append("$(\"div.divsuccess\").fadeOut(\"slow\", function () {");
strScript.Append("$(\"div.divsuccess\").remove();");
strScript.Append("});");
strScript.Append("}, 2000)");
strScript.Append("});");
Page.ClientScript.RegisterStartupScript(this.GetType(), "Script", strScript.ToString(), true);
Output
Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!
Venkatbaggu's Blog 