Load Dynamic Table through jscript consuming a WebService asp.net c #

Question

Load Dynamic Table through jscript consuming a WebService asp.net c #

Navigation

#1 by (0 votes)

0

Good I would like you to help me comment I'm doing a webservice project and website, and create a dynamic table according to json what I vote but when I put the default parameters if I can get it right but in my webservice when I put input variables I do not get this are the two codes that I put one as default and another parameter setting I would like you to help me and that I base thanks to this Author:

link

Only that that author does not give input variables and well I wanted to put it and that's where I get that error from the image.

Thanks

Webservice Project WITHOUT ENTRY VARIABLES

 [WebMethod]
    public void Usp_MostrarIncidentes()
    {
        SqlDataReader reader;

        SqlConnection cn = new SqlConnection(ObtenerCadenaConexion());
        cn.Open();
        SqlCommand cmd = new SqlCommand("Usp_MostrarIncidentes", cn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add("@opt", SqlDbType.Int).Value = 1;
        cmd.Parameters.Add("@username", SqlDbType.NVarChar, 250).Value = "";

        var students = new List<ListaIncidencias>();
        reader = cmd.ExecuteReader();

        while (reader.Read())
        {
            var student = new ListaIncidencias
            {
                Minutos = Convert.ToInt32(reader[0].ToString()),
                Id = Convert.ToInt32(reader[1].ToString()),
                Fecha = Convert.ToString(reader[2].ToString()),
                TipoIncidencia = reader[3].ToString(),
                Sub_TipoIncidencia = reader[4].ToString(),
                Estado = reader[5].ToString(),
                Ver = reader[6].ToString()

            };
            students.Add(student);
        }
        var js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(students));
    }

and in the Javascript called UploadTable:

 $(document).ready(function () {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "../../Ws_MostrarIncidencias.asmx/Usp_MostrarIncidentes",
            success: function (data) {

                var datatableVariable = $('#TabIncidencias').DataTable({

                    data: data,
                    columns: [

                        { 'data': 'Minutos' },
                        { 'data': 'Id' },
                        { 'data': 'Fecha' },
                        { 'data': 'TipoIncidencia' },
                        { 'data': 'Sub_TipoIncidencia' },
                        { 'data': 'Estado' },
                        { 'data': 'Ver' }


                    ]
                });
                $('#TabIncidencias tfoot th').each(function () {
                    var placeHolderTitle = $('#TabIncidencias thead th').eq($(this).index()).text();
                    $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Buscar ' + placeHolderTitle + '" />');
                });


                datatableVariable.columns().every(function () {
                    var column = this;
                    $(this.footer()).find('input').on('keyup change', function () {
                        column.search(this.value).draw();
                    });
                });
                $('.showHide').on('click', function () {
                    var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                    tableColumn.visible(!tableColumn.visible());
                });
            }
        });

    });

and in the asp.net html

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AtenderIncidencia.aspx.cs" Inherits="SistemMesaAyuda.Heldesk.Incidencia.AtenderIncidencia" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="../../css/jquery-ui.css" rel="stylesheet" />
    <link href="../../css/font-awesome.min.css" rel="stylesheet" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/JsGlobal.js"></script>
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../js/jquery-ui.min.css" rel="stylesheet" />
    <script src="../../js/jquery-ui.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <link href="../../css/Site.css" rel="stylesheet" />
    <link href="../../css/Pagina.css" rel="stylesheet" />
    <script src="../../js/MostrarIncidencias.js"></script>

    <link href="../../DataTable/jquery.dataTables.css" rel="stylesheet" />
    <script src="../../DataTable/jquery.dataTables.js"></script>
    <style>
        *
        {
            padding: 0px;
            margin: 0px;
        }

        .panel1
        {
            border: none;
        }
    </style>
    <style>
    </style>
</head>
<body>

    <form id="form1" runat="server">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <img src="<%=Page.ResolveUrl("~") %>Imagen/Qapaq.png" class="img" />
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Financiera QAPAQ</a>
                </div>
                <%--Menu de Opciones--%>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="<%=Page.ResolveUrl("~") %>Opciones.aspx">Regresar al menú principal </a></li>
                    </ul>
                    <p class="navbar-text pull-right">
                        <a href="#" class="navbar-link"><span class="glyphicon glyphicon-user"></span><%= Session["Nombres"].ToString()%> </a>
                    </p>
                </div>
                <%--Panel de navegación--%>
            </div>
        </div>
        <div>
            <div>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 text-center">

                            <div style="margin-top: 150px">

                                <div class="panel panel-primary">
                                    <div class="panel-heading text-left">Lista Incidencia</div>
                                    <div class="panel-body">

                                        <table class="table table-responsive table-hover" id="TabIncidencias">
                                            <thead>
                                                <tr>
                                                    <th>Aviso</th>
                                                    <th>Ticket</th>
                                                    <th>Fecha</th>
                                                    <th>Tipo Incidencia</th>
                                                    <th>Sub-Tipo Incidencia</th>
                                                    <th>Estado</th>
                                                    <th>Ver</th>

                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>Aviso</th>
                                                    <th>Ticket</th>
                                                    <th>Fecha</th>
                                                    <th>Tipo Incidencia</th>
                                                    <th>Sub-Tipo Incidencia</th>
                                                    <th>Estado</th>
                                                    <th>Ver</th>
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

That when I execute it if it comes out and is created as a dynamic table

But when I give input variables this is in

webservice

 [WebMethod]
        public void Usp_MostrarIncidentes(Int32 Opc, String Username)
        {
            SqlDataReader reader;

            SqlConnection cn = new SqlConnection(ObtenerCadenaConexion());
            cn.Open();
            SqlCommand cmd = new SqlCommand("Usp_MostrarIncidentes", cn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add("@opt", SqlDbType.Int).Value = Opc;
            cmd.Parameters.Add("@username", SqlDbType.NVarChar, 250).Value = Username;

            var students = new List<ListaIncidencias>();
            reader = cmd.ExecuteReader();

            while (reader.Read())
            {
                var student = new ListaIncidencias
                {
                    Minutos = Convert.ToInt32(reader[0].ToString()),
                    Id = Convert.ToInt32(reader[1].ToString()),
                    Fecha = Convert.ToString(reader[2].ToString()),
                    TipoIncidencia = reader[3].ToString(),
                    Sub_TipoIncidencia = reader[4].ToString(),
                    Estado = reader[5].ToString(),
                    Ver = reader[6].ToString()

                };
                students.Add(student);
            }
            var js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(students));
        }

    }

**y esto en la pagina load** 

  protected void Page_Load(object sender, EventArgs e)
        {
            Ws_MostrarIncidencias Objs = new Ws_MostrarIncidencias();
            Objs.Usp_MostrarIncidentes(1, Session["usuario"].ToString());
            ClientScript.RegisterStartupScript(GetType(), "Mostrar", "prueba();", true);
        }

and this in javascript:

function prueba() {
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "../../Ws_MostrarIncidencias.asmx/Usp_MostrarIncidentes",
            success: function (data) {

                var datatableVariable = $('#TabIncidencias').DataTable({

                    data: data,
                    columns: [

                        { 'data': 'Minutos' },
                        { 'data': 'Id' },
                        { 'data': 'Fecha' },
                        { 'data': 'TipoIncidencia' },
                        { 'data': 'Sub_TipoIncidencia' },
                        { 'data': 'Estado' },
                        { 'data': 'Ver' }


                    ]
                });
                $('#TabIncidencias tfoot th').each(function () {
                    var placeHolderTitle = $('#TabIncidencias thead th').eq($(this).index()).text();
                    $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Buscar ' + placeHolderTitle + '" />');
                });


                datatableVariable.columns().every(function () {
                    var column = this;
                    $(this.footer()).find('input').on('keyup change', function () {
                        column.search(this.value).draw();
                    });
                });
                $('.showHide').on('click', function () {
                    var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                    tableColumn.visible(!tableColumn.visible());
                });
            }
        });

    });
};

Well in the HTML it remains the same.

but when I execute it looks like this:

THE PROBLEM IS WHEN I GIVE YOU ENTRY PARAMETERS. I WOULD LIKE YOU TO HELP ME ....

javascript c# asp.net

asked by PieroDev 19.10.2017 в 04:05

source

1 answer

Error in Cast to ObjectID Div invades another div

score 0 · Accepted Answer

Well basically what I did:

in the webservice add the two input variables:

[WebMethod] public void Usp_ShowIncidents (Int32 opt, String username, Int32 AssignmentAidTarea) { SqlDataReader reader;

        SqlConnection cn = new SqlConnection(ObtenerCadenaConexion());
        cn.Open();
        SqlCommand cmd = new SqlCommand("Usp_MostrarIncidentes", cn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add("@opt", SqlDbType.Int).Value = opt;
        cmd.Parameters.Add("@username", SqlDbType.NVarChar, 250).Value = username;
        cmd.Parameters.Add("@idatenciontarea", SqlDbType.NVarChar, 250).Value = IdAtencionTarea;

        var students = new List<ListaIncidencias>();
        reader = cmd.ExecuteReader();

        while (reader.Read())
        {
            var student = new ListaIncidencias
            {
                Minutos = Convert.ToInt32(reader[0].ToString()),
                Id = Convert.ToInt32(reader[1].ToString()),
                Fecha = Convert.ToString(reader[2].ToString()),
                TipoIncidencia = reader[3].ToString(),
                Sub_TipoIncidencia = reader[4].ToString(),
                Estado = reader[5].ToString(),
                Ver = reader[6].ToString()

            };
            students.Add(student);
        }
        var js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(students));

    }

Then what you do is create a blank page without html where in the code in the load I put this code:

  protected void Page_Load(object sender, EventArgs e)
        {
            Ws_MostrarIncidencias Ws = new Ws_MostrarIncidencias();
            Ws.Usp_MostrarIncidentes(2, Session["usuario"].ToString(),0);
        }

and in the javascrip I put that consumed from that page since there the json was generating me:

$(document).ready(function () {
    $.ajax({
        type: "POST",
        dataType: "json",
       // url: "../../Ws_MostrarIncidencias.asmx/Usp_MostrarIncidentes",
        url: "../../Heldesk/Incidencia/DefaultHeldesk.aspx/Usp_MostrarIncidentes",
        success: function (data) {

            var datatableVariable = $('#TabIncidencias').DataTable({

                data: data,
                columns: [

                    { 'data': 'Minutos' },
                    { 'data': 'Id' },
                    { 'data': 'Fecha' },
                    { 'data': 'TipoIncidencia' },
                    { 'data': 'Sub_TipoIncidencia' },
                    { 'data': 'Estado' },
                    { 'data': 'Ver' }


                ]
            });
            $('#TabIncidencias tfoot th').each(function () {
                var placeHolderTitle = $('#TabIncidencias thead th').eq($(this).index()).text();
                $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Buscar ' + placeHolderTitle + '" />');
            });


            datatableVariable.columns().every(function () {
                var column = this;
                $(this.footer()).find('input').on('keyup change', function () {
                    column.search(this.value).draw();
                });
            });
            $('.showHide').on('click', function () {
                var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                tableColumn.visible(!tableColumn.visible());
            });
        }
    });

});

on the page where I wanted it to be added only in the html put this code and it worked

 <script src="../../js/MostrarIncidencias.js"></script>