如何從asp.net核心視圖更新javascript中的模型值

Question

我正在嘗試將子實體（單位）拖放到不同的父母（用戶）。 如何在 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。

Answer 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關系。