将模型 ID 传递给部分视图以进行编辑

Question

我有一个传递给视图的摄影对象列表：-

Public class Photography
{
    public Photography()
    {
        Name = "";
        Description = "";
        Category = "";
        ImgUrl = "";
        IsAccordion = false;
    }
    public string Name { get; set; }
    public string Description { get; set; }
    public string Category { get; set; }
    public string ImgUrl { get; set; }
    public bool IsAccordion { get; set; }
}

在我看来，我会像这样遍历列表：

@foreach (var item in Model.Photographys)
{
    <li class="span3" style="text-align: center">
        <div class="thumbnail thumbnail-1">
            <h3 style="margin-bottom: 10px;">@item.Name</h3>
            <div class="">
                <div class="">
                    <img src="@item.ImgUrl" alt="" style="visibility: visible; opacity: 1;">
                </div>
            </div>
            <section>
                <p>@item.Description</p>
                <a href="#" class="btn btn-1">Read More</a>
                <p>@item.IsAccordion</p>
            </section>
        </div>
    </li>
}

我想要做的是有一个局部视图，让我可以编辑我点击的照片的属性。我使用脚手架选项“编辑”创建了一个局部视图。它看起来像这样：

@model aPhoto_web.Models.AdminPages.Photography

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Photography</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>
}

等等等等……

我读到的大多数 partialViews 在渲染父视图时直接渲染。这不是我想要的……我只希望当我以某种方式将 Photo-object 传递给它时出现 partialView。

我知道这是一个“大”问题，但如果有人能指出我正确的方向，那就太好了！谢谢。

编辑澄清： 看看这段代码，我在循环底部添加了一个“RenderPartial”。

@foreach (var item in Model.Photographys)
{
    <li class="span3" style="text-align: center">

        <div class="thumbnail thumbnail-1">
            <h3 style="margin-bottom: 10px;">@item.Name</h3>

            <div class="">
                <div class="">
                    <img src="@item.ImgUrl" alt="" style="visibility: visible; opacity: 1;">
                </div>
            </div>

            <section>                          
                <p>@item.Description</p>
                <a href="#" class="btn btn-1">Read More</a>
                <p>@item.IsAccordion</p>
            </section>
        </div>

        @{
            Html.RenderPartial("_editPhoto", item);
        }
    </li>
}

这当然会为循环中的每个项目呈现部分视图。我想要一种将我点击的对象传递给部分的方法...

编辑：

public ActionResult EditPhoto(string id)
{
    var photo = RavenSession.Load<ContentPage>(id) as Photography;
    return PartialView("_editPhoto", photo);  
}

Answer 1

首先，您必须添加一个控制器方法，该方法将摄影名称/ID（最好可以将 ID 属性添加到摄影类）作为参数并返回您创建的部分视图。

然后，当您单击照片时，您可以使用 Jquery 将摄影名称/ID 传递给创建的控制器方法，您可以使用弹出窗口或页面内的特定元素（例如 DIV）显示结果。

示例

当您在视图中循环摄影对象时，您可以向 img 标签添加类和 ID 属性，如下所示；

<img src="@item.ImgUrl" alt="" class="photography-image" data-imgId="@item.ID" style="visibility: visible; opacity: 1;">

然后使用 jquery 和 jquery UI 你可以打开一个对话框来显示局部视图。检查下面的示例代码。

$( ".photography-image" ).click(function() {
    e.preventDefault();
    $("<div></div>")
        .addClass("dialog")
        .appendTo("body")
        .dialog({
            close: function () { $(this).remove() },
            modal: true,
            height: 500,
            width: 500
        })
        .load("/controler/method?photographyId=" + $(this).data("imgId"));
});

谢谢！