請問，我現在要用.net mvc寫以下的範例，有類似的sample嗎??

1. 定義一個 Model 物件 SelectionModel.cs

using System.Collections.Generic;

namespace YourNamespace
{
    public class SelectionModel
    {
        public List<string> AvailableItems { get; set; }
        public List<string> SelectedItems { get; set; }
    }
}

此 Model 物件 :

• 定義一個SelectionModel類別
• 在這個類別中，定義兩個屬性 AvailableItems 和 SelectedItems 並在此類別中對這兩個屬性進行初始化

2. 定義一個 Controller控制器 SelectionController.cs

using Microsoft.AspNetCore.Mvc;
using YourNamespace;
using System.Collections.Generic;

namespace YourProjectName.Controllers
{
    public class SelectionController : Controller
    {
        public IActionResult Index()
        {
            var model = new SelectionModel
            {
                AvailableItems = new List<string> { "Item 1", "Item 2", "Item 3" },
                SelectedItems = new List<string> { "Item 4", "Item 5" }
            };
            return View(model);
        }
    }
}

此 Controller 控制器:

• 定義一個SelectionController類別
• 在這個類別中，定義一個 Index action method 並在其中創建一個 SelectionModel 實例，將預先定義好的項目存放在 AvailableItems 與 SelectedItems 中，再將 SelectionModel 傳遞給 View.

3.實作 View的部分 Index.cshtml

@model SelectionModel
<form asp-controller="Selection" asp-action="Index" method="post">
    <div class="form-group">
        <label asp-for="AvailableItems"></label>
        <select asp-for="AvailableItems" multiple class="form-control" asp-items="Model.AvailableItems"></select>
    </div>
    <div class="form-group">
        <input type="button" value=">" id="btnMoveRight" class="btn btn-default" /><br /><br />
        <input type="button" value="<" id="btnMoveLeft" class="btn btn-default" />
    </div>
    <div class="form-group">
        <label asp-for="SelectedItems"></label>
        <select asp-for="SelectedItems" multiple class="form-control" asp-items="Model.SelectedItems"></select>
    </div>
</form>

<script>
    $(document).ready(function () {
        $("#btnMoveRight").click(function () {
            $("#AvailableItems option:selected").appendTo("#SelectedItems");
        });

        $("#btnMoveLeft").click(function () {
            $("#SelectedItems option:selected").appendTo("#AvailableItems");
        });
    });
</script>

View的部分：

• 定義一個 Index.cshtml 的 Razor view 並使用 Razor 語法將 SelectionModel 中的 AvailableItems 和 SelectedItems 綁定到兩個 ListBox 中。
• 在該 View 中使用 JavaScript 來處理將項目從左邊移動到右邊或從右邊移回左邊的邏輯。

codepen

無聊刻的

不過你用.net mvc

應該不用那麼麻煩

本日點數+10