javascript Razor Pages -跟踪屏幕上日期字段的变化

icomxhvb  于 2023-01-08  发布在  Java
关注(0)|答案(1)|浏览(101)

我有一个月份选择器来选择一些账单的月份，但我想创建一个辅助按钮，方便导航到+1和-1个月。
当我对服务器端页面进行任何类型的发布时，我的日期时间被重置为默认值（01-01-0001），我失去了对该值的所有跟踪，是否有正确的方法来处理这种情况而不丢失字段的值？
我的方法（甚至尝试传递日期，而不是只传递一个int到addmonths，请小心，但也没有工作）

public PartialViewResult OnPostMonthSelector([FromBody] string dataAtualizada)
    {
        dataCorrente = DateTime.ParseExact(dataAtualizada, "yyyy-MM", null);
        //contas = contaDTO.buscaContasUsuario(User.Identity.Name).Where(c => c.Data.Month == dataCorrente.Month && c.Data.Year == dataCorrente.Year).ToList();
        contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
        return Partial("_PartialContas", contas);
    }

    public PartialViewResult OnPostMonthNextButton([FromBody] string data)
    {
        dataCorrente = DateTime.ParseExact(data, "yyyy-MM", null).AddMonths(1);
        contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
        return Partial("_PartialContas", contas);
    }
    public PartialViewResult OnPostMonthPrevButton([FromBody] string data)
    {
        dataCorrente = DateTime.ParseExact(data, "yyyy-MM", null).AddMonths(-1);
        contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
        return Partial("_PartialContas", contas);
    }

这些对象的HTML组件：

<th scope="row"><button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#CreateModal">Criar</button></th>
<br />
<div id="titleMonth">@Model.dataCorrente.ToString("MMMM", CultureInfo.CreateSpecificCulture("pt-br"))</div>
<br />
<button type="button" onclick="previousMonth()" class="btn btn-light">&larr;</button>
<input id="monthSelector" min="@(DateTime.Now.AddYears(-10).ToString("yyyy-MM"))" max="@(DateTime.Now.AddYears(10).ToString("yyyy-MM"))" onchange="changeDateSelector(this)" asp-for="dataCorrente" type="month">
<button type="button" onclick="nextMonth()" class="btn btn-light">&rarr;</button>

JS + JQuery（没有显示previousMonth方法，但它等于nextMonth）（带有$（#monthSelector）的行是试图保存值的跟踪，但没有成功）：

<script>
    function changeDateSelector(date){
        var dataAtualizada = date.value;
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthSelector',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(dataAtualizada),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                $("#partial").html(data);
            }
        });
    }

    function nextMonth(){
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthNextButton',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify($("#monthSelector").val()),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                console.log('@Model.dataCorrente.AddMonths(1).ToString("yyyy-MM")');
                $("#monthSelector").val('@Model.dataCorrente.AddMonths(1).ToString("yyyy-MM")');
                $("#partial").html(data);
            }
        });
    }

    function previousMonth(){
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthPrevButton',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify($("#monthSelector").val()),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                console.log('@Model.dataCorrente.AddMonths(-1).ToString("yyyy-MM")');
                $("#monthSelector").val('@Model.dataCorrente.AddMonths(-1).ToString("yyyy-MM")');
                $("#partial").html(data);
            }
        });
    }
</script>

我认为当你绑定一个属性的时候，它的值会在屏幕上自动改变，所以这是我的视图和服务器端的完整代码：

@page
@using System.Globalization
@using ControleContas.Models.Contas
@model ControleContas.Pages.Contas.ContasViewModel
@{
}

<script>
    function changeDateSelector(date){
        var dataAtualizada = date.value;
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthSelector',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(dataAtualizada),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                $("#partial").html(data);
            }
        });
    }

    function nextMonth(){
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthNextButton',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify($("#monthSelector").val()),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                console.log('@Model.dataCorrente.AddMonths(1).ToString("yyyy-MM")');
                $("#monthSelector").val('@Model.dataCorrente.AddMonths(1).ToString("yyyy-MM")');
                $("#partial").html(data);
            }
        });
    }

    function previousMonth(){
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthPrevButton',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify($("#monthSelector").val()),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                console.log('@Model.dataCorrente.AddMonths(-1).ToString("yyyy-MM")');
                $("#monthSelector").val('@Model.dataCorrente.AddMonths(-1).ToString("yyyy-MM")');
                $("#partial").html(data);
            }
        });
    }
</script>

<div>
    <a class="nav-link text-dark" asp-area="" asp-page="/Contas/ContaCadastro"><button type="button" class="btn btn-primary">Cadastrar Cartão</button></a>
</div>

<th scope="row"><button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#CreateModal">Criar</button></th>
<br />
<div id="titleMonth">@Model.dataCorrente.ToString("MMMM", CultureInfo.CreateSpecificCulture("pt-br"))</div>
<br />
<button type="button" onclick="previousMonth()" class="btn btn-light">&larr;</button>
<input id="monthSelector" min="@(DateTime.Now.AddYears(-10).ToString("yyyy-MM"))" max="@(DateTime.Now.AddYears(10).ToString("yyyy-MM"))" onchange="changeDateSelector(this)" asp-for="dataCorrente" type="month">
<button type="button" onclick="nextMonth()" class="btn btn-light">&rarr;</button>

<!-- Modal -->
<div class="modal fade" id="CreateModal" tabindex="-1" role="dialog" aria-labelledby="CreateTitle" 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="CreateTitle">Criar Conta</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post">
                <div class="modal-body">
                    <input id="UserModal" hidden="hidden"></input>
                    <div class="form-group">
                        <label>Nome da Conta</label>
                        <input id="ValorCreateModal" asp-for="conta.Nome" type="text" class="form-control" placeholder="Nome" />
                    </div>
                    <div class="form-group">
                        <label>Valor</label>
                        <input id="ValorCreateModal" asp-for="conta.Valor" type="text" class="form-control" placeholder="Valor" />
                    </div>
                    <div class="form-group">
                        <label>Data</label>
                        <input id="DataCreateModal" asp-for="conta.Data" type="date" class="form-control" placeholder="Data da Conta" />
                    </div>
                    <div class="form-group">
                        <label>Prestações</label>
                        <input id="PrestacoesCreateModal" asp-for="conta.TotalPrestacoes" type="number" class="form-control" placeholder="Insira aqui a Quantidade de Prestações (1 - à Vista)" />
                    </div>
                    <div class="form-group">
                        <label>Pago?</label>
                        <input id="DespesaCreateModal" asp-for="conta.Pago" type="checkbox" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Despesa?</label>
                        <input id="DespesaCreateModal" asp-for="conta.Despesa" type="checkbox" class="form-control" />
                    </div>
                    <!--
                        TODO: Criar um CheckBox para identificar se é uma conta para cartão, se for habilitar Selection para apresentar os cartões e assim vincular ele se não, vincular ao identity Logado.
                     <div class="form-group">
                        <label>Cartão?</label>
                        <input id="FimCartaoModal" type="text" class="form-control" placeholder="Fim Cartão" />
                    </div>-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" asp-page-handler="create" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="partial">    
  <partial name="_PartialContas" model=@Model.contas />
</div>

服务器端：

using ControleContas.DTO.Contas;
using ControleContas.Models.Contas;
using ControleContas.Services;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;

namespace ControleContas.Pages.Contas
{
    public class ContasViewModel : PageModel
    {
        private readonly ContaDTO contaDTO;

        [BindProperty]
        public List<Conta> contas { get; set; }

        [BindProperty]
        public Conta conta { get; set; }

        [BindProperty]
        [DataType(DataType.Date)]
        public DateTime dataCorrente { get; set; }

        public ContasViewModel(IConfiguration config)
        {
            this.contaDTO = new ContaDTO(config);
        }

        #region Get Methods
        public void OnGet()
        {
            var now = DateTime.Now;
            var comecoMes = new DateTime(now.Year, now.Month, 1);

            dataCorrente = dataCorrente.Year == 1 ? comecoMes : dataCorrente;
            contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
        }
        #endregion

        #region Post Methods
        public IActionResult OnPostCreate()
        {
            conta.NomeUsuario = User.Identity.Name;
            contaDTO.CriaConta(conta);
            return Page();
        }

        public PartialViewResult OnPostMonthSelector([FromBody] string dataAtualizada)
        {
            dataCorrente = DateTime.ParseExact(dataAtualizada, "yyyy-MM", null);
            //contas = contaDTO.buscaContasUsuario(User.Identity.Name).Where(c => c.Data.Month == dataCorrente.Month && c.Data.Year == dataCorrente.Year).ToList();
            contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
            return Partial("_PartialContas", contas);
        }

        public PartialViewResult OnPostMonthNextButton([FromBody] string data)
        {
            dataCorrente = DateTime.ParseExact(data, "yyyy-MM", null).AddMonths(1);
            contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
            return Partial("_PartialContas", contas);
        }
        public PartialViewResult OnPostMonthPrevButton([FromBody] string data)
        {
            dataCorrente = DateTime.ParseExact(data, "yyyy-MM", null).AddMonths(-1);
            contas = BuscarContasUsuarioMes(User.Identity.Name, dataCorrente);
            return Partial("_PartialContas", contas);
        }
        #endregion

        #region Private Methods
        private List<Conta> BuscarContasUsuarioMes(string user, DateTime data)
        {
            return contaDTO.buscaContasUsuario(user).Where(c => c.Data.Month == dataCorrente.Month && c.Data.Year == dataCorrente.Year).ToList();
        }
        #endregion

    }
}

我甚至添加了月份标签，试图查看变化，但它没有：

尝试在JS上创建一些辅助变量来保存数据，绑定变量等很多东西，但是不起作用

JavaScript

1条答案

按热度按时间
hivapdat

hivapdat1#

我的代码正在寻找一个后端变量，我只需要像下面这样处理JS，现在我的箭头工作。

<script>
    Date.prototype.yyyymm = function() {
        if (this.getMonth() + 1 < 10)
            return this.getFullYear() + '-' + '0'+(this.getMonth() + 1);
        else
            return this.getFullYear() + '-' + (this.getMonth() + 1);
    }

    function addMonths(date, months) {
        var d = date.getDate();
        date.setMonth(date.getMonth() + +months);
        if (date.getDate() != d) {
            date.setDate(0);
        }
        return date;
    }

    function changeDateSelector(date){
        var dataAtualizada = date.value;
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthSelector',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(dataAtualizada),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                $("#partial").html(data);
            }
        });
    }

    function nextMonth(){
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthNextButton',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify($("#monthSelector").attr('value')),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                var stringData = ($("#monthSelector").val() + "-01").split("-");
                var date = new Date(stringData[1]+'-'+stringData[2]+'-'+stringData[0]);

                date = addMonths(date, 1);

                $("#monthSelector").attr('value',date.yyyymm());
                $("#partial").html(data);
            }
        });
    }

    function previousMonth(){
        $.ajax({
            type: "POST",
            url: '/Contas/ContaView?handler=MonthPrevButton',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify($("#monthSelector").attr('value')),
            headers:
            {
                "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success:function(data){
                var stringData = ($("#monthSelector").val() + "-01").split("-");
                var date = new Date(stringData[1]+'-'+stringData[2]+'-'+stringData[0]);

                date = addMonths(date, -1);

                $("#monthSelector").attr('value',date.yyyymm());
                $("#partial").html(data);
            }
        });
    }
</script>
赞(0）分享  回复(0）举报  2023-01-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com