如何从 html 获取对象 ID 回控制器 MVC c#

Question

jQuery:

$("#shoppingCart").droppable(
    {
        accept: ".block",
        drop: function (ev, ui) {
            var droppedItem = $(ui.draggable).clone();
            $(this).append(droppedItem);

            $.ajax({
                type: "POST",
                url: '/Social/AddSocialToList/' + $(ui.draggable).attr("id"),
                success: function (data) {

                }
            });
        }
    }
    );
});

控制器：

[Route("socialmedia")]
public class SocialController : Controller
{
    [HttpPost, Route("AddSocialToList")]
    public IActionResult AddSocialToList(string _id)
    {
        TwitterModel tm = new TwitterModel { Key = _id, ScreenName = "Screen1" };

        _db2._SocialList.Add(tm);
        _db2.SaveChanges();
        return RedirectToAction("Index", "Social");
    }
}

HTML：

<div id="imageboundary">
<div id="shoppingCart" style="background:#00ffff; width:200px; padding:10px; margin:10px;">

        <ul id="cart"></ul>
        @foreach (var socialList in Model)
        {
            @Html.Partial("_SocialList", socialList)
        }
    </div>

<article class="blog-post" style="display: inline" >
    <ul class="links">
        <li>
            <img alt="Widget View" src="~/images/thumbnailtwitter.jpg" style="width: 50px; height: 50px;">
            @Model.Key
            @Model.ScreenName
        </li>
    </ul>

我是 MVC 新手，我已经完成了 serval 教程。我通过控制器成功地获得了来自数据库的对象列表所以我想将对象的副本从可拖动的 div 拖放到可放置的对象中。但我想将该对象添加到数据库中。但停留在同一页面上。当我将 ID 发送给控制器进行查询时，它说：

jquery-3.1.1.min.js:11 POST http://localhost:61615/Social/AddSocialToList/undefined 404（未找到）

我想从可拖动对象中获取数据库键（Model.Key）并通过 jquery 传递。

Answer 1

我认为这是因为您的可放置项目“文章”没有名为“id”的属性。

试试这样的：

HTML：

<article data-key="@Model.Key" class="blog-post" style="display: inline" >
<ul class="links">
    <li>
        <img alt="Widget View" src="~/images/thumbnailtwitter.jpg" style="width: 50px; height: 50px;">
        @Model.Key
        @Model.ScreenName
    </li>
</ul>

jQuery:

$("#shoppingCart").droppable(
{
    accept: ".block",
    drop: function (ev, ui) {
        var droppedItem = $(ui.draggable).clone();
        $(this).append(droppedItem);

        $.ajax({
            type: "POST",
            url: '/Social/AddSocialToList/' + $(ui.draggable).data("key"),
            success: function (data) {

            }
        });
    }
});