在 Razor 页面中需要没有 MVC 和使用 Dapper 的级联下拉列表 [关闭]

问题描述 投票:0回答:0

需要一个示例,说明如何在不使用 MVC 和 EF 的情况下在相同 Razor 页面版本 .NET Core 6 或 7 中填充级联下拉列表,请仅通过使用 MVC 或/和 EF 找到。

我能够在同一个 razor 页面(不是级联)中填充一个或多个 DDL,使用 DAPPER,没有 MVC 也没有 EF。

我正在使用 Dapper 而不是 EF,只在一个页面中填充每个 DDL,不需要创建/编辑/删除视图,我需要它非常简单、整洁和方便。我的代码现在没有显示任何错误,但也没有用任何数据填充第二个 DDL。

Here screenshot where 1 is the DropDownList Country "Pais" (PaisR), end 2 is the DropDownList on cascade City "Ciudad" (CiudadR)
[Razor Page Solicitud][1]

我的模型,不是全部,只有涉及的模型

    public class Solicitud
        {
        public int IdSolicitud { get; set; }
        public int IdEmpleado { get; set; } 

        [Required, StringLength(50)]
        public string? Nombre { get; set; }
        
        [Required, StringLength(50)]
        public string? Apellido { get; set; }
        
        [Required, StringLength(1)]
        public string? TipoIdentidad { get; set; }
        
        [Required, StringLength(50)]
        public string? Identidad { get; set; }

        [Required]
        public DateTime FechaSolicitud { get; set; }

        [Required]
        public DateTime FechaNacimiento { get; set; }
        public string? Sexo { get; set; }
        public string? EstadoCivil { get; set; }
        public string? Telefono { get; set; }
        public string? Correo { get; set; }


        public int IDPaisNacimiento { get; set; }
        public virtual PaisN? PaisesN { get; set; }

        public int IDPaisResidencia { get; set; }
        public virtual PaisR? PaisesR { get; set; }

        public int IDCiudadResidencia { get; set; }
        public virtual CiudadR? CiudadesR { get; set; }
        public string? DireccionResidencia { get; set; }
    }

    public class CiudadR
    {
        public int IDCiudadResidencia { get; set; }
        public string? descCiudadResidencia { get; set; }

        public int? IDPaisR { get; set; }  
        public PaisR? DescPaisesR { get; set; }
    }
    public class PaisR
    {
        public int IDPaisResidencia { get; set; }
        public string? descPaisResidencia { get; set; }
    }

我的存储库 IPaisRRepo

    public interface IPaisRRepo
    {
        List<PaisR> ListarPaisesR();
    }
    public class PaisRRepo: IPaisRRepo
    {
        private IConfiguration _configuration;
        private string _connection { get { return _configuration.GetConnectionString("mysqldbhr"); } }
        public PaisRRepo(IConfiguration configuration)
        {
            _configuration = configuration;
        }

        public List<PaisR> ListarPaisesR()
        {
            using (var connection = new MySqlConnection(_connection))
            {
                return (List<PaisR>)connection.Query<PaisR>("Select idpais idpaisresidencia, descpais descpaisresidencia FROM paises");
            }
        }
    }

存储库 CiudadRRepo

    public interface ICiudadRRepo
    {
        List<CiudadR> ListarCiudadesR(int idPaisR);
    }
    public class CiudadRRepo : ICiudadRRepo
    {
        private IConfiguration _configuration;
        private string _connection { get { return _configuration.GetConnectionString("mysqldbhr"); } }
        public CiudadRRepo(IConfiguration configuration)
        {
            _configuration = configuration;
        }

        public List<CiudadR> ListarCiudadesR(int idciudadR)
        {
            using (var connection = new MySqlConnection(_connection))
            {
                return (List<CiudadR>)connection.Query<CiudadR>("Select idciudad idciudadresidencia, descciudad descciudadresidencia FROM ciudades WHERE Idciudad=@idciudadR",
                    new { idciudadR = idciudadR }
                    );
            }
        }
    }

主页的存储库,SolicitudRepo

    using ASHEHR.Models;
    using Dapper;
    using MySqlConnector;
    using System.Data;
    using System.Dynamic;

    namespace ASHEHR.Repository
    {
    public interface ISolicitudRepo
        {
           IEnumerable<Solicitud> Listar();
           string Salvar(Solicitud solicitud);
           void Eliminar(int idSolicitud);
    }

        public class SolicitudRepo : ISolicitudRepo
    {
            private IConfiguration _configuration;
            private string _connection { get { return _configuration.GetConnectionString("mysqldbhr"); } }
            public SolicitudRepo(IConfiguration configuration)
            {
                _configuration = configuration;
            }

            public IEnumerable<Solicitud> Listar()
            {
                using (var connection = new MySqlConnection(_connection))
                {
                    return connection.Query<Solicitud>("Select IdSolicitud, IdEmpleado, Nombre, Apellido, TipoIdentidad, Identidad, FechaSolicitud, FechaNacimiento, Sexo " +
                    " , EstadoCivil, Telefono, Correo, IDPaisNacimiento, IDPaisResidencia, IDCiudadResidencia, DireccionResidencia  FROM Solicitudes");
                }
            }

            public string Salvar(Solicitud solicitud)
            {
                var mensaje = "";
                using (var connection = new MySqlConnection(_connection))
                {
                    var p = new DynamicParameters();
                    p.Add("p_IdSolicitud", solicitud.IdSolicitud);
                    p.Add("p_IdEmpleado", solicitud.IdEmpleado);
                    p.Add("p_Nombre", solicitud.Nombre);
                    p.Add("p_Apellido", solicitud.Apellido);
                    p.Add("p_TipoIdentidad", solicitud.TipoIdentidad);
                    p.Add("p_Identidad", solicitud.Identidad);
                    p.Add("p_FechaSolicitud", solicitud.FechaSolicitud);
                    p.Add("p_FechaNacimiento", solicitud.FechaNacimiento);
                    p.Add("p_Sexo", solicitud.Sexo);
                    p.Add("p_EstadoCivil", solicitud.EstadoCivil);
                    p.Add("p_Telefono", solicitud.Telefono);
                    p.Add("p_Correo", solicitud.Correo);
                    p.Add("p_IDPaisNacimiento", solicitud.IDPaisNacimiento);
                    p.Add("p_IDPaisResidencia", solicitud.IDPaisResidencia);
                    p.Add("p_IDCiudadResidencia", solicitud.IDCiudadResidencia);
                    p.Add("p_DireccionResidencia", solicitud.DireccionResidencia);
                    p.Add("p_response", dbType: DbType.String, direction: ParameterDirection.Output, size:100);
                    connection.Execute("sp_sol_iu1", p, commandType: CommandType.StoredProcedure);
                    mensaje = p.Get<string>("p_response");
                }
                return mensaje;
            }
            public void Eliminar(int idSolicitud)
            {
                using (var connection = new MySqlConnection(_connection))
                {
                    connection.Execute("DELETE FROM solicitudes WHERE IdSolicitud=@IdSolicitud ", new
                    {
                        IdSolicitud = idSolicitud
                    });
                }
            }
        }
    }

这是我主页的后端,Solicitud

    using ASHEHR.Models;
    using ASHEHR.Repository;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using SelectList = Microsoft.AspNetCore.Mvc.Rendering.SelectList;
    
    namespace ASHEHR.Pages
    {
        public class SolicitudModel : PageModel
        {
            private readonly ILogger<SolicitudModel> _logger;
            public IEnumerable<Solicitud>? Solicitudes { get; set; }
            private readonly ISolicitudRepo _rep;
    
            private readonly IPaisNRepo _paisnrepo;
            private readonly IPaisRRepo _paisrrepo;
            private readonly ICiudadRRepo _ciudadrrepo;
            public string? Mensaje { get; set; }
            
            [BindProperty]
            public Solicitud? solicitud { get; set; }
            public SelectList? PaisesN { get; set; }
            public SelectList? PaisesR { get; set; }
            public SelectList? CiudadesR { get; set; }
    
            public SolicitudModel(ILogger<SolicitudModel> logger, ISolicitudRepo rep, IPaisNRepo paisnrepo, IPaisRRepo paisrrepo, ICiudadRRepo ciudadRRepo)
            {
                _logger = logger;
                _rep = rep;
                _paisnrepo = paisnrepo;
                _paisrrepo = paisrrepo;
                _ciudadrrepo = ciudadRRepo;
                
            }
    
            public async Task<IActionResult> OnGet()
            {
                await LoadInitialData();
                return Page();
            }
    
            public async Task<IActionResult> OnPostAsync(Solicitud solicitud)
            {
                string mOpcion2 = Request.Form["txtOpcion"];
    
                if (mOpcion2 == "D")
                {
                    _rep.Eliminar(solicitud.IdSolicitud);
                    Mensaje = "Registro eliminado!";
                }
    
                if (!ModelState.IsValid)
                {
                    Mensaje = "Operacion fallida!";
                    TempData["Mensaje"] = Mensaje;
                    //return RedirectToPage("Solicitud");
                    await LoadInitialData();
                    return Page();
                }
    
                try
                {
                    if (mOpcion2 != "D")
                    {
                        Mensaje = _rep.Salvar(solicitud);
                    }
                }
                catch (Exception ex)
                {
                    _logger.LogError(ex, "Solicitud");
                    Mensaje = ex.Message;
                }
                TempData["Mensaje"] = Mensaje;
                await LoadInitialData();
                return Page();
                //return RedirectToPage("Solicitud");
            }
            
            private Task LoadInitialData()
            {
                _logger.LogInformation("Buscando Datos");
                Solicitudes = _rep.Listar();
                PaisesN = new SelectList( _paisnrepo.ListarPaisesN().ToList(),"IDPaisNacimiento","descPaisNacimiento");
                PaisesR = new SelectList( _paisrrepo.ListarPaisesR().ToList(), "IDPaisResidencia", "descPaisResidencia");
                return Task.CompletedTask;
            }
    
        }
     }

前端

    @page
    @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
    @model ASHEHR.Pages.SolicitudModel
    @{
     }
<div class="container">
    <form method="post" >

        @Html.AntiForgeryToken()
        <div class="card shadow-lg border-1 rounded-lg mt-2">
            <div class="card-header m-1 p-1 h-50">
                <div class="col-md-12 m-0 p-0">
                    <asp:Label runat="server" ID="lblTitulo" Text="Solicitudes"></asp:Label>
                    <asp:Label runat="server" ID="lblOpcion" Visible="true"></asp:Label>
                    <input type="text" id="txtOpcion" name="txtOpcion"  />
                </div>
            </div>
            <div class="card-body m-1 p-1">
                <div class="mx-auto mt-1">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-1 m-0 ">
                                <label for="IdSolicitud" class="col-form-label-sm">IdSol</label>
                                <input type="text" class="form-control form-control-sm" name="IdSolicitud" id="IdSolicitud" Font-Size="Small" value="0" readonly /> @* type="hidden"  *@
                            </div>
                            <div class="col-1 m-0 ">
                                <label for="IdEmpleado" class="col-form-label-sm">IdEmp</label>
                                <input type="text" class="form-control form-control-sm" name="IdEmpleado" id="IdEmpleado" Font-Size="Small" value="0" readonly />
                            </div>
                            <div class="col-2 m-0">
                                <label for="Nombre" class="col-form-label-sm">Nombre</label>
                                <input type="text" class="form-control form-control-sm" name="Nombre" id="Nombre" Font-Size="Small" />
                            </div>
                            <div class="col-2 m-0">
                                <label for="Apellido" class="col-form-label-sm">Apellido</label>
                                <input type="text" class="form-control form-control-sm" name="Apellido" id="Apellido" Font-Size="Small" />
                            </div>
                            <div class="col-1 m-0">
                                <label for="TipoIdentidad" class="col-form-label-sm">Tipo Id</label>
                                <select id="TipoIdentidad" name="TipoIdentidad" class="form-control form-control-sm">
                                    <option value="C" selected="selected">Cedula</option>
                                    <option value="P" >Pasaporte</option>
                                    <option value="R" >Residencia</option>
                                    <option value="T" >Temporal</option>
                                </select>
                            </div>
                            <div class="col-2 m-0">
                                <label for="Identidad" class="col-form-label-sm">Identidad</label>
                                <input type="text" class="form-control form-control-sm" name="Identidad" id="Identidad" data-val="true" data-val-required="Campo requerido." />
                            </div>
                            <div class="col-1 m-0">
                                <label for="Sexo" class="col-form-label-sm">Sexo</label>
                                <select id="Sexo" name="Sexo" class="form-control form-control-sm">
                                    <option value="F" selected="selected">Femenino</option>
                                    <option value="M">Masculino</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-2 m-0">
                                <label for="FechaSolicitud" class="col-form-label-sm">FechaSolicitud</label>
                                <input type="date" class="form-control form-control-sm" name="FechaSolicitud" id="FechaSolicitud" Font-Size="Small" />
                            </div>
                            <div class="col-2 m-0">
                                <label for="FechaNacimiento" class="col-form-label-sm">FechaNacimiento</label>
                                <input type="date" class="form-control form-control-sm" name="FechaNacimiento" id="FechaNacimiento" Font-Size="Small" />
                            </div>
                            <div class="col-1 m-0">
                                <label for="EstadoCivil" class="col-form-label-sm">EstCivil</label>
                                <select id="EstadoCivil" name="EstadoCivil" class="form-control form-control-sm">
                                    <option value="S" selected="selected">Soltero(a)</option>
                                    <option value="C">Casado(a)</option>
                                    <option value="U">UnionLibre</option>
                                </select>
                            </div>
                            <div class="col-1 m-0">
                                <label for="Telefono" class="col-form-label-sm">Telefono</label>
                                <input type="text" class="form-control form-control-sm" name="Telefono" id="Telefono" Font-Size="Small" />
                            </div>
                            <div class="col-2 m-0">
                                <label for="Correo" class="col-form-label-sm">Correo</label>
                                <input type="text" class="form-control form-control-sm" name="Correo" id="Correo" Font-Size="Small" />
                            </div>

                            <div class="col-2 m-0">
                                <label asp-for="solicitud.IDPaisNacimiento" class="control-label">Pais Nacio</label>
                                <select class="form-control form-control-sm" asp-for="solicitud.IDPaisNacimiento" asp-items="Model.PaisesN" name="IDPaisNacimiento" id="IDPaisNacimiento"></select>
                            </div>
                            <div class="col-2 m-0">
                                <label asp-for="solicitud.IDPaisResidencia" class="control-label">Pais Reside</label>
                                <select class="form-control form-control-sm" asp-for="solicitud.IDPaisResidencia" asp-items="Model.PaisesR" name="IDPaisResidencia" id="IDPaisResidencia"></select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-2 m-0">
                                <label asp-for="solicitud.IDCiudadResidencia" class="control-label">CiudadReside</label>
                                <select class="form-control form-control-sm" asp-for="solicitud.IDCiudadResidencia" asp-items="Model.CiudadesR" name="IDCiudadResidencia" id="IDCiudadResidencia"></select>
                            </div>
                            <div class="col-3 m-0">
                                <label for="DireccionResidencia" class="col-form-label-sm">Direccion</label>
                                <input type="text" class="form-control form-control-sm" name="DireccionResidencia" id="DireccionResidencia" Font-Size="Small" />
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="row align-items-center justify-content-center">
                            <div class="col-sm-auto">
                                <p></p>
                                <input type="submit" value="Salvar" class="btn btn-success btn-sm" />
                            </div>
                            <div class="col-sm-auto">
                                @{ <h6 class="bg-warning">@TempData["Mensaje"]</h6> }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            @if (Model != null && Model.Solicitudes.Any())
            {
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col" style="display:none">IdSol</th>
                            <th scope="col">IDEmp</th>
                            <th scope="col">Nombre</th>
                            <th scope="col">Apellido</th>
                            <th scope="col" style="display:none">TipoID</th>
                            <th scope="col">Identidad</th>
                            <th scope="col">FechaSolicitud</th>
                            <th scope="col" style="display:none">FechaNacimiento</th>
                            <th scope="col">Sexo</th>
                            <th scope="col" style="display:none">EstCivil</th>
                            <th scope="col" style="display:none">Telefono</th>
                            <th scope="col" style="display:none">Correo</th>
                            <th scope="col" style="display:none">IDPaisNac</th>
                            <th scope="col" style="display:none">IDPaisRes</th>
                            <th scope="col" style="display:none">IDCiudadRes</th>
                            <th scope="col" style="display:none">DireccionRes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.Solicitudes)
                        {
                            <tr>
                                <td scope="row" style="display:none">@item.IdSolicitud</td>
                                <td scope="row">@item.IdEmpleado</td>
                                <td scope="row">@item.Nombre</td>
                                <td scope="row">@item.Apellido</td>
                                <td scope="row" style="display:none">@item.TipoIdentidad</td>
                                <td scope="row">@item.Identidad</td>
                                <td scope="row">@item.FechaSolicitud.ToString("yyyy-MM-dd")</td>
                                <td scope="row" style="display:none">@item.FechaNacimiento.ToString("yyyy-MM-dd")</td>
                                <td scope="row">@item.Sexo</td>
                                <td scope="row" style="display:none">@item.EstadoCivil</td>
                                <td scope="row" style="display:none">@item.Telefono</td>
                                <td scope="row" style="display:none">@item.Correo</td>
                                <td scope="row" style="display:none">@item.IDPaisNacimiento</td>
                                <td scope="row" style="display:none">@item.IDPaisResidencia</td>
                                <td scope="row" style="display:none" >@item.IDCiudadResidencia</td>
                                <td scope="row" style="display:none">@item.DireccionResidencia</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button type="submit" value="Eliminar" onclick="LlenaRecord('@item.IdSolicitud',
                                                      '@item.IdEmpleado',
                                                      '@item.Nombre',
                                                      '@item.Apellido',
                                                      '@item.TipoIdentidad',
                                                      '@item.Identidad',
                                                      '@item.FechaSolicitud',
                                                      '@item.FechaNacimiento',
                                                      '@item.Sexo',
                                                      '@item.EstadoCivil',
                                                      '@item.Telefono',
                                                      '@item.Correo',
                                                      '@item.IDPaisNacimiento',
                                                      '@item.IDPaisResidencia',
                                                      '@item.IDCiudadResidencia',
                                                      '@item.DireccionResidencia',
                                                      'D',
                                                        );" class="btn btn-danger">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                        <a onclick="LlenaRecord('@item.IdSolicitud',
                                                      '@item.IdEmpleado',
                                                      '@item.Nombre',
                                                      '@item.Apellido',
                                                      '@item.TipoIdentidad',
                                                      '@item.Identidad',
                                                      '@item.FechaSolicitud',
                                                      '@item.FechaNacimiento',
                                                      '@item.Sexo',
                                                      '@item.EstadoCivil',
                                                      '@item.Telefono',
                                                      '@item.Correo',
                                                      '@item.IDPaisNacimiento',
                                                      '@item.IDPaisResidencia',
                                                      '@item.IDCiudadResidencia',
                                                      '@item.DireccionResidencia',
                                                      'I',
                                                        ); " class="btn btn-warning"><i class="fas fa-pencil-alt"></i></a>
                                    </div>
                                </td>
                            </tr>

                        }
                    </tbody>
                </table>
            }
        </div>
    </form>
</div>

我的剧本

    function LlenaRecord(IdSolicitud, IdEmpleado, Nombre,Apellido,TipoIdentidad, Identidad, FechaSolicitud, FechaNacimiento, Sexo, EstadoCivil, Telefono, Correo, IDPaisNacimiento, IDPaisResidencia, IDCiudadResidencia, DireccionResidencia ,Opcion) 
    { var response = true;
        if (Opcion=='D'){
            var response = confirm("Confirmar?");
        }
        var dateS = new Date(FechaSolicitud).toISOString().split('T')[0];
        var dateN = new Date(FechaNacimiento).toISOString().split('T')[0];
        if (response){
            $('#IdSolicitud').val(IdSolicitud);
            $('#IdEmpleado').val(IdEmpleado);
            $('#Nombre').val(Nombre);
            $('#Apellido').val(Apellido);
            $('#TipoIdentidad').val(TipoIdentidad);
            $('#Identidad').val(Identidad);
            $('#FechaSolicitud').val(dateS);
            $('#FechaNacimiento').val(dateN);
            $('#Sexo').val(Sexo);
            $('#EstadoCivil').val(EstadoCivil);
            $('#Telefono').val(Telefono);
            $('#Correo').val(Correo);
            $('#IDPaisNacimiento').val(IDPaisNacimiento);
            $('#IDPaisResidencia').val(IDPaisResidencia);
            $('#IDCiudadResidencia').val(IDCiudadResidencia);
            $('#DireccionResidencia').val(DireccionResidencia);
            $('#txtOpcion').val(Opcion);
        }
    }


  [1]: https://i.stack.imgur.com/UymSZ.png
.net-core razor-pages dapper cascadingdropdown
© www.soinside.com 2019 - 2024. All rights reserved.