如何从 asp.net 核心视图更新 javascript 中的模型值答案

【问题标题】：How do I update model value in javascript from asp.net core view如何从 asp.net 核心视图更新 javascript 中的模型值
【发布时间】：2020-01-07 21:28:35
【问题描述】：

我正在尝试将子实体（单元）拖放到不同的父级（用户）。如何在 javascript drop 事件中访问相应的子实体并更新其父实体？

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

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

【问题讨论】：

使用 ViewData

标签： javascript c# asp.net-core

【解决方案1】：

我不知道我是否可以首先调用@Model。

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

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

<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 关系。

【讨论】：