Pass model Id to partialView in order to edit

Question

I have a list of Photography objects that I pass into a view:-

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

In my view I loop through the list like this:

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

What I want to do is to have a partial view that lets me edit the properties of photo i click. I have created a partial view using the scaffoldoption "Edit"..It looks like this:

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

etc etc...

Most partialViews I read about gets rendered directly when the parentview gets rendered..That is not what I want...I only want the partialView to appear when I somehow pass my Photo-object to it.

I know this is a "big" question but if anyone can point me in the right direction it´d be great! Thanks.

EDIT to clarify: Have a look at this code where I have added an "RenderPartial" at the bottom of the loop.

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

This renders a partial-view for every item in the loop of course. I would like a method that passes the object I click to the partial...

EDIT:

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

if u want to render ur partial view in some specific case then just render ur partial view with the help of jquery when some specific condition met. — , Jul 07 '14 at 06:14

Saranga · Accepted Answer · 2014-07-07T06:53:29.907

1

First you have to add a controller method which takes Photography Name/ID (It's better if you can add ID property to Photography class) as argument and returns the Partial view you created.

Then when you click the photo you can use Jquery to pass the Photography Name/ID to created controller method and you can display the result using popup or within a particular element (e.g. DIV) inside your page.

EXAMPLE

When you loop Photography objects inside your view you can add a class and ID property to your img tag as follows;

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

Then using jquery and jquery UI you can open a dialog box to display the partial view. Check the sample code below.

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

Thanks!

edited Jul 07 '14 at 06:53

answered Jul 07 '14 at 06:34

Saranga

3,178
1
18
26

Thank you for answering, do you mind showing me the jquery that passes my id to the controller? (Btw, The photo-class inherits from another class so it has got an id).. – user2915962 Jul 07 '14 at 06:39
Thank you very much for the sample, Im gonna try to get it to work, i´ll get back too you! – user2915962 Jul 07 '14 at 06:56
Hi again I actually now managed to install JqueryUI and i am now again trying your sample code. This part: .load("/controler/method?photographyId=" + $(this).data("imgId")) I assume goes to a controller? Could you maybe show me how this controller-mthod should look like? – user2915962 Jul 07 '14 at 12:58
When I added an Alert("hello") in your sample it displays it so it works...But i would really like the code to pass my photo into the dialog. – user2915962 Jul 07 '14 at 13:08
Yes, it will call the controller method. In your case it should be, `.load("/YourControlerName/EditPhoto?id=" + $(this).data("imgId"));` :) – Saranga Jul 07 '14 at 13:09
Thank you, but I do not understand what the method EditPhoto shall look like, I´ve put it in my question sp you can see how it looks now. – user2915962 Jul 07 '14 at 13:14
It should looks like this; `public ActionResult EditPhoto(string id) { var photo = RavenSession.Load(id); return PartialView("_editPhoto", photo); }` Then this partial view will be open inside a popup. You don't need `@{Html.RenderPartial("_editPhoto", item);}` in your main view if you are using popup. Make sure you add `class="photography-image" data-imgId="@item.ID"` in your view as I shown in my answer. – Saranga Jul 07 '14 at 13:19
Thank you very much for taking the time to help me...However, this line: .load("/Home/EditPhoto?id=" + $(this).data("imgId")); Does not hit the method when I put a breakpoint. – user2915962 Jul 07 '14 at 13:30
All I had to do was to delete the line: e.preventDefault(); Thank you ver much for all help Saranga, i will mark as answer. – user2915962 Jul 07 '14 at 14:37

Pass model Id to partialView in order to edit

1 Answers1

Linked