Saturday, January 29, 2011

How to use jquery dialog in asp.net


In this post I am going to show you how to use jquery model dialog in asp.net.
Note:Please make sure that you have downloaded the jquery and jqueyui   library. 

Photobucket

  • Start visual studio
  • Select File/New Project
  • Choose a Web Site Template -for this example I used Empty Web Site 
  • Right click on empty web site and add new class named Person.cs and paste following code




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class Person
{
    public string Name { get; set; }
    public string Email { get; set; }

    public static List<Person> GetAll()
    {
        List<Person> list = new List<Person>()
            {
                new Person{Name="John",Email="john@doe.com"},
                new Person{Name="Admin",Email="admin@doe.com"},
            };
        HttpContext.Current.Session["Add"] = list; 
        return list;
    }
}

  • Right click on empty website and add new item (Ajax Enabled WCF Service) and modified the code of Service.cs as below

Service.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Web;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
    [WebGet(UriTemplate = "Insert/?name={name}&email={email}", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
    [OperationContract]
    public string InsertPerson(string name, string email)
    {
        string data = string.Empty;
        List<Person> list = null;
        if (HttpContext.Current.Session["Add"] == null)
        {
            list = Person.GetAll();

        }
        else
        {
            list = (List<Person>)HttpContext.Current.Session["Add"];
            if (!string.IsNullOrEmpty(name) || !string.IsNullOrEmpty(email))
            {
                list.Add(new Person { Name = name, Email = email });
                HttpContext.Current.Session["Add"] = list;
                data = "<tr><td>" + name + "</td> <td>" + email + "</td></tr>";

            }
            else
            {
                data = "Failure";
            }
         
        }

        return data;
    }
}


  • Right click on Website and add new item named Default.aspx and add following code 


<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs"
    Inherits="_Default" %>

<!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></title>
    <style>
        body
        {
            font-size: 80%;
        }
        label, input
        {
            display: block;
        }
        input.text
        {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }
        fieldset
        {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }
        h1
        {
            font-size: 1.2em;
            margin: .6em 0;
        }
        div#users-contain
        {
            width: 350px;
            margin: 20px 0;
        }
        div#users-contain table
        {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }
        div#users-contain table td, div#users-contain table th
        {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }
        .ui-dialog .ui-state-error
        {
            padding: .3em;
        }
        .validateTips
        {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
    <link href="Style/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#editPerson').dialog({
                autoOpen: false,
                model: true,
                draggable: true, title: "Add Person",
                buttons: {
                    "Create an account": function () {
                        var name = $("#name").val();
                        var email = $("#email").val();
                        $.getJSON("Service.svc/Insert", { name: name, email: email }, function (data) {
                            $('#grdPerson tbody tr:last').after(data);
                            $("#editPerson").dialog("close");
                        });
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }
            });
        });
        //Show Dialog function
        function showDialog(id) {
            $('#' + id).dialog("open");
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center">
        <asp:GridView ID="grdPerson" runat="server" AutoGenerateColumns="false" Width="400">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="Email" HeaderText="Email" />
            </Columns>
        </asp:GridView>
        <div id="editPerson" title="Create new user">
            <fieldset>
                <label for="name">
                    Name</label>
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                <label for="email">
                    Email</label>
                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </div>
        <input type="button" id="btnAdd" runat="server" value="Add New Person" onclick="showDialog('editPerson');" />
    </div>
    </form>
</body>
</html>

2 comments :