Кнопка редактирования во всплывающем окне просмотра сведений в MVC 3 с помощью jQuery

Question

В настоящее время я занимаюсь настройкой страницы сущностей MVC с возможностью перечисления всех сущностей определенного типа, используя всплывающие окна jQuery для создания новых сущностей, редактирования или удаления существующих сущностей.

Поскольку не все детали сущностей отображаются в списке, я хотел бы предоставить подробное представление (только для чтения), в котором есть кнопка редактирования на случай, если необходимо внести изменения.

Однако в настоящий момент я не смог реализовать это и приветствовал бы любые предложения о том, как действовать. Пожалуйста, найдите определения, представленные ниже:

Страна:

/ Views / Страна / Индекс:

@model IEnumerable<MVCjQuerySample2.Entities.Country>
@{
    ViewBag.Title = "Countries";
}
<h2>Countries</h2>
<span class="AddLink IconLink"><img src="/Content/Images/Create.png" alt="Add new country" /></span>
<div id="ListBlock"></div>
<div id="EditDialog" title="" class="Hidden"></div>
<div id="DeleteDialog" title="" class="Hidden"></div>
<script type="text/javascript">
$(function () {
    $("#EditDialog").dialog({
        autoOpen: false, width: 400, height: 330, modal: true,
        buttons: {
            "Save": function () {
                if ($("#EditForm").validate().form()) {
                    $.post("/Country/Save", $("#EditForm").serialize(), function (data) {
                        $("#EditDialog").dialog("close");
                        $("#ListBlock").html(data);
                    });
                }
            },
            Cancel: function () { $(this).dialog("close"); }
        }
    });
    $("#DeleteDialog").dialog({
        autoOpen: false, width: 400, height: 330, modal: true,
        buttons: {
            "Delete": function () {
                $.post("/Country/Delete", $("#DeleteForm").serialize(), function (data) {
                    $("#DeleteDialog").dialog("close");
                    $("#ListBlock").html(data);
                });
            },
            Cancel: function () { $(this).dialog("close"); }
        }
    });
    $(".AddLink").click(function () {
        $("#EditDialog").html("")
        .dialog("option", "title", "Add new Country")
        .load("/Country/Create", function () { $("#EditDialog").dialog("open"); });
    });
    $(".EditLink").live("click", function () {
        var id = $(this).attr("itemid");
        $("#EditDialog").html("")
            .dialog("option", "title", "Edit Country")
            .load("/Country/Edit/" + id, function () { $("#EditDialog").dialog("open"); });
    });
    $(".DeleteLink").live("click", function () {
        var id = $(this).attr("itemid");
        $("#DeleteDialog").html("")
            .dialog("option", "title", "Delete Country")
            .load("/Country/DeleteConfirm/" + id, function () { $("#DeleteDialog").dialog("open"); });
    });
    LoadList();
});
function LoadList() {
    $("#ListBlock").load("/Country/List");
}

/ Представления / Страна / Список: @ с использованием MVCjQuerySample2.Helpers

@model IEnumerable<MVCjQuerySample2.Entities.Country>
<table class="CountryList">
<tr>
    <th>Iso</th>
    <th>Name</th>
    <th>Edit</th>
    <th>Delete</th>
</tr>
@foreach (var item in Model)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Iso)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Name)
    </td>
    <td>
        <span class="EditLink IconLink" itemid="@item.Id"><img src="/Content/Images/Pencil.png" alt="Edit" /></span>
        <!--@Html.ImageActionLink(@"\Content\Images\Pencil.png", "Edit", "Edit", new { id = item.Id })-->
    </td>
    <td>
        <span class="DeleteLink IconLink" itemid="@item.Id"><img src="/Content/Images/Delete.png" alt="Delete" /></span>
        <!--@Html.ImageActionLink(@"\Content\Images\Delete.png", "Delete", "Delete", new { id = item.Id })-->
    </td>
</tr>
}
</table>

/ Views / Страна / EditForm:

@model MVCjQuerySample2.Entities.Country
@using (Html.BeginForm("Save", "Country", FormMethod.Post, new { id = "EditForm" }))
{
@Html.Hidden("Id")
@Html.Hidden("CreatedBy")
@Html.Hidden("CreatedOn")
@Html.Hidden("UpdatedBy")
@Html.Hidden("UpdatedOn")
<table>
    <tr>
        <td>Iso</td>
        <td>@Html.TextBox("Iso")</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>@Html.TextBox("Name")</td>
    </tr>
    <tr>
        <td>Created by</td>
        <td>@Html.DisplayText("CreatedBy")</td>
    </tr>
    <tr>
        <td>Created on</td>
        <td>@Html.DisplayText("CreatedOn")</td>
    </tr>
    <tr>
        <td>Updated by</td>
        <td>@Html.DisplayText("UpdatedBy")</td>
    </tr>
    <tr>
        <td>Updated on</td>
        <td>@Html.DisplayText("UpdatedOn")</td>
    </tr>
</table>
}
<script type="text/javascript">
$(function () {
    $("#EditForm").validate({
        rules: {
            Iso: { required: true },
            Name: { required: true }
        }
    });
});

/ Views / Страна / DeleteConfirm:

@model MVCjQuerySample2.Entities.Country
@using (Html.BeginForm("Delete", "Country", FormMethod.Post, new { id = "DeleteForm" }))
{
    @Html.Hidden("Id")
    @Html.Hidden("Iso")
    @Html.Hidden("Name")
    @Html.Hidden("CreatedOn")
    @Html.Hidden("CreatedBy")
    @Html.Hidden("UpdatedOn")
    @Html.Hidden("UpdatedBy")
    <table>
    <tr>
    <td>Iso</td>
    <td>@Html.DisplayText("Iso")</td>
    </tr>
    <tr>
    <td>Name</td>
    <td>@Html.DisplayText("Name")</td>
    </tr>
    <tr>
    <td>Created by</td>
    <td>@Html.DisplayText("CreatedBy")</td>
    </tr>
    <tr>
    <td>Created on</td>
    <td>@Html.DisplayText("CreatedOn")</td>
    </tr>
    <tr>
    <td>Updated by</td>
    <td>@Html.DisplayText("UpdatedBy")</td>
    </tr>
    <tr>
    <td>Updated on</td>
    <td>@Html.DisplayText("UpdatedOn")</td>
    </tr>
    </table>
}