javascript - 如何从 asp.net 核心 View 更新 javascript 中的模型值

Question

我正在尝试将子实体(单位)拖放到不同的 parent (用户)。如何在 javascript 放置事件中访问相应的子实体并更新其父实体？

@foreach (var user in Model.Users)
{
    <div class="card w-75">
        <div class="card-body" id="@user.Id">
            <ul class="list-group list-group-flush" ondragover="allowDrop(event)" ondrop="drop(event)">
                <li class="list-group-item">Units</li>
                @foreach (var unit in user.Units)
                {
                    <li class="list-group-item" draggable="true" ondragstart="drag(event)" id="@unit.Id">@unit.Id</li>
                }
            </ul>
        </div>
    </div>
}

<script>
    function drag(ev) {
        ev.dataTransfer.setData('text/html', ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData('text/html');
        if (ev.target.localName == 'li') {
            ev.target.insertAdjacentElement('afterend', document.getElementById(data));
            @Model.Units.First(u => u.Id == data).OwnerId = ev.target.parentElement.parentElement.ID;
        }
        document.forms[0].submit();
    }
</script>

变量“数据”不能像这样访问，我不知道我是否可以首先调用@Model。

Answer 1

I don't know if I can call into @Model in the first place.

您不能直接这样做。 @Model.Units.First(u => u.Id == data).OwnerId = ev.target.parentElement.parentElement.ID;在服务器端运行。在有人拖放 <li> 之前元素，服务器端代码已经执行(呈现)。 不可能让它们在客户端运行。

为了实现您的目标，您需要发送 HTTP当有人拖放 <li> 时向服务器请求元素。为了避免过多的 HTTP 请求，您可以创建一个 modelCache存储 Unit-Owner 的变量 map ，并更改此 modelCache在 drop(ev)功能:

<script>
    var modelCache = @Html.Raw(JsonConvert.SerializeObject(
        Model.Units.Select(u => new { UnitId = u.Id , OwnerId = u.OwnerId})
    ));

    function drag(ev) {
        ev.dataTransfer.setData('text/html', ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData('text/html');
        let ownerId= ev.target.parentElement.parentElement.id
        if (ev.target.localName == 'li') {
            ev.target.insertAdjacentElement('afterend', document.getElementById(data));
            modelCache.filter(u => u.UnitId == data)[0].OwnerId = ownerId; 
        }
        console.log(modelCache);
        // when you decide to submit, send the modelCache to the server action : `UpdateUnitOwner(modelCache)`
        // document.forms[0].submit();
    }
</script>

最后，您需要一个服务器端操作/处理程序来接收 ajax 请求:

IActionResult UpdateUnitOwner(List<UnitOwnerMap> maps)
{ 
    // ...  update the databse
}

通过这种方式，您可以更新 Unit-Owner通过简单的拖放来建立关系。