【问题标题】:Return Partial View as string in a boostrap Modal在引导模式中将部分视图作为字符串返回
【发布时间】:2021-01-02 23:46:39
【问题描述】:

有人可以帮忙吗。

我有一个视图和一个局部视图(将在 boostrap 模式中加载)。

当我尝试将部分视图转换为字符串以返回到我的视图时,它为空。但是,如果我只在局部视图中放置一些标签(没有任何运算符/每个等),它会毫无问题地返回。我做错了什么?

我以前做过,措辞很好,但不知道现在发生了什么。不显示任何错误。我的模态打开为空。

我的观点:Pedido/Producao.cshtml

   @model Kepler.Domain.ViewModels.App.PedidoAtivoViewModelPos
 
            <div class="row">
                @foreach (var item in Model.pedidosConfirmar)
                {
                    <div class="col-lg-6 mb-4">
                        <a href="#" id="confButton" data-toggle="modal" data-target="#confModal" data-id="@item.IdPedido" class="card bg-warning text-white shadow text-decoration-none">
                            <div class="card-body">
                                <div>#@item.IdPedido</div>

                                @if (item.IdPedidoAtendimento == 1)
                                {<i class="fa fa-biking"></i>}
                                @if (item.IdPedidoAtendimento == 2)
                                {<i class="fa fa-store"></i> }
                             </div>
                        </a>
                    </div>
                }
            </div>

<!-- Modal -->
<div class="modal fade" id="confModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel"></h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body d-inline text-center">

                <div id="modal-placeholder"></div>

                <form asp-area="Pos" id="confForm">
                    @Html.Hidden("id", "", new { @class = "hiddenId" })
                    <button class="btn btn-info btn-sm" id="btnConfirma" data-confirmar="modal">
                        Confirmar
                    </button>
                    <button class="btn btn-danger btn-sm" id="btnSuspeito" data-suspeito="modal">
                        Suspeito
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/js/pedidoProducaoModalPos.js"></script>
}

我的部分视图:Pedido/_ProducaoPedidoPartial.cshtml

@model Kepler.Domain.ViewModels.App.PedidoAtivoViewModelPos

        <div class="card bg-light mt-2">
            <div class="card-header">
                <div class="text-info">
                    Descrição
                </div>
            </div>
            <div class="card-body m-1 p-1">
                <div class="row">
                    <div class="col-sm-6 small">
                        <div class="text-info">
                            <label class="control-label text-body">Loja:</label> @Model.Unidade
                        </div>

                        <div class="text-info">
                            <label class="control-label text-body">Pedido:</label> @Model.DataPedido
                        </div>
                      
                        @if (Model.DataEntrega != null)
                        {
                            <div class="text-info">
                                <label class="control-label text-body">Entrega:</label> @Model.DataEntrega
                            </div>
                        }

                        @if (Model.IdPedidoAtendimento == 2)
                        {
                            <div class="text-info">
                                <label class="control-label text-body">Horário agendado:</label> @Model.HorarioAgendado.Value.ToShortTimeString()
                            </div>
                            <div class="text-info">
                                <label class="control-label text-body">Endereço:</label> @Model.Unidade
                            </div>
                        }
                    </div>
                    <div class="col-sm-6 small">
                        <div class="text-info">
                            <label class="control-label text-body">Atendimento:</label> @Model.Atendimento
                        </div>
                          
                        @if (Model.IdPedidoAtendimento == 1)
                        {
                            <div class="text-info">
                                <label class="control-label text-body">Taxa de entrega:</label> R$ @Model.TaxaServico
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
          
        <div class="card bg-light mt-2">
            <div class="card-header">
                <div class="text-info">Items do pedido</div>
            </div>
            <div class="card-body m-1 p-1">
                @foreach (var item in Model.PeditoItens)
                {
                    <div class="row mt-1 mb-1">
                        <div class="col-1 text-secondary text-center small text-nowrap">
                            <div class="ml-2 mt-1">@item.Quantidade</div>
                        </div>
                        <div class="col-7 text-secondary">
                            <span class="text-dark small">@item.IdProdutoNavigation.Nome</span>
                          
                            @if (item.IdProdutoNavigation.IdProdutoCategoria == 1)
                            {
                                <small class="d-block">
                                    @item.IdProdutoNavigation.IdProdutoTamanhoNavigation.Valor
                                </small>
                                <small class="d-block">
                                    @item.IdProdutoNavigation.IdProdutoTipoMassaNavigation.Valor
                                </small>
                            }
                          
                            @if (item.IdProdutoNavigation.IdProdutoCategoria == 2)
                            {
                                <small class="d-block">
                                    @item.IdProdutoNavigation.IdProdutoTamanhoNavigation.Valor
                                </small>
                            }
                          
                            @if (item.IdProdutoNavigation.IdProdutoCategoria == 3 || item.IdProdutoNavigation.IdProdutoCategoria == 5)
                            {
                                <small class="d-block">
                                    @item.IdProdutoNavigation.Descricao
                                </small>
                            }
                        </div>
                        <div class="col-3 text-info small text-nowrap">
                            R$ @(item.Preco * item.Quantidade)
                            <div class="text-secondary">
                                @if (item.Quantidade > 1)
                                {
                                    <small>
                                        @item.Quantidade <small>x</small> R$ @item.Preco
                                    </small>
                                }
                            </div>
                        </div>
                    </div>
                    <hr class="m-0" />
                }
                <div class="row mt-1 mb-1">
                    <div class="col-8"></div>
                    <div class="col-4 text-info small">
                        R$ @Model.Total
                    </div>
                </div>
            </div>
        </div>

我的控制器:PedidoController.cs

   public async Task<IActionResult> Producao()
            {
                return View(await _IAppPedido.ListarTodosPedidosPorUnidadeProducao());
            }

   
         [HttpPost("/pos/PedidoDetalhes")]
                    public async Task<IActionResult> PedidoDetalhes(int id, string view)
                    {
                       // Converte as String
                        PartialViewResult partialView = PartialView(view, await _IAppPedido.GetPedidoPorId(id));
                        string viewContent = ConvertViewToString(this.ControllerContext, partialView, 
                               ^^^^^^
                              comes empty!!
    _viewEngine);
                        return Json(new { partialView = viewContent });
                    }
        
                public string ConvertViewToString(ControllerContext controllerContext, PartialViewResult pvr, ICompositeViewEngine _viewEngine)
                {
                    using StringWriter writer = new StringWriter();
                    ViewEngineResult vResult = _viewEngine.FindView(controllerContext, pvr.ViewName, false);
                    ViewContext viewContext = new ViewContext(controllerContext, vResult.View, pvr.ViewData, pvr.TempData, writer, new HtmlHelperOptions());
        
                    vResult.View.RenderAsync(viewContext);
        
                    return writer.GetStringBuilder().ToString();
                }

我的js:

$(function () {
    $('a[data-toggle="modal"]').click(function (event) {
       
        var idPedido = $(this).attr('data-id');
       
        var options = {};
        options.type = "POST";
        options.url = "/pos/PedidoDetalhes";
        options.cache = true;
        options.async = true;
        options.dataType = "JSON";
        contentType = "application/json; charset=utf-8",
        options.data = {
            "id": idPedido,
            "view": "_ProducaoPedidoPartial"
            };

        options.beforeSend = function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        options.success = function (data) {
            $('#modal-placeholder').html(data.partialView);
            $("#modal-placeholder").fadeIn('fast');
            $('#confModal').modal('show');
        };

        options.error = function () {
            
            alert("erro");
        };
        $.ajax(options);
    });
});

我的仓库:

 // To load my view
 public async Task<PedidoAtivoViewModelPos> ListarTodosPedidosPorUnidadeProducao()
        {
            using var db = new KeplerContext(_optionsBuilder);

            var pedido = await db.Pedido
               .Include(p => p.IdPedidoAtendimentoNavigation)
               .Include(p => p.IdUnidadeNavigation)
               .FirstOrDefaultAsync(m => m.IdUnidade == 1);

            var result = new PedidoAtivoViewModelPos();

            var atendente = await db.Usuario
                .Where(u => u.Id == pedido.IdAtendente)
                .FirstOrDefaultAsync();
            if (atendente != null)
            {
                result.Atendente = atendente.Nome;
                result.ImgAtendente = atendente.Imagem;
            }

            var entregador = await db.Usuario
               .Where(u => u.Id == pedido.IdEntregador)
               .FirstOrDefaultAsync();
            if (entregador != null)
            {
                result.Entregador = entregador.Nome;
            }

            var resultConfirmar = db.Pedido
            .Where(u => u.IdPedidoStatus == 0)
            .ToList();
            if (resultConfirmar != null)
            {
                result.pedidosConfirmar = resultConfirmar;
            }

            var resultAberto = db.Pedido
             .Where(u => u.IdPedidoStatus == 1)
             .ToList();
            if (resultAberto != null)
            {
                result.pedidosAberto = resultAberto;
            }

            var resultPrep = db.Pedido
             .Where(u => u.IdPedidoStatus == 2)
             .ToList();
            if (resultPrep != null)
            {
                result.pedidosPreparacao = resultPrep;
            }

            var resultFinal = db.Pedido
             .Where(u => u.IdPedidoStatus == 3)
             .ToList();
            if (resultFinal != null)
            {
                result.pedidosFinalizacao = resultFinal;
            }

            return result;
        }

       // To load my partil view (inside a modal)
        public async Task<PedidoAtivoViewModelPos> GetPedidoPorId(int id)
        {
            using var db = new KeplerContext(_optionsBuilder);

            var pedido = await db.Pedido
                .Include(p => p.IdPedidoAtendimentoNavigation)
                .Include(p => p.IdUnidadeNavigation)
                .FirstOrDefaultAsync(m => m.IdPedido == id && m.IdUnidade == 1);

            var pedidoItens = await db.PedidoItens
               .Where(i => i.IdPedido == id)
               .Include(p => p.IdProdutoNavigation)
               .Include(p => p.IdProdutoNavigation.IdProdutoTamanhoNavigation)
               .Include(p => p.IdProdutoNavigation.IdProdutoTipoMassaNavigation)
               .ToListAsync();
               
            foreach (PedidoItens i in pedidoItens)
            {
                if (i.IdProdutoMeia != null)
                {
                    var produto = db.Produto
                        .First(p => p.IdProduto == i.IdProdutoMeia);

                    i.IdProdutoNavigation.Nome = i.IdProdutoNavigation.Nome + "/" + produto.Nome.Replace("Pizza", "").Trim();
                }
            }

            var result = new PedidoAtivoViewModelPos()
            {
                IdPedido = pedido.IdPedido,
                DataPedido = pedido.DataPedido,
                DataEntrega = pedido.DataEntrega,
                DataSaida = pedido.DataSaida,
                HorarioAgendado = pedido.HorarioAgendado,

                TaxaServico = pedido.TaxaServico,
                IdPedidoStatus = pedido.IdPedidoStatus,
                IdPedidoAtendimento = pedido.IdPedidoAtendimento,
                Atendimento = pedido.IdPedidoAtendimentoNavigation.Nome,
                Unidade = pedido.IdUnidadeNavigation.Nome,
                Telefone = pedido.IdUnidadeNavigation.Telefone,

                Total = pedidoItens.Sum(it => it.Preco * it.Quantidade) + pedido.TaxaServico,

                PeditoItens = pedidoItens
            };

            var atendente = await db.Usuario
                .Where(u => u.Id == pedido.IdAtendente)
                .FirstOrDefaultAsync();
            if (atendente != null)
            {
                result.Atendente = atendente.Nome;
                result.ImgAtendente = atendente.Imagem;
            }

            var entregador = await db.Usuario
               .Where(u => u.Id == pedido.IdEntregador)
               .FirstOrDefaultAsync();
            if (entregador != null)
            {
                result.Entregador = entregador.Nome;
            }

            var resultConfirmar = db.Pedido
            .Where(u => u.IdPedidoStatus == 0)
            .ToList();
            if (resultConfirmar != null)
            {
                result.pedidosConfirmar = resultConfirmar;
            }

            var resultAberto = db.Pedido
             .Where(u => u.IdPedidoStatus == 1)
             .ToList();
            if (resultAberto != null)
            {
                result.pedidosAberto = resultAberto;
            }
             
            var resultPrep = db.Pedido
             .Where(u => u.IdPedidoStatus == 2)
             .ToList();
            if (resultPrep != null)
            {
                result.pedidosPreparacao = resultPrep;
            }

            var resultFinal = db.Pedido
             .Where(u => u.IdPedidoStatus == 3)
             .ToList();
            if (resultFinal != null)
            {
                result.pedidosFinalizacao = resultFinal;
            }

            return result;
        }

我的视图模型:PedidoAtivoViewModelPos

public class PedidoAtivoViewModelPos
    {
        public int IdPedido { get; set; }
        public DateTime DataPedido { get; set; }
        public DateTime? DataEntrega { get; set; }
        public DateTime? DataSaida { get; set; }
        public DateTime? HorarioAgendado { get; set; }

        public decimal TaxaServico { get; set; }
        public byte IdPedidoStatus { get; set; }
        public byte IdPedidoAtendimento { get; set; }
        public string Atendimento { get; set; }
        public string Unidade { get; set; }
        public string Telefone { get; set; }

        public decimal Total { get; set; }

        // Atendente
        public string Atendente { get; set; }
        public string ImgAtendente { get; set; }

        // Entregador
        public string Entregador { get; set; }
        
        public virtual List<PedidoItens> PeditoItens{ get; set; }

        public virtual List<Pedido> pedidosConfirmar { get; set; }

        public virtual List<Pedido> pedidosAberto { get; set; }

        public virtual List<Pedido> pedidosPreparacao { get; set; }

        public virtual List<Pedido> pedidosFinalizacao { get; set; }

    }

【问题讨论】:

    标签: c# jquery ajax asp.net-core


    【解决方案1】:

    你能修改你的代码吗?

      [HttpGet("/pos/PedidoDetalhes")]
            public async Task<IActionResult> PedidoDetalhes(int id, string view)
            {
                PartialViewResult partialView = PartialView(view, await _IAppPedido.GetPedidoPorId(id));
                return partialView;
            }
    

    var options = {};
            options.type = "GET";
            options.url = "/pos/PedidoDetalhes";
            options.cache = true;
            options.async = true;
            options.dataType = "HTML";
            contentType = "text/html; charset=utf-8",
            options.data = {
                "id": idPedido,
                "view": "_ProducaoPedidoPartial"
                };
    
            options.beforeSend = function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
            };
    
            options.success = function (data) {
                $('#modal-placeholder').html(dataw);
                $("#modal-placeholder").fadeIn('fast');
                $('#confModal').modal('show');
            };
    

    【讨论】:

    • 非常感谢您抽出时间 Hamed。但没有奏效。甚至将这部分js代码改为: $('#modal-placeholder').html(data.responseText);我已经尝试过多次使用 PartialView 返回,但不知道为什么它不起作用。所以,我开始尝试使用 json return。最后,我注意到正在尝试在我的部分视图 @Model.HorarioAgendado.Value.ToShortTimeString() 中转换空值。
    • 我认为,您不能在 json 文件中使用部分 html。原因是 json 的最大长度。
    【解决方案2】:

    在卡住了几个小时后,我意识到这是试图在我的部分视图中转换一个空值:

    @Model.HorarioAgendado.Value.ToShortTimeString()
    

    我改成:

    @(Model.HorarioAgendado != null ? Model.HorarioAgendado.Value.ToShortTimeString() : "")
    

    效果很好。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-06-02
      • 2021-02-16
      • 2015-01-17
      • 1970-01-01
      • 2013-03-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多