[SOLVED] Get the last added value in TABalance and show it in TSBalance input automatically when the page loaded

Issue

below my html code

                <div class="border backgroundWhite border-info">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group row">
                                <div class="col-4">
                                    <label asp-for="Shift.TSBalance"></label>
                                </div>
                                <div class="col-6">
                                    <input asp-for="Shift.TSBalance" class="form-control" id="sbalance" readonly value="@Model.V" onkeyup="sum()" type="text" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-4">
                                    <label asp-for="Shift.TSupply"></label>
                                </div>
                                <div class="col-6">
                                    <input asp-for="Shift.TSupply" class="form-control" id="supply" value="0" onkeyup="sum()" type="text"/>
                                </div>
                                <span asp-validation-for="Shift.TSupply" class="text-danger"></span>
                            </div>
                            <div class="form-group row">
                                <div class="col-4">
                                    <label asp-for="Shift.TTotal"></label>
                                </div>
                                <div class="col-6">
                                    <input asp-for="Shift.TTotal" class="form-control" readonly id="trbalance" value="0" onkeyup="sum()" type="text"/>
                                </div>
                                <span asp-validation-for="Shift.TTotal" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group row">
                                <div class="col-7">
                                    <label asp-for="Shift.TCBalance"></label>
                                </div>
                                <div class="col-5">
                                    <input asp-for="Shift.TCBalance" class="form-control" id="calcebalance" value="0" onkeyup="sum()" type="text" readonly/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-7">
                                    <label asp-for="Shift.TABalance"></label>
                                </div>
                                <div class="col-5">
                                    <input asp-for="Shift.TABalance" class="form-control" id="actualebalance" value="0" onkeyup="sum()" type="text" />
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-7">
                                    <label asp-for="Shift.TDifferance" class="text-info"></label>
                                </div>
                                <div class="col-5">
                                    <input asp-for="Shift.TDifferance" class="form-control" style="background-color:blue;color:white;font-size:larger" id="differance" value="0" onkeyup="sum()" type="text" readonly />
                                </div>
                            </div>
                        </div>
                     </div>
                      
                    
                </div>

            </div>
        </div>

my page model

namespace Elwady.Pages.ShiftClosing
{
    public class CreateModel : PageModel
    {
        private readonly ApplicationDbContext _db;
        public SelectList Exlist { get; set; }
        [BindProperty]
        public Shift Shift { get; set; }
        public CreateModel(ApplicationDbContext db)
        {
            _db = db;
        }
        public IActionResult OnGet()
        {
            this.Exlist = new SelectList(_db.ExpensesList, "Id", "ExName");
            return Page();
        }
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            };
            _db.Shift.Add(Shift);
            await _db.SaveChangesAsync();
            return RedirectToPage("../Index");
        }
    }
}

my data table

public class Shift
    {
        public int Id { get; set; }
        public int TSBalance { get; set; }
        public int TSupply { get; set; }
        public int TTotal { get; set; }
        public int TCBalance { get; set; }
        public int TABalance { get; set; }
        public int TDifferance { get; set; }

    }

i tried to get this value in variable in Get Handler but i couldn’t assign it to page UI

if i need to print out this form after submit to specific printer, how can i do that?

I am new in Asp.Net

enter image description here

Solution

<input asp-for="Shift.TABalance" class="form-control" id="actualebalance" value="0" onkeyup="sum()" type="text" />

First, please check the input elements, since you add the value attribute (value="0"), in this scenario, even if the page model Shift contains data, it will display 0, because the value="0" attribute will override the asp-for="Shift.TABalance".

So try to remove the value="0" attribute from the input element.

Then, to get the TABalance entered value and assign it to the TSBalance, you can use the onInput event. code like this:

<div class="col-6">
    <input asp-for="Shift.TSBalance" class="form-control" id="sbalance" readonly value="@Model.Shift.TSBalance" onkeyup="sum()" type="text" />
</div>
<div class="col-5">
    <input asp-for="Shift.TABalance" class="form-control" id="actualebalance" onkeyup="sum()" oninput="TABalanceInput()" type="text" />
</div>

@section Scripts{
    <script>
    function sum(){

    }
    //update sbalance's value when update the actualebalance's value
    function TABalanceInput(){
          var actualebalance = document.getElementById("actualebalance");
          var s = actualebalance.value;

          var sbalance = document.getElementById("sbalance");
          sbalance.value = s;         
    }

    //after page loaded, trigger the TABalanceInput function and update the actualebalance's value
    $(document).ready(function(){
        TABalanceInput();
    });
    </script>
}

The result is like this: after page load, it will trigger the TABalanceInput function to update the value. And if modify the TABalance’s value, it will also update the TSBalance’s value.

enter image description here

Update:

First, this is the OnGet method in the above sample:

    public IActionResult OnGet()
    {
        //this.Exlist = new SelectList(_db.ExpensesList, "Id", "ExName");

        this.Exlist = new SelectList(new List<SelectListItem>()
        {
            new SelectListItem(){ Value="1", Text="A"},
             new SelectListItem(){ Value="2", Text="B"},
              new SelectListItem(){ Value="3", Text="C"},
        });
        // create a new shift, and display them in the view.
        Shift = new Shift()
        {
            Id = 0,
            TABalance = 2,
            TCBalance = 0,
            TDifferance = 0,
            TSBalance = 0,
            TSupply = 0,
            TTotal = 0
        };

        return Page();
    }

i need the last value added to databse in TABalance column retrieved
on TSBalance input box

In previous reply, I create a new Shift to render the data. If you want to get the last added data, you need to soft the shift data and get the last added item, then return it to view page. Refer the following code:

    Shift = _db.Shifts.OrderByDescending(c => c.Id).First();

Then, the result is like this:

enter image description here

Answered By – Zhi Lv

Answer Checked By – Timothy Miller (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *