jQuery Dialog Codebehind

Ashish Patel

How to open jQuery UI Dialog from codebehind

In this blog I will show how to open jQuery UI Dialog from codebehind. Basically what we are going to do is render the neccessary JS code for UI dialog from codebehind and when the page will render, it will show the dialog.

Here is Code:

<%@ Page Language="C#" AutoEventWireup="true"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ashish's Blog</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("$(function() { ");
sb.Append(" $('#dialog').dialog({");
sb.Append("    width: 350");
sb.Append(" });");
sb.Append("});");
Page.ClientScript.RegisterStartupScript(typeof(Page), "myscript", sb.ToString(), true);
}
</script>
</head>
<body>
<form id="form2" runat="server">
<div id="dialog" style="display: none">
Welcome to Ashish's Blog
</div>
<asp:Button ID="Button1" runat="server" Text="Test" OnClick="Button1_Click" />
</form>
</body>
</html>

Thanks