Question

我的申请目前包含几个课程 - 我会向您展示重要的课程：

条目

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

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

创建新的数据集（新条目）时，我希望用户能够向此条目添加新的硬件设备（列表框显示当前添加的文本框和带有按钮的文本框，以将“设备”添加到列表框）。在单击“提交”按钮后，应将所有添加的设备传送到控制器中的“创建发布方法”。

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

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

修改1

我会尝试逐步解释：

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

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

修改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 - 用户（页面的查看者）可以创建一个新条目 - 此条目包含一个Employee和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>

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

有适当的解决方案吗？

Answer 1

您所说的是一个组合框，可让您在现有列表中输入或选择。您无法使用列表框。您需要一个常规的文本字段。现有项目将由datalist（如果您可以使用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。

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

1 个答案: