我正在尝试在从下拉列表中选择选项时自动填充标签（使用来自对象的参数）

Question

我是 mvc 和 html/js 的新手。

所以我想要做的基本想法是：

• 下拉（用于 select 书名）
• 下面的标签会自动填充下拉列表中选定的书籍详细信息（id、标题、作者、价格、数量等）
• 这些标签侧面的按钮将将此 obj 添加到列表中
• 然后将使用整个列表进行结帐

我坚持使用自动填充的标签并添加按钮如果有人愿意帮助我将不胜感激

这是我的代码：

'''

    @model IEnumerable<BookWebApp.Models.Books>
    @{
    ViewData["Title"] = "OrderBooks";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <html>
        <center>
          <h1>OrderBooks</h1>
          <hr/>

        <div id="Title">
            <select id="Title_Select">
             <option value="" selected-disabled>
             Book Names
             </option>

        @foreach(var item in Model)
        {
             <option value=@item.Title>
             @item.Title
             </option>
        
         }
            </select>
        </div>

        <button onclick="getValue()"> Check Details</button>
        <hr/>
        <div>
        <table class="table">
        <thead>
               <tr>
                  <th>
                       @Html.DisplayNameFor(model => model.BookID)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Title)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Author)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Price)
                  </th>
                  <th>
                       @Html.DisplayNameFor(model => model.Quantity)
                  </th>
                  <th></th>
             </tr>
         </thead>
         <tbody>
              <tr>
                   //labels for obj here
              </tr>
         </tbody>
     </table>
     </div>

     </center>

'''

Answer 1

要填充列表，您可以像使用 foreach 对 DropdownList 所做的那样，并按 header 的顺序插入所有字段，最后一个检查值 id。 最后，一个带有 onclick function 的按钮。 在 onclick function 中滚动列表并获取所有具有选中属性的复选框的 Id。 您现在拥有所有选定书籍的列表。 如果你愿意，我可以给你一个例子，但我建议你自己看看它更有启发性，告诉我你是否想要这个例子

Answer 2

有两种方法可以将标签添加到列表中，然后将列表带到 Checkout 页面，使用ajax发布数据或使用 MVC 提交。 我会推荐第一个（使用ajax ），因为页面不会被刷新。

方案一：使用ajax

1. 创建Controller方法保存记录
2. 每当用户单击按钮时，进行 ajax 调用以将项目发布到方法，将其保存到某个位置（持久性数据库或缓存）
3. 当用户导航到结帐页面时，检索列表并显示给用户
4. 此外，您可能希望添加一个删除按钮以便于管理。

这是填充标签的代码：

<thead>
    <tr>
       <th>
            @Html.DisplayNameFor(model => model.BookID)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Title)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Author)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Price)
       </th>
       <th>
            @Html.DisplayNameFor(model => model.Quantity)
       </th>
       <th>
        <!-- This one is for the add button -->
       </th>
  </tr>
</thead>
<tbody>
    @foreach(var label in Model.Labels)
    {
        <tr class="table-row">
            // labels for obj here
            <td class="label-id">@label.Id</td>
            <td class="label-id">@label.Title</td>
            <td class="label-id">@label.Author</td>
            <td class="label-id">@label.Price</td>
            <td class="label-id">@label.Quantity</td>
            <td>
                <button class="btn-add-to-collection" onclick="addLabel(this)"></button>
            </td>
        </tr>
    }
</tbody>

<script>
    function addLabel(el) {
        // query for the properties value then use ajax to post the data to controller
        // also save it to the current page state for easily modify
    }
</script>

Answer 3

有多种方法可以实现自动填充 label 数据的目标：

1. 将属性值设置为包含书籍详细信息的 select。 1.1。 为您的 select 实施 onChange function ，它将填充标签中 Select 属性的数据。

2. 为您的 select 实施 onChange function ，它将向您的 Z594C103F2C6E031E04C 发送 ajax 调用 2.1。 从 controller 检索值并在标签中填充相关值

3. 在其 onClick 上创建一个单独的按钮，向您的 controller 发送 ajax 调用。 3.1。 从 controller 检索值并在标签中填充相关值

现在来到在列表中添加数据：为什么要为所有标签提供单独的按钮？ 为什么不添加一个按钮继续结帐？

为此，您可以这样做：

$.each($(table).find('tbody tr'), function (j, row) {
});

在此代码中，您将获得所有 label 值并将它们推送到列表中，请随意进行

我希望这会有所帮助，如果您需要上述流程的代码片段，请告诉我，我会相应地更新我的答案。