使用jQuery在MVC 3中的视图细节弹出窗口中编辑按钮

Question

我目前正在设置MVC实体页面，能够列出特定类型的所有实体，使用jQuery弹出窗口创建新实体，编辑或删除现有实体。

由于并非所有实体的详细信息都显示在列表中，因此我想提供一个详细信息视图（只读），其中包含一个编辑按钮，以防需要进行更改。

然而，目前我还没能实现这一点，并欢迎任何有关如何进行的建议。请查看下面的视图定义：

实体国家/地区：

/查看/国家/索引：

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

/ Views / Country / List： @using 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>

/查看/国家/ 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 }
        }
    });
});

/查看/国家/ 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>
}