Pass model Id to partialView in order to edit - asp.net-mvc

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>
Read More
<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>
Read More
<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);
}

Answer 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!