#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. Спасибо за вашу помощь. Я ценю это. Я рассмотрю то, что вы предложили, и посмотрю, появятся ли какие-либо решения.