Script Object Model and Dialog

 Script Object Model and Dialog

 Expected Out Put.
make sure 'you have to create 'Projects' list before execute this code.

//VisualWebPart1.webpart
<?xml version="1.0" encoding="utf-8"?>
<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="ScriptOMandDialog.VisualWebPart1.VisualWebPart1, $SharePoint.Project.AssemblyFullName$" />
      <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Title" type="string">Script OM and Dialog</property>
        <property name="Description" type="string">Script OM and Dialog description</property>
      </properties>
    </data>
  </webPart>
</webParts>
-----------------------------------------------------------
//VisualWebPart1UserControl
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs"
    Inherits="ScriptOMandDialog.VisualWebPart1.VisualWebPart1UserControl" %>
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="sp.js" Localizable="false"
    LoadAfterUI="true" />
<script language="ecmascript" type="text/ecmascript">
    var ProjectListName = "Projects";
    var ProjectNameField = "Title";
    var projectsList;
    var context;
    var context;
    var web;
    var modalDialog;
    var projectListItem;
    var copyOfAddProjectForm;
    _spBodyOnLoadFunctionNames.push("Initialize()");
    function Initialize() {
        alert("Initialize");
        context = SP.ClientContext.get_current();
        web = context.get_web();
        projectsList = web.get_lists().getByTitle(ProjectListName);
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><Query/></View>');

        projects = projectsList.getItems(camlQuery);
        context.load(projects, 'Include(Title)');
        context.executeQueryAsync(onListsLoaded, OnError);
    }
    function onListsLoaded() {
        alert("onListsLoaded");
        var projectTable = document.getElementById('tblProjectList');
        while (projectTable.rows.length > 0)
            projectTable.deleteRow(projectTable.rows.length - 1);
        var content;
        var cell;
        var tbo = document.createElement('tbody');
        var listItemEnumerator = projects.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var newTR = document.createElement('tr');
            var projectLI = listItemEnumerator.get_current();
            var projectName = projectLI.get_item(ProjectNameField);
            cell = document.createElement('td');
            content = document.createTextNode(projectName);
            cell.appendChild(content);
            newTR.appendChild(cell);
            cell = document.createElement('td');
            content = document.createTextNode(projectDesc);
            cell.appendChild(content);
            newTR.appendChild(cell);
            tbo.appendChild(newTR);
        }
        projectTable.appendChild(tbo);
    }
    function onProjectAdded() {
        alert("Item Successfully Added");
        HideAddProject();
    }
    function ShowAddProject() {
        alert("ShowAddProject");
        var divAddProject = document.getElementById('divAddProject');
        copyOfAddProjectForm = divAddProject.cloneNode(true);
        divAddProject.style.display = "block";
        var options = { html: divAddProject, width: 200, height: 350, dialogReturnValueCallback: ReAddClonedForm };
        modalDialog = SP.UI.ModalDialog.showModalDialog(options);
    }
    function HideAddProject() {
        alert("HideAddProject");
        modalDialog.close();
        Initialize();
    }
    function ReAddClonedForm() {
        document.body.appendChild(copyOfAddProjectForm);
    }
    function AddProject() {
        alert("AddProject");
        var lici1 = new SP.ListItemCreationInformation();
        projectListItem = projectsList.addItem(lici1);
        projectListItem.set_item(ProjectNameField, getTBValue('<%=txtProjectName.ClientID%>'));
        projectListItem.update();
        context.load(projectListItem);
        context.executeQueryAsync(onProjectAdded, OnError);
    }
    function OnError(sender, args) {
        alert("OnError");
        var spnError = document.getElementById("spnError");
        spnError.innerHTML = args.get_message();
    }
    function getTBValue(elID) {
        var el = document.getElementById(elID);
        return el.value;
    }
</script>
<div style="font-weight: bold">
    Project List
</div>
<br />
<table id="tblProjectList" style="border: solid 1px silver">
</table>
<br />
<a href="javascript:ShowAddProject()">Add a project</a>
<br />
<div id="divAddProject" style="display: none; padding: 5px">
    <b>Project Information</b><br />
    <br />
    Title
    <br />
    <asp:TextBox runat="server" ID="txtProjectName"></asp:TextBox><br />
    Description<br />
    <asp:TextBox runat="server" ID="txtDescription"></asp:TextBox><br />
    <span id="spnError" style="color: Red" />
    <br />
    <asp:Button runat="server" ID="btnAddProject" Text="Add New Project" OnClientClick="AddProject()" />
</div>
--------------------------------------------------------------------------------