CRUD with AngularJS and ASP.Net Web API

It's really fun to learn something new and the more fun is in sharing it with people.
So here I am gonna explain you "How to perform CRUD with AngularJS using Asp.net Web API". AngularJS become such a hot client side technology in today's web world and believe me it's going to rule the web application development.
Before I start let's know a bit about basic of AngularJS.

What is AngularJS
AngularJS is a library written in JavaScript. It's an open-source web application framework developed and maintained by Google It helps to create single-page applications(SPA) that only requires HTML, CSS and Javascript on client side.
Do not compare it with JQuery, It uses a subset of JQuery to perform some task. So whenever you want/need to install AngularJS for your project then Install/include JQuery library first and then AngularJS.
To know more about AngularJS: https://docs.angularjs.org/guide/introduction

AngularJS extends HTML with ng-directive and the basic directives are:

• ng-app: defines an AngularJS application.
• ng-model: binds the value of HTML controls (input, select, textarea) to application data.
• ng-bind: binds application data to the HTML view.
• ng-controller: defines the application controller.

Apart from these basics directive I am going to use some concepts of AngularJS like Module, Service, Expressions etc. I would suggest if you have patience then better to spend some time here: http://www.w3schools.com/angular/

Hope by now you have learned about basics of AngularJS. So let's start with CRUD operation example.
where to start?????  Ok let's start with building Web API first which basically will perform CRUD with database. For the example purpose I have not used any database here but your Web Api will be the one which is going to interact with your database.
In short, ASP.NET Web API is a framework for building web APIs on top of the .NET Framework over http protocol. To know more about ASP.NET Web API refer this: http://www.asp.net/web-api.

To Create a ASP.NET Web API using Visual Studio 2013, create a new project => Web => ASP.NET Web Application and then select the template Web API.
(I assume, you are very much familier with visual studio tool and MVC framework and that's why I am not including any screenshot here for this.)


Once you create the project, Let's add a model class "Book.cs" under Model folder.

public class Book
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Author { get; set; }
        public decimal Price { get; set; }
    }

Then add a APIController with empty template for this, by right clicking of 'Controller' folder and name it "BookAPIController".

public class BookAPIController : ApiController
    {
        private static IList<Book> books = new List<Book>()
        {
            new Book{Id = "A01", Name = "Once upon a time", Author = "G D Roy", Price = 150.00M},
            new Book{Id = "A02", Name = "The Last Hero", Author = "K P Say", Price = 150.00M},
            new Book{Id = "A03", Name = "The King of Kingdom", Author = "Albert D", Price = 150.00M},
            new Book{Id = "A04", Name = "Jungle King", Author = "D Serduke", Price = 150.00M},
            new Book{Id = "A05", Name = "Magical Box", Author = "M Mathews", Price = 150.00M}
        };

        // GET: api/BookAPI
        public IEnumerable<Book> GetBooks()
        {
            return books;
        }

        // GET: api/BookAPI/5
        public Book GetBook(string id)
        {
            return books.FirstOrDefault<Book>(book => book.Id == id);
        }

        // POST: api/BookAPI
        public HttpResponseMessage PostBook(Book book)
        {
            books.Add(book);
            return Request.CreateResponse(HttpStatusCode.OK);
        }

        // PUT: api/BookAPI/5
        public HttpResponseMessage PutBook(Book book)
        {
            if(books.Any<Book>(bk => bk.Id == book.Id))
            {
                try
                {
                    Book currentBook = books.First<Book>(bk => bk.Id == book.Id);
                    int index = books.IndexOf(currentBook);
                    books[index] = book;
                    return Request.CreateResponse(HttpStatusCode.OK);
                }
                catch(Exception ex)
                {
                    throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));  
                }
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
        }

        // DELETE: api/BookAPI/5
        public HttpResponseMessage DeleteBook(string id)
        {
            if (books.Any<Book>(bk => bk.Id == id))
            {
                try
                {
                    Book currentBook = books.First<Book>(bk => bk.Id == id);
                    int index = books.IndexOf(currentBook);
                    if(books.Remove(currentBook))
                        return Request.CreateResponse(HttpStatusCode.OK);
                    else
                        return Request.CreateResponse(HttpStatusCode.InternalServerError);
                }
                catch (Exception ex)
                {
                    throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
                }
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
        }
    }

In above code, each and every method tells about himself.
Note: WEB API works on Get, Post, Put and Delete http methods.
So our Web API is ready and can be consumed by client.

Now we will actually talk about AngularJS framework to do the CRUD operation without any postback. Here we go:
 Let's add below mentioned three javascript file under 'Script' folder by creating a sub folder 'BookngScripts'. This sub folder is optional but it become necessary to separate out your files with other jquery and angular js files.

1. BookngService.Js: This is AngularJS service which will basically consume the ASP.NET Web API and works as a middle layer between AngularJS controller and ASP.NET Web API.
2. BookngModule.Js: It's a container for the different parts of an application. All application controller should belong to a module.
3. BookngController.js: Controller is a JavaScript Object, created by a standard JavaScript object constructor.

Now we write code for above mentioned items:
BookngService.js
app.service('bookManageService', function ($http) { 

    //Add New Book
    this.post = function (Book) {
        var request = $http({
            method: "post",
            url: "/api/BookAPI",
            data: Book
        });
        return request;
    }

    //Fetch Book
    this.get = function (Id) {
        return $http.get("/api/BookAPI/" + Id);
    }

    //Fetch All Books
    this.getAllBook = function () {
        return $http.get("/api/BookAPI");
    }

    //Update Book  
    this.put = function (Book) {
        var request = $http({
            method: "put",
            url: "/api/BookAPI",
            data: Book
        });
        return request;
    }

    //Delete Book  
    this.delete = function (Id) {
        var request = $http({
            method: "delete",
            url: "/api/BookAPI/" + Id
        });
        return request;
    }

});

Here I created a AngularJS service called "bookManageService". It defines AngularJS service methods like post, get, getAllBook, put and delete. This service methods will be called from AngularJS controller.
Note: $http is an AngularJS service for reading data from remote servers.

Now we create controller called "bookController":
BookngController.js
app.controller('bookController', function ($scope, bookManageService) {
    $scope.IsInEditMode = false; //variable to decide, edit a record or create a record 
    $scope.Message = ""; //variable used to store error or success messages.
    
GetAllBooks(); 

    //Get All Books
    function GetAllBooks() {
        var reqGet = bookManageService.getAllBook();
        reqGet.then(function (obj) { $scope.Books = obj.data },
            function (error) {
                $scope.Message = 'Error while fetching records. Error:' + error;
            });
    }

    //Clear Book Model
    function Clear() {
        $scope.IsInEditMode = false;
        $scope.Id = "";
        $scope.Name = "";
        $scope.Author = "";
        $scope.Price = "";
    }

    //Create or Edit Book
    $scope.save = function () {
        var Book = {
            Id: $scope.Id,
            Name: $scope.Name,
            Author: $scope.Author,
            Price: $scope.Price
        };
        if($scope.IsInEditMode == false){//Adding new book
            var reqPost = bookManageService.post(Book);
            reqPost.then(function (obj) {
                $scope.Message = "Book added successfully";
                GetAllBooks();
                Clear();
            },
            function (err) {  
                $scope.Message = "Adding Book failed for following reason:" + err;  
            }); 
        }
        else { //Editing existing book detail
            Book.Id = $scope.Id;
            var reqPost = bookManageService.put(Book);
            reqPost.then(function (obj) {
                $scope.Message = "Book updated successfully";
                GetAllBooks();
                Clear();
            },
            function (err) {
                $scope.Message = "Updating Book failed for following reason:" + err;
            });
        }
    }

    //Delete a Book
    $scope.delete = function (Book) {
        var reqDelete = bookManageService.delete(Book.Id);
        reqDelete.then(function (obj) {
            GetAllBooks();
            $scope.Message = "Book deleted successfully";  
        },
        function (err) {
            $scope.Message = "Deleting Book failed for following reason:" + err ;
        });
    }

    //Fetch book detail
    $scope.get = function (Book) {
        var reqGet = bookManageService.get(Book.Id);
        reqGet.then(function (obj) {
            var res = obj.data;
            $scope.Id = res.Id;
            $scope.Name = res.Name;
            $scope.Author = res.Author;
            $scope.Price = res.Price;

            $scope.IsInEditMode = true;
        },
        function (err) {
            $scope.Message = "Unable to fetch book detail for following reason:" + err;
        });
    }

    //To Clear all Inputs controls value.  
    $scope.clear = function () {
        $scope.IsInEditMode = false;
        $scope.Id = "";
        $scope.Name = "";
        $scope.Author = "";
        $scope.Price = "";
    }

});

Here created a controller with the name "bookController" and it also define a function as second parameter which takes two argument $scope ($scope is the application object, the owner of application variables and functions. In short, It's the glue between application controller and the view) and the "bookManageService" (one which we created above here). Inside the function, I have defined four event method $scope.save, $scope.get, $scope.delete and $scope.clear.
Now we will create module:
BookngModule.js:
 var app = angular.module('bookModule', []);

and now create a MVC controller called "BookController" and add a action method called "Index".
BookController.cs
public class BookController : Controller
    {
        // GET: Book
        public ActionResult Index()
        {
            return View();
        }
    }


Now right click inside this Index and Add View with Empty(without a model) template and copy-paste the below code in your view:
<html ng-app="bookModule"> 
@{
    ViewBag.Title = "Manage Books";
}

<body>
    <table id="tblContainer" ng-controller="bookController">
        <tr>
            <td>
                <table style="border: solid 2px Black; padding: 5px;">
                    <tr style="height: 30px; background-color:lightsteelblue; color: maroon;">
                        <th></th>
                        <th style="width:50px">ID</th>
                        <th style="width:150px">Name</th>
                        <th style="width:150px">Author</th>
                        <th style="width:50px">MRP Price</th>
                        <th style="width:50px"></th>
                        <th style="width:50px"></th>
                    </tr>
                    <tbody ng-repeat="book in Books">
                        <tr>
                            <td></td>
                            <td style="width:50px"><span>{{book.Id}}</span></td>
                            <td style="width:150px"><span>{{book.Name}}</span></td>
                            <td style="width:150px"><span>{{book.Author}}</span></td>
                            <td style="width:50px"><span>{{book.Price | currency}}</span></td>
                            <td>
                                <input type="button" id="Edit" value="Edit" ng-click="get(book)" />
                            </td>

                            <td>
                                <input type="button" id="Delete" value="Delete" ng-click="delete(book)" />
                            </td>
                        </tr>
                    </tbody>
                </table>

            </td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr>
            <td>
                <div style="color: red;">{{Message}}</div>
                <table style="border: solid 4px Red; padding: 2px;">
                    <tr>
                        <td></td>
                        <td>
                            <span>Id</span>
                        </td>
                        <td>
                            <input type="text" id="BookId" ng-model="Id" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Name</span>
                        </td>
                        <td>
                            <input type="text" id="bookName" ng-model="Name" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Author</span>
                        </td>
                        <td>
                            <input type="text" id="bookAuthor" ng-model="Author" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Price</span>
                        </td>
                        <td>
                            <input type="text" id="bookPrice" ng-model="Price" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="save" value="Save" ng-click="save()" />

                            <input type="button" id="Clear" value="Clear" ng-click="clear()" />
                        </td>
                    </tr>
                </table>

            </td>
        </tr>

    </table>
</body>
</html>  
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/BookngScripts/BookngModule.js"></script>
<script src="~/Scripts/BookngScripts/BookngController.js"></script>
<script src="~/Scripts/BookngScripts/BookngService.js"></script>

If you see the highlighted piece of code, you will realized how your view is connected with the AngularJS controller which we created here and how your model data is getting bind with UI. Anyway let me give some note about the directives highlighted here:

1. ng-app : this defines the module for our html page. 
2. ng-controller: this allows me to define the controller for this module.
3. {{xyz}}: this is the way to define an expression in AngularJS. You can also use such expression like {{5+2+3}}. Note: Instead of using expression to render value in html you can also use ng-bind directive. ex: <td style="width:50px"><span ng-bind="book.Id"></span></td>
4. ng-click: this directive allows you to bind the event(the one which we created in controller using $scope.get = function(..){....}) for button click.
5. ng-model: this bind the our model with view. So if view changes model will get updated automatically.

Here is the UI outcome of this:

That's it.

Thank You for reading. Feel free to give your feedback/comment.

CRUD operation using MVC3 and Jquery

Frnds,

In this post I am gonna write code which is explaining CRUD operation using MVC WebGrid and Jquery.

Below Image Gallary shows Grid Data with Paging and Sorting functionality.

   

 

In this post I am gonna write code which is explaining CRUD operation using MVC WebGrid and Jquery.

 Before proceeding further we need to have our model class. Here is the our model class.

StateModel.cs

namespace MyMVC3WebApp.Models
{
    public class StateModel
    {
        [ScaffoldColumn(false)]
        public int StateID { get; set; }

        [Required]
        [StringLength(10)]
        [Remote("StateNameExist","State")]
        public string StateName { get; set; }

        [Required]
        [StringLength(10)]
        public string CountryName { get; set; }
    }
}

In our above model class I have implemented basic validation including Custom Remote validation which actually checks

State Name existence into the DB before submitting form. Here Remote attribute has two parameters, first one is action method name and the second one is the Controller name.

Above code will help you to understand the basic CRUD operation for data. Please give your feedback if you really like it or if you have any suggestion here.

Now let’s create our controller class which will have the code for the database operation.

StateController.cs

namespace MyMVC3WebApp.Controllers
{
    public class Country
    {
        public string Name { get; set; }
    }

    public class StateController : Controller
    {

        private TestDataEntities db = new TestDataEntities();

      //Method which returns list of country for dropdown country selection.
        public JsonResult GetCountries()
        {
            List<Country> resultset = new List<Country>() {
                new Country(){Name="India"},
                new Country(){Name="US"},
                new Country(){Name="Australia"},
                new Country(){Name="Rusia"},
            };
            return Json(resultset, JsonRequestBehavior.AllowGet);
        }

//Method to check state name existence being called by Remote attribute implemented in Model class for validation.

        public JsonResult StateNameExist(string stateName)
        {
            int count = (from states in db.StateMasters.AsEnumerable()
                         where states.StateName.ToLower().Trim() == stateName.ToLower().Trim()
                         select states.StateName).Count();
            if (count > 0)
                return Json(string.Format("State name {0} already exists.", stateName), JsonRequestBehavior.AllowGet);
            else
                return Json(true, JsonRequestBehavior.AllowGet);

        }
//Method returns list of states.
        public ActionResult Index()
        {
            IEnumerable<StateModel> states = from st in db.GetAllStates()
                                             select new StateModel() { StateID = st.StateID, StateName = st.StateName, CountryName = st.CountryName };
            return View(states.ToList<StateModel>());
        }

        //
        // GET: /State/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /State/Create

        public ActionResult Create()
        {
            return View(new StateModel());
        }

        //
        // POST: /State/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public void AddNewState(string stateName, string countryName)
        {
            db.AddState(stateName, countryName);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public void UpdateState(int id, string stateName, string countryName)
        {
            StateMaster state = db.StateMasters.Single(s => s.StateID == id);
            state.StateName = stateName;
            state.CountryName = countryName;
            db.SaveChanges();
        }

        [HttpPost]
        public ActionResult Create(StateModel stateModel)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    int result = Convert.ToInt32(db.AddState(stateModel.StateName, stateModel.CountryName));
                }

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        public ActionResult Delete(int id)
        {
            db.DeleteState(id);
            return RedirectToAction("Index");
        }
    }
}

Now this is the right time to create our view as we have ready with our model and controller class.

Index.cshtml

@model IEnumerable<MyMVC3WebApp.Models.StateModel>
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<link href="http://1.cdn.blog.com/wp-admin/../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="http://1.cdn.blog.com/wp-admin/../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="http://1.cdn.blog.com/wp-admin/../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<style>
    body
    {
        font-size: 82.5%;
    }
    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;
    }
    .odd
    {
        background-color: #FFF;
    }
    .even
    {
        background-color: #E8E8E8;
    }

    .grid
    {
        margin: 4px;
        border-collapse: collapse;
        width: 600px;
    }
    .head
    {
        background-color: #E8E8E8;
        font-weight: bold;
        color: #FFF;
    }
    .grid th, .grid td
    {
        border: 1px solid #C0C0C0;
        padding: 5px;
    }
    .alt
    {
        background-color: #E8E8E8;
        color: #000;
    }
    .gridItem
    {
        width: auto;
        font-weight: normal;
        font-style: normal;
    }

    .gridHiddenItem
    {
        visibility: hidden;
    }

    .img
    {
        width: 20px;
        height: 20px;
        text-align: center;
    }
</style>
<script type="text/javascript">
    $(function () {  //$(document).ready(function () {

        //Start-apply css on table data
        $('tr:even').addClass('even');
        $('tr:odd').addClass("odd");
        //End-apply css on table data

        //Start-a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $("#dialog:ui-dialog").dialog("destroy");
        //End-a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!

        //Start-get controls
        var state = $("#stateName"),
   country = $("#countryName"),
            btnDel = $('#deleteRecord'),
   allFields = $([]).add(state).add(country),
   tips = $(".validateTips");
        //End-get controls

        //Start-Json Call to get all country to fill the country dropdown.
        $.getJSON('/State/GetCountries', '',
        function (obj) {
            var html = "";
            for (var i = 0; i < obj.length; i++) {
                html += "<option value='"
                    + obj[i].Name
                        + "'>" + obj[i].Name
                            + "</option>";
            }
            country.html(html);
        }
        );
        //End-Json Call to get all country to fill the country dropdown.

        //Start-apply css for validation error message
        function updateTips(t) {
            tips
    .text(t)
    .addClass("ui-state-highlight");
            setTimeout(function () {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }
        //End-apply css for validation error message

        //Start-length check validation
        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("Length of " + n + " must be between " +
     min + " and " + max + ".");
                return false;
            } else {
                return true;
            }
        }
        //End-length check validation

        //Start-state name existence validation.
        function checkIfStateExist(o) {
            var val = o.val();
            var IsExist = false;
            //synchroneous ajax call
            $.ajax({
                type: 'GET',
                url: '/State/StateNameExist',
                dataType: 'json',
                success: function (obj) {
                    if (obj == true) {
                        IsExist = true;
                    }
                    else {
                        o.addClass("ui-state-error");
                        updateTips(obj);
                        IsExist = false;
                    }
                },
                data: { stateName: val },
                async: false
            });
            return IsExist;
        }
        //End-state name existence validation.

        //Start-Convert div form to model dialog
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 350,
            width: 250,
            modal: true,
            buttons: {
                "Submit": function () {
                    var bValid = true;
                    allFields.removeClass("ui-state-error");
                    //Perform Validation here..
                    bValid = bValid && checkLength(state, "State Name", 3, 45);
                    bValid = bValid && checkIfStateExist(state);
                    if (bValid) {
                        var id = $("#stateID").val();
                        var st = state.val();
                        var ctry = country.val();
                        if (id != "") {
                            url = "/State/UpdateState";
                            $.post(url, { id: id, stateName: st, countryName: ctry }, function (data) {
                                //reload data
                                location.reload();
                            });
                        }
                        else {
                            var url = "/State/AddNewState";
                            $.post(url, { stateName: st, countryName: ctry }, function (data) {
                                //reload data
                                location.reload();
                            });
                        }

                        $(this).dialog("close");
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });
        //End-Convert div form to model dialog

        //Start-show dialog on create new button click
        $("#create-state")
   .button()
   .click(function () {
       $('#dialog-form').attr('title', 'Create New State');
       $("#dialog-form").dialog("open");
   });
        //End-show dialog on create new button click

        //Start-show dialog on Edit button click
        $("a#editRecord")
   .click(function (obj) {
       $('#dialog-form').attr('title', 'Edit State');
       $("#dialog:ui-dialog").dialog("destroy");
       var trObj = $(this).parents("tr");
       var id = trObj[0].cells[0].lastChild.defaultValue;
       var state = trObj[0].cells[1].innerText.trim();
       var country = trObj[0].cells[2].innerText.trim();
       $("#stateID")[0].value = id;
       $("#stateName")[0].value = state;
       $("#countryName").val(country);
       $("#dialog-form").dialog("open");
   });
        //End-show dialog on Edit button click

    });

    function ConfirmDelete() {
        return confirm('Do you want to delete this record');
    }

</script>

<p>
    <a id="create-state" href="#">Create New</a>
</p>
<div>
    <table>
        <tr>
            <td>
                @{
                    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
                }
                <div id="grid">
                    @grid.GetHtml(
                 tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column(null, null, format: @<input type="hidden" name="ID" value="@item.StateID"/>),
                    grid.Column("StateName", "State", style: "gridItem", canSort: true),
                    grid.Column("CountryName", "Country", style: "gridItem", canSort: true),
                    grid.Column("Edit", format: @<text><a id="editRecord" href="#"><img alt="" src="../../Content/images/Edit.jpg"
                        style="height: 20px; width: 20px" /></a></text>, style: "imgstyle"),
                    grid.Column("Delete", format: @<text><a href="@Url.Action("Delete", "State", new { id = item.StateID })" onclick="javascript:return ConfirmDelete();"><img
                        alt="" src="../../Content/images/delete.png" style="height: 20px; width: 20px" /></a></text>, style: "imgstyle")
)
                )
                </div>
            </td>
        </tr>
    </table>
</div>
<div>
    <div id="dialog-form" title="State">
        <p>
            All form fields are required.</p>
        <form>
        <fieldset>
            <input id="stateID" type="text" style="visibility: hidden" />
            <label for="stateName">
                State</label>
            <input type="text" name="stateName" id="stateName" />
            <label for="country">
                Country</label>
            <select id="countryName" style="width: 95%">
            </select>
        </fieldset>
        </form>
    </div>
</div>

Above view has style, script and html code for the view. starting of this post, post has the output images for the above code. Enjoy!