Question

我正在这样一个奇怪的场景中工作，我想要完成的是以下内容：我的Webgrid中的一个列有一个按钮，当它被按下时，我将一个部分视图显示为一个Bootstrap模态。问题是我需要在显示部分视图之前从webgrid选定行获取@ item.id，以便将该数据作为参数传递，我将进一步用于在该部分视图（模态）中显示更多数据。

（查看）

<script>
    $(document).ready(function () {
        $('#showModal').click(function () {
            var url = $('#caModal').data('url');

            $.get(url, function (data) {
                $('#caContainer').html(data);

                $('#caModal').modal('show');
            });
        });
    });
</script>

<div id='caModal' class='modal fade' role="dialog" data-url='@Url.Action("AsignarCotizaciones")'>
            <div id='caContainer'>
            </div>
        </div>

@grid.Table(
                    tableStyle: "table table-responsive table-bordered",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    alternatingRowStyle: "webgrid-alternating-row",
                    rowStyle: "webgrid-row-style",
                    columns: grid.Columns(
                        grid.Column(header: "VENDEDOR", format: @<img src="data:image/jpeg;base64,@SIC.Controllers.CotizacionController.ConvertByteArrayToBase64(@item.id_Emp)" alt="" height="80" width="70" class="img-circle">),
                        grid.Column(columnName: "nombre_Emp", header: "NOMBRE"),
                        grid.Column(columnName: "apaterno_Emp", header: "APELLIDO"),
                        grid.Column(columnName: "nombre_Art", header: "ARTICULO"),
                        grid.Column(columnName: "nombrecli_CotIns", header: "CLIENTE"),
                        grid.Column(columnName: "fecha_CotIns", header: "FECHA"),
                        grid.Column(header: "⇨", format: @<text><button id="showModal" class="btn btn-info">Asignar</button></text>)

（控制器）

[HttpGet]
    public ActionResult AsignarCotizaciones()
    {
        return PartialView();
    }

我想尽我所能，有什么我可以做的吗？

Answer 1

首先，您需要将data-id添加到按钮并添加css类，例如name

grid.Column(header: "⇨", format: 
                  @<text><button class="name btn btn-info" 
                  data-id="@item.id_Emp">Asignar</button>
                 </text>)

然后更新控制器

 public ActionResult AsignarCotizaciones(string id)
    {
       // YOUR LOGIC FOR EXAMPLE
        var model = _repository.FindAll(u => u.Id == id)
        return PartialView(model );
    }

最后更新你的js

           $(document).on("click", ".name", function () {
                var id_emp = $(this).data('id');
                var url = $('#caModal').data('url');
                $.get(url, { id: d_emp }, function (data) {
                    $('#caContainer').html(data);
                    $('#caModal').modal('show');
                });
            });

如何将项目数据从.net MVC WebGrid传递到部分视图

1 个答案: