Передайте идентификатор модели в partialView для редактирования

У меня есть список объектов фотографии, которые я передаю в представление: -

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>
}

и т.п ...

Большинство partialView, о которых я читал, рендерится напрямую, когда рендерится parentview ... Это не то, что я хочу ... Я хочу, чтобы partialView появлялся только тогда, когда я каким-то образом передаю ему свой Photo-объект.

Я знаю, что это «большой» вопрос, но если кто-нибудь может указать мне правильное направление, это будет здорово! Спасибо.

ИЗМЕНИТЬ, чтобы уточнить: взгляните на этот код, где я добавил «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);  
}

person user2915962    schedule 07.07.2014    source источник
comment
если вы хотите отобразить частичный вид ur в каком-то конкретном случае, просто визуализируйте частичный вид ur с помощью jquery, когда выполнено какое-то конкретное условие.   -  person    schedule 07.07.2014


Ответы (1)


Сначала вам нужно добавить метод контроллера, который принимает имя / идентификатор фотографии (лучше, если вы можете добавить свойство ID в класс фотографии) в качестве аргумента и возвращает созданное вами частичное представление.

Затем, когда вы щелкаете фотографию, вы можете использовать JQuery для передачи имени / идентификатора фотографии в созданный метод контроллера, и вы можете отобразить результат, используя всплывающее окно или внутри определенного элемента (например, DIV) на вашей странице.

ПРИМЕР

Когда вы зацикливаете объекты Photography внутри вашего представления, вы можете добавить свойство class и ID к вашему тегу img следующим образом;

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

Спасибо!

person Saranga    schedule 07.07.2014
comment
Спасибо за ответ, не могли бы вы показать мне jquery, который передает мой идентификатор контроллеру? (Кстати, фото-класс наследуется от другого класса, поэтому у него есть идентификатор) .. - person user2915962; 07.07.2014
comment
Большое спасибо за образец, я постараюсь заставить его работать, я вернусь и вам! - person user2915962; 07.07.2014
comment
Привет снова, мне действительно удалось установить JqueryUI, и теперь я снова пробую ваш пример кода. Эта часть: .load (/ controler / method? PhotographyId = + $ (this) .data (imgId)) Полагаю, идет к контроллеру? Не могли бы вы показать мне, как должен выглядеть этот метод контроллера? - person user2915962; 07.07.2014
comment
Когда я добавил предупреждение (привет) в ваш образец, он отображает его, поэтому он работает ... Но мне бы очень хотелось, чтобы код передавал мою фотографию в диалоговое окно. - person user2915962; 07.07.2014
comment
Да, он вызовет метод контроллера. В вашем случае должно быть .load("/YourControlerName/EditPhoto?id=" + $(this).data("imgId")); :) - person Saranga; 07.07.2014
comment
Спасибо, но я не понимаю, как будет выглядеть метод EditPhoto, я задал его в своем вопросе, и теперь вы можете увидеть, как он выглядит. - person user2915962; 07.07.2014
comment
Должно получиться так; public ActionResult EditPhoto(string id) { var photo = RavenSession.Load<ContentPage>(id); return PartialView("_editPhoto", photo); } Затем это частичное представление будет открыто во всплывающем окне. Вам не нужно @{Html.RenderPartial("_editPhoto", item);} в главном окне, если вы используете всплывающее окно. Убедитесь, что вы добавили class="photography-image" data-imgId="@item.ID" в свое представление, как я показал в своем ответе. - person Saranga; 07.07.2014
comment
Большое спасибо за то, что нашли время, чтобы помочь мне ... Однако эта строка: .load (/ Home / EditPhoto? Id = + $ (this) .data (imgId)); Не попадает в метод, когда ставлю точку останова. - person user2915962; 07.07.2014
comment
Все, что мне нужно было сделать, это удалить строку: e.preventDefault (); Большое спасибо за помощь, Саранга, я отмечу как ответ. - person user2915962; 07.07.2014
comment
Рад помочь вам. :) - person Saranga; 07.07.2014