ASP.Net MVC ListBoxFor - 让用户添加项目

Question

我的应用程序目前包含几个类 - 我将向您展示重要的类：

进入

public class Entry{
    public IEnumerable<Hardware> RequestedHardware {get; set;}
}

public class Hardware{
    public string Name {get; set;}
    public bool IsAvailable {get; set;}
}

当创建一个新的数据集（新条目）时，我希望用户能够将新的硬件设备添加到这个条目（一个显示当前添加的列表框和一个带有按钮的文本框，用于将“设备”添加到列表框）。单击提交按钮后，所有添加的设备都应传输到我的控制器中的 Create Post 方法。

我完全不知道要搜索什么，也不知道如何从这里开始 - 甚至可能吗？

如果我不得不猜测，我会说我必须使用 @Html.ListBoxFor，但正如我所说，我不确定。

编辑 1

我会尝试一步一步地解释：

1. 用户单击索引页面上的新项目按钮
2. 将加载包含多个数据的空字段（此处未解释）和空列表框（用于 Hardware.Name 字符串）的新页面
3. 用户可以使用文本框和按钮添加 n 个硬件项目。在按钮上单击文本框中输入的字符串应添加到列表框（客户端）
4. 用户输入所有数据并点击提交按钮后，数据应该被发送到创建控制器方法（我使用的模型是“条目”，这里不解释。条目有一些属性，例如一个人对象（包含所有人员数据）和上述列表。）

我将在今天下午添加解释这种情况所需的所有模型。

编辑 2

型号

public class Entry{
    public Employee Employee {get; set;}
    public IEnumerable<Hardware> Hardware {get; set;} 
}

public class Employee{
    public string Firstname {get; set;}
    public string Lastname {get; set;}
}


public class Hardware{
    public string Name {get; set;}
    public bool IsAvailable {get; set;}
}

控制器：

public ActionResult Create(Entry entry){
    //I want to be able to access entry.Hardware here
}

Html - 用户（页面的查看者）可以创建一个新条目 - 该条目由一个员工和 n 个硬件组成。

<table class="table table-bordered table-hover table-striped">
        <tr>
            <th colspan="2" class="info">
                Hardware data
            </th>
        </tr>
    <tr>
        <td>
            @Html.ListBoxFor(o => o.Hardware, xxx) @* Here all Hardware the User adds should be shown *@
            </td>
        </tr>
    <tr>
        <td>
            @Html.TextBoxFor(o => o.Hardware.Name) @* If a user wants to add a new Hardware here he has to add its text *@
        </td>
        <td>
            <button class="btn btn-primary" value="Add Hardware"/> @* To save the above entered Hardware click here *@
            </td>
    </tr>
</table>

编辑 3

<input type="text" id="my-textbox">
                @Html.ListBoxFor(o => o.RequestedHardware, new List<SelectListItem>())
                <a href='#' class="btn btn-primary action-add-to-list">Add Text To List</a>

                    <script>
                        $('.action-add-to-list').click(function () {
                            var newListValue = $('#my-textbox').val();
                            if ($.trim(newListValue) != '')
                            {
                                $('#RequestedHardware').append('<option>' + newListValue + '</option>');
                                $('#RequestedHardware').val('');
                            }
                        });
                    </script>

这部分解决了我的问题 - 现在我希望能够将 all 作为类型 Hardware 的对象传输（选项文本是 Hardware.Name 的值，Hardware.IsAvailable 应该始终为 false）

有合适的解决办法吗？

Answer 1

您所说的是一个组合框，可让您键入或从现有列表中进行选择。您不能为此使用列表框。您需要一个常规的文本字段。现有项目将由数据列表（如果您可以使用 HTML5）或 AJAX 查询提供。

使用datalist的一个例子：

<label>
    Hardware
    <input list="hardware" name="hardware" />
</label>
<datalist id="hardware">
  <option value="Hammer">
  <option value="Nails">
  <option value="Wrench">
  <option value="Pliers">
  <option value="Screwdriver">
  <option value="Drill">
</datalist>

唯一的问题是这是 HTML 5 中的新功能，因此您的用户需要使用支持它的现代浏览器。虽然，您可以使用 polyfill 来为至少一些较小的浏览器添加支持。这是one such polyfill。可能还有其他人。

或者，您可以直接使用any random combo box JavaScript plugin。