@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');
        });