来自 ajax 调用的 div 中的操作结果答案

【问题标题】：Action Result within a div from ajax call来自 ajax 调用的 div 中的操作结果
【发布时间】：2019-08-19 19:39:45
【问题描述】：

我需要在我的 DOM 中的 div 中显示视图。只有按下按钮时才会触发此视图。我没有做到这一点，我不明白为什么。我搜索了一些其他主题并使用this 作为参考来构建我自己的。

DIV

<div id="ViewDetalhes" class="col-md-10 modal-content" style="margin-left: 2%;">
<a href="#" data-window="#ViewDetalhes-Close" class="bt-fechar"><span class="glyphicon glyphicon-remove"></span></a>
<h4 class="titulo">Histórico do usuário</h4>
<div class="col-md-12">
    <div style="margin: 0;padding: 1% 0;width: 100%;text-align:center;">
        <span class="fa fa-spinner fa-spin fa-3x text-primary" style="color:red;"></span>
    </div>
</div>
<h4 class="titulo">&nbsp;</h4>
<button type="button" class="btn btn-default btn-xs pull-right" data-window="#ViewDetalhes-Close"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Fechar</button>

按钮

<td class="text-center"><a id="Historico" href="/Relatorios/GetHistoricoUsuarios/?UsID=@item.UsuarioID" data-window="#ViewDetalhes-Open"  class="bt-acao" title='Histórico'><span class="glyphicon glyphicon-user"></span></a></td>

Jquery 和 Ajax

$("#Historico,#ViewDetalhes > a.bt-fechar, #ViewDetalhes > button").on(
    "click",
    function () {
        var modo = $(this).data('window').split("-")[1];
        var window = $(this).data('window').split("-")[0];
        function onManutencaoAcao() {};
        $('.w3-modal').css("zIndex", 3);
        Window.Modal(modo, window, onManutencaoAcao);
        return false;           
    }    
);


$("#ViewDetalhes > div").on("click",
    function ExibirHistorico() {
    $.ajax(
        {
            type: 'POST',
            //url: @Url.Action("GetHistoricoUsuarios", "Relatorios"),
            url: '/Relatorios/GetHistoricoUsuarios',
            dataType: 'html',               
            success: function (data) {
                $('#ViewDetalhes').html(data);
               //$('#ViewDetalhes > div').html(data);
            }
        });
    });

操作结果

public ActionResult GetHistoricoUsuarios(int? pagina = 1, string PDF = "N", int EmID = 0, int FiID = 0, int UsID = 0, string Usuario = "", string Telefone = "", string Procedencia = "", string Exclusor = "")
    {

        string Area = Session["Area"].ToString();
        int UserID = Convert.ToInt32(Session["UserID"]);
        int EmpresaID = Convert.ToInt32(Session["EmpresaID"]);
        int FilialID = Convert.ToInt32(Session["FilialID"]);
        int ConsultorID = Convert.ToInt32(Session["ConsultorID"]);
        int referenciaID = PageList.GetReferenciaID(Area, FilialID, EmpresaID, ConsultorID, 0);
        referenciaID = (Area == "CRE") ? ConsultorID : referenciaID;
        referenciaID = (Area == "MAS") ? UserID : referenciaID;

        EmID = (EmID == 0) ? EmpresaID : EmID;
        FiID = (FiID == 0) ? FilialID : FiID;

        ViewBag.EmID = EmID;
        ViewBag.FiID = FiID;
        ViewBag.UsID = UsID;
        ViewBag.Usuario = Usuario;
        ViewBag.Telefone = Telefone;
        ViewBag.Procedencia = Procedencia;
        ViewBag.Exclusor = Exclusor;

        //Definindo a paginação              
        int paginaQdteRegistros = (Session["RegistrosPorPagina"] == null) ? 10 : Convert.ToInt32(Session["RegistrosPorPagina"]);
        int paginaNumeroNavegacao = (pagina ?? 1);

        List<ViewModelHistoricoUsuarios> Relatorio = Relatorios.HistoricoUsuarios(EmID, FiID, UsID, Usuario, Procedencia, Exclusor);
        return View(Relatorio.ToPagedList(paginaNumeroNavegacao, 6));

    }

我收到了这个result，应该在那里加载视图而不是这个红色旋转。我觉得这很简单，但我无法理解。

【问题讨论】：

打开您的开发工具控制台选项卡，看看您是否遇到任何错误。还要检查是否进行了网络调用（ajax调用）和预期的响应（200OK）
按照您的建议，我检查了控制台并且没有任何错误，而在网络调用中我意识到它没有被调用。你知道为什么吗？
如果我传递这样的 URL：@Url.Action("GetHistoricoUsuarios", "Relatorios") 它将调用网络中的 ajax，但它会在新页面中打开视图。

标签： ajax asp.net-mvc asp.net-ajax

【解决方案1】：

我将我的 ajax 更改为这个并且它有效。

$("#Historico").on("click", function () {
    var URLAjax = this.href;
    alert(URLAjax);
    function onManutencaoAcao() {};
    $('.w3-modal').css("zIndex", 3);
    Window.Modal("Open", "#ViewDetalhes", onManutencaoAcao);

    $.ajax( {
        type: 'GET',
        url: URLAjax,              
        dataType: 'html',
        beforeSend: function () {
            var html = '<div style="margin: 0;padding: 1% 0;width: 100%;text-align:center;">' + 
                '<span class="fa fa-spinner fa-spin fa-3x text-primary" style="color:red;"></span>' + 
            '</div>';
            $('#ViewDetalhes > div').html(html);
        },
        success: function (html) {
            $('#ViewDetalhes > div').html(html);
        }
    });
    return false;
});

【讨论】：