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

Posted in ASP.Net, JQueryTagged , 6 Comments

6 responses to “How to open jQuery UI Dialog from codebehind”

  2. hey i tried it the same way but it doesnt show me my code?
    i replace open jquery dilog code to some show and hide code but this doesnt fire it!

    Reply

  4. Hi,

    I have tried this code and it is working perfectly only one issue i am facing when a pop up is open user can still work on the background page.Can you please add the code for disabled the background also.

    Reply

Leave a Reply