显示 Bootstrap 模态以创建具有某些参数的表单

Question

我想显示我想通过其更新订单状态的模型。我已经创建了 post 操作方法，它需要 order_id 和状态来更新订单 status.But 我不明白如何将现有状态和订单 ID 传递给模型，因为有 table一堆 order_id 和状态。以及如何提交表格。这是我的代码

  //Button Through which model should show
   <button type="button" onclick="ShowModel(@item.order_id,@item.orderStatus)">Update Status</button>

//Model Code
<div id="myModal" class="modal fade hide" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header ">
                <h4 class="modal-title">Order Status</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form asp-controller="Order" asp-action="UpdateStatus" asp-route-order_id="" asp-route-status="" method="post">
                    <div class="for-group row">
                        <label class="col-12 col-form-label">Order Status</label>
                        <div class="col-12">
                            <select asp-for="orderStatus" class="custom-select mr-sm-2"
                                    asp-items="Html.GetEnumSelectList<Status>()">
                                <option value="">Please Select</option>
                            </select>
                        </div>
                        <span asp-validation-for="orderStatus" class="text-danger col-12"></span>
                    </div>

                    <button type="submit" class="btn btn-success">Done</button>
                    <button type="button" class="btn btn-success m-2" data-dismiss="modal">Done</button>
                </form>
            </div>
        </div>
    </div>
</div>

//JS
@section Scripts{
<script>
    function ShowModel(order_id, status) {            
        $('myModal').modal('show')
    }
</script>

}

Answer 1

这里有一个可以运行的demo，您可以参考：

查看

@model List<Demo1.Models.Order>

<table class="table">
<thead>
    <tr>
        <th>
            Name
        </th>
        <th>
            OrderStatus
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                <select asp-for="@item.OrderStatus" class="custom-select mr-sm-2"
                        asp-items="Html.GetEnumSelectList<OrderStatus>()">
                    <option value="">Please Select</option>
                </select>
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                <a class="btn btn-success" data-toggle="modal" data-target="#myModal" data-orderid="@item.Id" data-orderstatus="@item.OrderStatus">Update Status</a>

            </td>
        </tr>
    }
 </tbody>
</table>

<div id="myModal" class="modal fade hide" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header ">
            <h4 class="modal-title">Order Status</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <form asp-controller="Home" asp-action="UpdateStatus" method="post">
                <div class="for-group row">
                    <input asp-for="@Model[0].Id" name="Id" hidden/>
                    <label class="col-12 col-form-label">Order Status</label>
                    <div class="col-12">
                        <select asp-for="@Model[0].OrderStatus" name="orderStatus" class="custom-select mr-sm-2"
                                asp-items="Html.GetEnumSelectList<OrderStatus>()">
                            <option value="">Please Select</option>
                        </select>
                    </div>
                    <span asp-validation-for="@Model[0].OrderStatus" class="text-danger col-12"></span>
                </div>

                <button type="submit" class="btn btn-success">Done</button>
                <button type="button" class="btn btn-success m-2" data-dismiss="modal">Done</button>
            </form>
        </div>
    </div>
  </div>
</div>

@section Scripts
{
 <script>
    $('#myModal').on('show.bs.modal', function (event) {
     var clickedRow = $(event.relatedTarget);
     var Id = clickedRow.data('orderid');
     var orderStatus = clickedRow.data('orderstatus');
        $.get("/Home/Find?id=" + Id, function (data)
        {
            console.log(data);
            $('#myModal input[name="Id"]').val(data.id);
            $('#myModal select[name="orderStatus"]').val(data.orderStatus);
        });

    });  
 </script>
}

控制器

    public IActionResult OrderModal()
    {
        var data = _context.Order.ToList();
        return View(data);
    }

    public IActionResult Find(int id)
    {
        var order = _context.Order.Find(id);
        return Json(order);
    }


    public void UpdateStatus(Order order)
    {
       // the stuff you want
    }

结果

显示 Bootstrap 模态以创建具有某些参数的表单

Showing Bootstap Model to Create Form with Some Parameters

asp.net

asp.net-mvc-2

razorengine

asp.net-core

bootstrap-4