Asp.Net Выпадающий список основных страниц Razor со значениями выбранных элементов

#c# #web-applications #razor-pages #dropdownlistfor #asp.net-core-2.2

#c# #веб-приложения #страницы razor #выпадающий список для #asp.net-core-2.2

Вопрос:

Я новичок в Asp.Net Основные страницы Razor. И это мой первый вопрос о переполнении стека. Когда клиент выбирается из выпадающего списка на странице создания заданий, я хочу получать сведения о клиенте со страницы клиентов, на которой зарегистрирован клиент, а затем отображать номер мобильного телефона в соответствующем поле формы на странице создания задания.

Заранее благодарю вас.

Клиентская модель:

 public class Client
{
    public int ID { get; set; }

    [Required]
    [StringLength(50)]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Required]
    [StringLength(50, ErrorMessage = "First name cannot be longer than 50 characters.")]
    [Column("FirstName")]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [DataType(DataType.PhoneNumber)]
    [Display(Name = "Cellphone Number")]
    public string CellNumber { get; set; }

    [EmailAddress]
    [Display(Name = "Email Address")]
    public string Email { get; set; }

    [Display(Name = "Residential Address")]
    public string ResidentialAddress { get; set; }

    [Display(Name = "Suburb")]
    public string Suburb { get; set; }

    [Display(Name = "City")]
    public string City { get; set; }

    [Display(Name = "Province")]
    public string Province { get; set; }

    [Display(Name = "Postal Code")]
    public string PostalCode { get; set; }


    [Display(Name = "Physical Address")]
    public string PhysicalAddress
    {
        get
        {
            return ResidentialAddress   ", "   Suburb   ", "   City   ", "   Province   ", "   PostalCode;
        }
    }

    [Display(Name = "Full Name")]
    public string FullName
    {
        get
        {
            return LastName   ", "   FirstName;
        }
    }
  

Модель задания:

 public class Job
{
    public int ID { get; set; }

    [StringLength(50, MinimumLength = 3)]
    public string Title { get; set; }

    [DataType(DataType.DateTime)]
    public string AppointmentDate { get; set; }

    [BindProperty, MaxLength(300)]
    public string Description { get; set; }

    public string PlumberID { get; set; }
    public string ClientID { get; set; }

    public Plumber Plumber { get; set; }

    public Client Client { get; set; }
}
  

На странице создания задания.cshtml клиент должен быть выбран из выпадающего списка, а затем номер мобильного телефона клиента должен отображаться в поле формы номер мобильного телефона.

 <div class="form-group">
            <label asp-for="Job.Client" class="control-label"></label>
            <select asp-for="Job.ClientID" class="form-control"
                    asp-items="@Model.ClientNameSL">
                <option value="">-- Select Client --</option>
            </select>
            <span asp-validation-for="Job.ClientID" class="text-danger" />
        </div>
        <div class="form-group">
            <label asp-for="Job.Client.CellNumber" class="control-label"></label>
            <input asp-for="Job.Client.CellNumber" class="form-control" disabled />
            <span asp-validation-for="Job.Client.CellNumber" class="text-danger"></span>
        </div>
  

Создать страницу задания.cshtml.cs:

 public class CreateJobModel : DropDownPageModel
{
    private readonly RealAssisst.Data.ApplicationDbContext _context;

    public CreateJobModel(RealAssisst.Data.ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult OnGet()
    {
        PopulatePlumbersDropDownList(_context);
        PopulateClientsDropDownList(_context);
        return Page();
    }

    [BindProperty]
    public Job Job { get; set; }
    public Client Client { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        var emptyJob = new Job();

        if (await TryUpdateModelAsync<Job>(
            emptyJob,
            "job",
            s => s.ID, s => s.PlumberID, s => s.ClientID, s => s.Title, s => s.AppointmentDate, s => s.Description))
        {
            _context.Jobs.Add(emptyJob);
            await _context.SaveChangesAsync();
            return RedirectToPage("./Index");
        }

        PopulatePlumbersDropDownList(_context, emptyJob.PlumberID);
        PopulateClientsDropDownList(_context, emptyJob.ClientID);
        return Page();
    }
}
  

Заполнить страницу выпадающего списка:

 public class DropDownPageModel : PageModel
{
    public SelectList PlumberNameSL { get; set; }
    public SelectList ClientNameSL { get; set; }
    public string ClientNumber { get; set; }

    public void PopulatePlumbersDropDownList(ApplicationDbContext _context,
        object selectedPlumber = null)
    {
        var plumbersQuery = from d in _context.Plumber
                            orderby d.FirstName
                            select d;

        PlumberNameSL = new SelectList(plumbersQuery.AsNoTracking(),
            "FullName", "FullName", selectedPlumber);
    }

    public void PopulateClientsDropDownList(ApplicationDbContext _context,
        object selectedClient = null)
    {
        var clientQuery = from d in _context.Client
                          orderby d.FirstName
                          select d;

        ClientNameSL = new SelectList(clientQuery.AsNoTracking(),
            "FullName", "FullName", selectedClient);
    }
}
  

Комментарии:

1. Вы должны показать свой код. Не совсем ясно, чего вы хотите достичь и что происходит вместо этого.

2. Смотрите отредактированный вопрос. Пожалуйста, и спасибо вам

Ответ №1:

Client.ID (и, предположительно, Plumber.ID также) вводятся как int . Однако в вашем Job случае вы ввели свойство внешнего ключа как string . Кроме того, в ваших выпадающих списках FullName свойство используется как в качестве текста, так и в качестве значения параметров выбора.

Измените ваши Job внешние ключи ( ClientID и PlumberID ) на int , чтобы они соответствовали фактическому типу PK, а затем установите значение ваших параметров на ID свойство:

 ClientNameSL = new SelectList(clientQuery.AsNoTracking(),
        "ID", "FullName", selectedClient);
  

Комментарии:

1. Спасибо за совет! Но не могли бы вы помочь мне отобразить номер мобильного телефона клиента, когда клиент выбран в выпадающем списке? При выборе выпадающего списка отображается список клиентов, но я хочу, чтобы данные этих клиентов отображались в поле CellNumber страницы заданий.

2. Для этого потребуется какой-то JavaScript. Вы можете использовать несколько подходов. Проще говоря, у вас может быть просто конечная точка, которая возвращает данные клиента для определенного идентификатора клиента в виде JSON. Затем вы можете отправлять AJAX-запрос к этой конечной точке всякий раз, когда выбранный параметр изменяется, путем привязки к событию onchange выбора. При успешном обратном вызове AJAX вы должны взять возвращенные данные JSON и просто обновить текст соответствующего элемента.

3. Вероятно, вы захотите использовать библиотеку на стороне клиента, такую как Vue, Angular и т.д., Которая может обрабатывать привязку данных и шаблоны. Это значительно упростит выполнение этих обновлений. В случае, если это не очевидно, это выходит далеко за рамки Stack Overflow, поэтому вам нужно провести собственное исследование и попытаться найти решение самостоятельно. Если по пути вы столкнетесь с конкретными проблемами, вы можете задать вопросы о них здесь.

4. Спасибо за вашу помощь. Я ценю это. Я рассмотрю то, что вы предложили, и посмотрю, появятся ли какие-либо решения.