In a webpage, I have
<ul id="myPicturesAlbum" >
<li id="picture1" data-index-number="image1"></li>
<li id="picture2" data-index-number="image2"></li>
<li id="picture3" data-index-number="image3"></li>
</ul>list of thumbnails/images and where users can drag and drop those image thumbnails.
After the OnDrop() event: How can I initiate an Ajax call to the ASP MVC Action Method, passing the id of the list item.
Then insert the returned ActionResult from the partial view/View as a nested div inside the container.
<div id="container"></div>
$("#container").droppable({
accept: "#container",
drop: function( event, ui ) {
//how do we make the ajax call with the item id?
}
});
How can I encapsulate this within an onDrop Call with a distinct Id for the item
$.ajax({
type: "GET",
url: "/Home/GetMyPartialView/",
data: ThumNailId, //** how do I connect this to the drag and drop**
success: function (myresult) {
if (myresult.Status === 300) { //300 is just an arbitrary value
showPopup("You do not have permission to access that.");
}
$("#Container").html(myresult.ViewString); //the HTML retrieved from the controller
},
error: function (errorData) { onError(errorData); }
});
Should I utilize Html.Partial or Partial View in this scenario?