@model IEnumerable<DAL.ORM.AdvConstruct>

@{
    ViewBag.Title = "Advertisement constructions";
    WebGrid grid = new WebGrid(Model);
}

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Grid.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript">

    $(document).ready(function() {

        $("#hello").dialog({ autoOpen: false });
        $("#say_it").click(function () {
            $("#hello").dialog("open");
        });

        $(".editDialog").live("click", function (e) {
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Edit Advertisement Construct',
                autoOpen: false,
                resizable: false,
                height: 455,
                width: 550,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });

    });
</script>

<h2>List of constructions </h2>

@grid.GetHtml(columns: new[]
{
    grid.Column("Id"),
    grid.Column("Description"),
    grid.Column("MaintenanceTime", header: "Maintenance Time", format: p => p.MaintenanceTime.ToShortDateString(), style: "maintenanceTimeColumn"),
    grid.Column("Location", style: "locationColumn"),
    grid.Column("Height", style: "heightColumn"),
    grid.Column("Width", style: "widthColumn"),
    grid.Column("MonthlyCost", header: "Monthly Cost", style: "monthlyCostColumn"),
    grid.Column("AdvConstructType", header: "Construction Type", format: p => p.Description, style: "advConstructTypeColumn"),
    grid.Column("", header: "Actions",
                    format: @<text>
            @Html.ActionLink("Edit", "EditConstruct", new { id = item.Id, @class = "editDialog" })
            |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                        </text>
                )
}
)

@Html.ActionLink("Add new construction", "Add")
@Html.ActionLink("PopupTest", "Index", "PopupTest")

<div id="dialog-edit" style="display: none">
</div>

<button id="say_it">Say "Hello!"</button>
<div id="hello" title="Hello  World!">
    <p>
        <font face="Georgia" size="4">
            Hey, world, I just said "Hello!"
        </font>
    </p>
</div>

 public ActionResult EditConstruct(int id)
        {
            var data = advConstructRepository.Get(id);

            AdvConstructModel model = new AdvConstructModel
            {
                Id = data.Id,
                Description = data.Description,
                MaintenanceTime = data.MaintenanceTime,
                Location = data.Location,
                Height = data.Height,
                Width = data.Width,
                MonthlyCost = data.MonthlyCost,
                AdvConstructType = advConstructRepository.GetAdvConstructType(data.AdvTypeId)
            };

            ViewBag.IsUpdate = true;
            return PartialView("EditConstruct", model);
        }

@section Scripts {
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
}

 $(document).ready(function () {

        $("#dialog-edit").dialog({
            title: 'Edit Advertisement Construct',
            autoOpen: false,
            resizable: false,
            height: 455,
            width: 550,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(this.href);

            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $(".editDialog").click(function (e) {
            $("#dialog-edit").dialog('open');
        });

    });

 $(".editDialog").click(function (e) {
            event.preventDefault();
            event.stopPropagation();
            $("#dialog-edit").dialog('open');
        });

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Advertisement constructions - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                            <ul>
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            
            <section class="content-wrapper main-content clear-fix">
                

<link href="/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/Grid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">



<h2>List of constructions </h2>

    <table>
    <thead>
        <tr>
            <th scope="col">
<a href="/?sort=Id&amp;sortdir=ASC">Id</a>            </th>
            <th scope="col">
<a href="/?sort=Description&amp;sortdir=ASC">Description</a>            </th>
            <th scope="col">
<a href="/?sort=MaintenanceTime&amp;sortdir=ASC">Maintenance Time</a>            </th>
            <th scope="col">
<a href="/?sort=Location&amp;sortdir=ASC">Location</a>            </th>
            <th scope="col">
<a href="/?sort=Height&amp;sortdir=ASC">Height</a>            </th>
            <th scope="col">
<a href="/?sort=Width&amp;sortdir=ASC">Width</a>            </th>
            <th scope="col">
<a href="/?sort=MonthlyCost&amp;sortdir=ASC">Monthly Cost</a>            </th>
            <th scope="col">
<a href="/?sort=AdvConstructType&amp;sortdir=ASC">Construction Type</a>            </th>
            <th scope="col">
Actions            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>Seed description</td>
            <td class="maintenanceTimeColumn">03.07.2014</td>
            <td class="locationColumn">Seed location2</td>
            <td class="heightColumn">101</td>
            <td class="widthColumn">199</td>
            <td class="monthlyCostColumn">300,50</td>
            <td class="advConstructTypeColumn">Seed description</td>
            <td>
<a href="/Home/EditConstruct/5?class=editDialog">Edit</a>
            |
<a href="/Home/Delete/5">Delete</a>
                        
</td>
        </tr>
    </tbody>
    </table>


<a href="/Home/Add">Add new construction</a>

<div id="dialog-edit" title="Basic dialog">Please wait</div>

            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2014 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.8.2.js"></script>

        
    
<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function () {

        $("#dialog-edit").dialog({
            title: 'Edit Advertisement Construct',
            autoOpen: false,
            resizable: false,
            height: 455,
            width: 550,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load($(this).attr('href'));

            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $(".editDialog").click(function (e) {
            e.stopPropagation();
            $("#dialog-edit").dialog('open');
        });

    });
</script>

    
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"6f59d0a0fd3a4385892d4a868eddf614"}
</script>
<script type="text/javascript" src="http://localhost:13707/78f27dbc362e4207a2360c91613df3ab/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

<form action="/Home/UpdateConstruct?Length=4" method="post">    <fieldset>

        <legend>AdvConstructModel</legend>
        <input data-val="true" data-val-number="The field Id must be a number." data-val-required="Требуется поле Id." id="Id" name="Id" type="hidden" value="5" />
        <table width="100%">
            <tr>
                <td><label for="Id">Id</label></td>
                <td>
                </td>
            </tr>
            <tr>
                <td><label for="Description">Description</label></td>
                <td>
                    <input class="text-box single-line" data-val="true" data-val-required="Please Enter the Description" id="Description" name="Description" type="text" value="Seed description" />
                    <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td><label for="MaintenanceTime">MaintenanceTime</label></td>
                <td>
                    <input class="text-box single-line" data-val="true" data-val-date="The field MaintenanceTime must be a date." data-val-required="Please Enter the Maintenance Time" id="MaintenanceTime" name="MaintenanceTime" type="datetime" value="03.07.2014 0:00:00" />
                    <span class="field-validation-valid" data-valmsg-for="MaintenanceTime" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td><label for="Location">Location</label></td>
                <td>
                    <input class="text-box single-line" data-val="true" data-val-required="Please Enter the Location" id="Location" name="Location" type="text" value="Seed location2" />
                    <span class="field-validation-valid" data-valmsg-for="Location" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td><label for="Height">Height</label></td>
                <td>
                    <input class="text-box single-line" data-val="true" data-val-number="The field Height must be a number." data-val-required="Please Enter the Height" id="Height" name="Height" type="number" value="101" />
                    <span class="field-validation-valid" data-valmsg-for="Height" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="Width">Width</label>
                </td>
                <td>
                    <input class="text-box single-line" data-val="true" data-val-number="The field Width must be a number." data-val-required="Please Enter the Width" id="Width" name="Width" type="number" value="199" />
                    <span class="field-validation-valid" data-valmsg-for="Width" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td><label for="MonthlyCost">MonthlyCost</label></td>
                <td>
                    <input class="text-box single-line" data-val="true" data-val-number="The field MonthlyCost must be a number." data-val-required="Please Enter the Monthly Cost" id="MonthlyCost" name="MonthlyCost" type="text" value="300,50" />
                    <span class="field-validation-valid" data-valmsg-for="MonthlyCost" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td><label for="AdvConstructType">AdvConstructType</label></td>
                <td>
                    <div class="editor-label"><label for="AdvConstructType_Id">Id</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Id must be a number." data-val-required="Требуется поле Id." id="AdvConstructType_Id" name="AdvConstructType.Id" type="number" value="1" /> <span class="field-validation-valid" data-valmsg-for="AdvConstructType.Id" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="AdvConstructType_Description">Description</label></div>
<div class="editor-field"><input class="text-box single-line" id="AdvConstructType_Description" name="AdvConstructType.Description" type="text" value="Billboard" /> <span class="field-validation-valid" data-valmsg-for="AdvConstructType.Description" data-valmsg-replace="true"></span></div>

                    <span class="field-validation-valid" data-valmsg-for="AdvConstructType" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="submit" id="btnUpdate" name="Command" value="Update" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
                        <span class="ui-button-text">Update</span>
                    </button>
                </td>
            </tr>
        </table>
    </fieldset>
</form>

@{
    Layout = null;
}

<p>SOME TEXT</p>

public ActionResult EditConstruct2(int id)
        {
            return PartialView("EditConstruct2");
        }

<div scrollleft="0" scrolltop="0" style="width: auto; min-height: 0px; height: 403px;" class="ui-dialog-content ui-widget-content" id="dialog-edit">Please wait</div>