将jQuery getJSON数据转换为模态形式div

时间:2016-04-11 20:46:43

标签: jquery html ajax

我正在使用MVC应用程序,尝试使用来自服务器的数据填充引导模式表单,为此,我尝试执行以下操作:

1)我加载了一个包含多个ID的网格,每个ID都带有一个javascript onclick函数。

2)该函数获取ID号,并向服务器发出ajax请求,以获取相关数据和ID作为参数。

3)生成的JSON应该显示在模态体中。

到目前为止,我已经完成了1和2项工作,但我似乎无法使模态表单显示从服务器检索的数据。我尝试将$ .getJSON更改为$ .ajax,并使用段落或标题更改div标签(假设某个字符串例如可以很好),但没有运气。我甚至尝试用警报替换div填充方法,只是为了查看结果json,但这也没有用。

这是我的代码:

查看(仅模态部分):

<div id="modalZoomOperaciones" class="modal fade" role="dialog" tabindex="-1" data-url='@Url.Action("OperacionDetalle")'>
<div id="contenido">
    <div class="modal-content">
        <div class=" modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">@Global.Details</h4>
        </div>
        <div class="modal-body">
            <div id="response"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">@Global.BackToList</button>
        </div>
    </div>
</div>

JS功能:

function showDetails(oper_numero) {

    var url = $('#modalZoomOperaciones').data('url');

    $.getJSON({
        url: url,
        data: { operacion: oper_numero },
        success: function(data){
            $("#response").html(data);
        }
    });

    $("#modalZoomOperaciones").modal({ backdrop: "static" });
}

控制器(我知道它有不必要的代码和冗余。它是一个测试环境,而不是实际的开发站点):

public JsonResult OperacionDetalle(int operacion)
    {
        IEnumerable<OperacionesTestViewModel> datos = UnitOfWork.ExecuteSpScript.spOperacionesDetalleTest(operacion);
        OperacionesTestViewModel datos1 = datos.FirstOrDefault();
        return Json(datos1);
    }

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

如果有人坚持这一点,更改$ .ajax类型'POST'的$ .getJSON不是解决方案,因为不涉及任何交易。

由于MVC保护应用程序免受特定类型的JSON请求攻击,因此必须在控制器操作中添加一些内容:

而不是:

return Json(data);

必须是这样的:

return Json(data, JsonRequestBehavior.AllowGet);