Question

我正在做类似“待办事项”列表的操作，用户可以在其中输入文字并将其拖入两个表“要做”和“完成”。首先，他可以创建一个笔记。所有数据都在数据库中。

model IEnumerable<ToDoList.Models.KtoCo>

@{    ViewBag.Title = "Index"}
<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>

<!DOCTYPE HTML>
<html><head><style>#div1, #div2 {
        float: left;
        width: 500px;
        height: 500px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
    }
</style>
<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>

@foreach (var item in Model)
{
    <div draggable="true" ondragstart="drag(event)" id=@item.Id width="88" height="31">

        @Html.DisplayFor(modelItem => item.Kto)
        @Html.DisplayFor(modelItem => item.Co)

        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
    </div>

}


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

`

这是我的观点。这是一个模型：

namespace ToDoList.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity.Spatial;

[Table("KtoCo")]
public partial class KtoCo
{
    public int Id { get; set; }

    [StringLength(50)]
    public string Kto { get; set; }

    public string Co { get; set; }
}
}

问题是：即使在刷新站点后，有没有可能将注释保存在表格中的方法？

P.S。我知道视图不是很漂亮，我将在以后进行处理。

Answer 1

我敢肯定有两种方法可以做到这一点。

从概念上讲，您需要做的是在服务器上存储哪些项目已拖到哪个列表中。然后，在加载页面时，您将需要检查这些服务器端列表，以确定要在哪些列表中呈现哪些项目。

下面的内容只是伪代码-不太可能编译且不完整，但希望足以使您入门并了解它。

要存储“投稿”： 在Javascript drop(ev)方法中，向Controller Action发出异步发布请求，以发送被删除项的ID和被删除项的列表的ID。然后，您需要将该信息存储在某处，以便下次渲染页面时可以对其进行检索。也许在Session变量中。

您的操作方法可能看起来像这样：

    public ActionResult PutItemInList(int listId, int itemId)
    {
        if (listId == ToDoList)
        {
            var toDoIds = (List<int>)Session["ToDoIds"];
            toDoIds.Add(itemId);
            Session["ToDoIds"] = toDoIds;
        }
        if (listId == DoneList)
        {
            var doneIds = (List<int>)Session["ToDoIds"];
            doneIds.Add(itemId);
            Session["DoneIds"] = doneIds;
        }
    }

渲染页面： 您将需要使用Session变量中的信息来呈现视图。

添加一个新的ViewModel类，该类将存储：

KtoCo列表（您当前的ViewModel）
“待办事项”列表中的ID列表
“完成”列表中的ID列表

类似这样的东西：

public class ToDoViewModel
{
    public List<KtoCos> KtoCos { get; set; }
    public List<int> ToDoList { get; set; }
    public List<int> DoneList { get; set; }
}

在呈现View的action方法中，从Session中获取信息并创建一个新的ViewModel类。像这样：

    public ActionResult ActionMethod()
    {
        var toDoIds = (List<int>)Session["ToDoIds"];
        var doneIds = (List<int>)Session["DoneIds"];

        var viewModel = new ToDoViewModel();
        viewModel.DoneList.AddRange(doneIds);
        viewModel.ToDoList.AddRange(toDoIds);
        viewModel.Ktos = GetFromDbSomehow();
        return View(viewModel);
    }

然后在您的Razor视图（其模型现在是新的ViewModel类）中，检查这些列表属性以在正确的位置呈现项目。

类似这样的东西：

@foreach (var item in Model.KtoCos)
{
    <div draggable="true" ondragstart="drag(event)" id=@item.Id width="88" height="31">

        @Html.DisplayFor(modelItem => item.Kto)
        @Html.DisplayFor(modelItem => item.Co)

        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
    </div>

}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    @foreach (var item in Model.ToDoList)
    {
        <div>@item.SomeInfo</div>
    }
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    @foreach (var item in Model.DoneList)
    {   
        <div>@item.SomeInfo</div>
    }
</div>

ASP.NET MVC保存可拖动元素的位置

1 个答案: