Обновление DIV на основе значения в раскрывающемся списке - PullRequest
0 голосов
/ 03 мая 2020

Как показано на прилагаемом изображении, у меня есть раскрывающийся список в верхней части моей страницы, и в таблице ниже это означает, что необходимо переосмыслить sh, чтобы отразить значение, выбранное пользователем (которое должно быть целым числом). Моя проблема в том, что я следовал советам и примерам по обновлению div , но моя страница по-прежнему не обновляет sh после того, как сработало событие ONCHANGE списка выбора, а JavaScript показывает, что значение OurLo c обновлен. (Первоначальное значение списка равно 1, а в таблице остается местоположение 1 после того, как значение раскрывающегося списка изменилось.) Кто-нибудь может понять, почему, и подскажите, как это исправить - в идеале, с достаточными подробностями, чтобы его мог понять новичок?

My Home.cs html .cs:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Builders;
using Pomelo.EntityFrameworkCore.MySql;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Bookit.Data;
using Bookit.Models;

namespace Bookit.Pages
{
    public class HomeModel : PageModel
    {
        // We should have just one database context class - this is it below
        private readonly Bookit_Context db;
        public HomeModel(Bookit_Context db) => this.db = db;

        public List<PC> PCList {get; set; } = new List<PC>();

        public List<SelectListItem> LocList {get; set;}

        public async Task OnGetAsync(Bookit_Context context) // Populate list of locations
        {
            PCList = await db.PC.ToListAsync();
            LocList = context.Location.Select(l => new SelectListItem 
            { Value = l.ID.ToString(), Text = l.Name}).ToList();
        }
        public string DefaultLoc {get; set;}
        [BindProperty (SupportsGet = true)] public string OurLoc {get; set; }

        public SelectList BookingSL { get; set; } // Don't think this can be a bound property because it's not initialised at create time
        public void PopulateDropDown(Bookit_Context context, object InitialLoc = null)
        {
            // This associates the BookingSL property with our value list from Location table
            var LocsQuery = from l in context.Location orderby l.Name select l;
            // Set initial value to DefaultLoc. Tried swapping ID and Name in case property was wrongly mapped: it made no difference
            BookingSL = new SelectList(LocsQuery, "ID", "Name", DefaultLoc); 
        }
        public void OnPost(int LocSelected)
        {

        }
        /*public async Task<IActionResult> OnPostAsync() //Get the value(s) posted
        {  
            if (ModelState.IsValid)
             { return RedirectToPage("showresult"); }
            return Page(); // Drops to this line if validation fails
        }*/
    }
}

А вот и Home.cs html:

@page
@model HomeModel // Definition of this lives in the corresponding .cs file
@{
    ViewData["Title"] = "Bookit Home";
}
<script type="text/javascript">
    function PassOurValue(LNo) 
    {
        var selectedText = LNo.options[LNo.selectedIndex].innerHTML;
        var selectedValue = LNo.value;
        alert("Library is " + selectedText + ", location " + selectedValue);   
        var container = document.getElementById("PCTable");
        var content = container.innerHTML;
        container.innerHTML = content;
        alert("OurLoc from Model is " + "@Html.Raw(Model.OurLoc)");
    }
</script>

<section id="main">
<form method="post">
    @{ Model.DefaultLoc = "1"; } <!-- Set this using a cookie or whatever-->
    @{ Model.OurLoc = @Model.DefaultLoc; }
    <p>Location:&nbsp;&nbsp;
    <select name="OurLoc" asp-items="Model.LocList" asp-for="OurLoc" onchange="PassOurValue(this)"></select></p>
    <p>&nbsp;</p>

    <div id="PCTable"><!-- This should refresh each time the list box is updated -->
    <table border="1" cellspacing="10" cellpadding="10">
    <tr> <!-- Header row -->
    <td><p><b>PC</b></p></td><td><p><b>Location</b></p></td><td><p><b>Name</b></p></td>
    </tr>
    @foreach(var pc in Model.PCList)
    {    
        if (@Model.OurLoc == pc.LocationID.ToString())
            {
                <tr>
                <td><p>@pc.FriendlyName</p></td> <td><p>@pc.LocationID</p></td> <td><p>@pc.NetBIOSName</p></td>
                </tr>
            }
    }
    </table>
    </div>
</form>
</section>

Спасибо. enter image description here

...