transformer transformer - 3 months ago 10
Ajax Question

after Jquery onDrop, how to Ajax GET and append ActionResult of PartialView to Div

In a page, I have

<ul id="myPicsMakeAlbum" >
<li id="pic1" data-index-number="picture1"></li>
<li id="pic2" data-index-number="picture2"></li>
<li id="pics3" data-index-number="picture3"></li>
</ul>


list of thumbnails/imgs and where user can drag and drop those thumbnails of documents.

Following the
OnDrop()
event: How do I trigger/male an Ajax call to the ASP MVC Action Method, with the
id
of the list item.

Then append the return ActionResult from the partialview/View as a nest div inside the container.

<div id="container"></div>

$("#containere").droppable({
accept: "#container",
drop: function( event, ui ) {
//how to make the ajax call with item id?
}
});


How do I wrap this inside an onDrop Call with a unique Id of the item

$.ajax({
type: "GET",
url: "/Home/GetMyPartialView/",
data: ThumNailId, //** how do I wire this up to the dragDrop**
success: function (myresult) {
if (myresult.Status === 300) { //300 is an arbitrary value I just made up right now
showPopup("You do not have access to that.");
}

$("#Container").html(myresult.ViewString); //the HTML I returned from the controller
},
error: function (errorData) { onError(errorData); }
});


Should I use Html.Partial or Partial View here?

Answer

The ui parameter contains the information about the element that was dragged, so you can use

$("#containere").droppable({ 
    accept: "#container",
    drop: function( event, ui ) {
        var id = ui.draggable.data('index-number'); // returns 'picture1' if the 1st li element is dragged/dropped
        // or var id = ui.draggable.attr('id'); if you want the 'pic1' value
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetMyPartialView", "Home")', // don't hard code url's
            data: { ThumNailId: id },
            ....
        });     
    } 
});

Note, this assumes your method is signature is

public ActionResult GetMyPartialView(string ThumNailId)