javascript - 在 Jquery onDrop 之后，如何 Ajax GET 并将 PartialView 的 ActionResult 附加到 Div

Question

在一个页面中，我有

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

缩略图/img 列表和用户可以拖放这些文档缩略图的位置。

在 OnDrop() 之后事件:如何使用 id 触发/执行对 ASP MVC 操作方法的 Ajax 调用列表项。

然后将部分 View / View 的返回 ActionResult 作为容器内的嵌套 div 附加。

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

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

我如何使用项目的唯一 ID 将其包装在 onDrop 调用中

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

我应该在这里使用 Html.Partial 还是 Partial View？

Answer 1

ui 参数包含有关被拖动元素的信息，因此您可以使用

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

注意，这假设你的方法是签名是

public ActionResult GetMyPartialView(string ThumNailId)