Какой тип основного элемента MVC asp.net я должен создать для поля Phone?

Question

У меня есть поле телефона, как показано ниже на моей странице Razor ядра asp.net . Я создал три поля ввода, как показано ниже, и я вижу заполненную модель.

<input asp-for="Phone1" /> <input asp-for="Phone2" /> <input asp-for="Phone3" />

Я хочу преобразовать этот элемент управления в повторно используемый элемент управления, например пользовательский элемент управления веб-формы asp.net . Я рассмотрел следующие два варианта, но эти типы компонентов доступны только для чтения и не могут привязать тег input к модели.

1. Просмотр компонентов
2. Tag helper

Как создать компонент телефона, который можно использовать на других страницах бритвы?

Answer 1

Создайте модель представления, которая будет содержать каждое из свойств вашего объекта.

~ / ViewModels / Shared / PhoneNumberViewModel.cs

public class PhoneNumberViewModel
{
    public string Phone1 { get; set; }
    public string Phone2 { get; set; }
    public string Phone3 { get; set; }
}

Далее следует создать вид компонента. Если это будет использоваться в форме, вам нужно создать этот шаблон в папке «EditorTemplates». Это даст входам их связанное «имя», которое будет необходимо при публикации данных на контроллере. Если вы просто отображаете эту информацию, я бы создал шаблон в папке «DisplayTemplates».

~ / Views / Shared / EditorTemplates / PhoneNumber.cshtml

@Model PhoneNumberViewModel

<label>Phone</label>
@Html.TextBoxFor(x => x.Phone1) - @Html.TextBoxFor(x => x.Phone2) - @Html.TextBoxFor(x => x.Phone3)

Теперь, когда у вас есть шаблон, обязательно добавьте этот компонент как свойство вашей ViewModel, с которым вы хотите использовать его. Я собираюсь использовать HomeViewModel в качестве примера

~ / ViewModels / Главная / HomeViewModel.cs

public class HomeViewModel
{
    public HomeViewModel()
    {
         PhoneNumber = new PhoneNumber();
    }

    public PhoneNumberViewModel PhoneNumber { get; set; }
}

Обязательно создайте экземпляр объекта, если его еще нет в контроллере. Об объекте PhoneNumber следует заботиться, потому что он создан внутри конструктора HomeViewModel.

~ / Контроллеры / HomeController.cs

public class HomeController : Controller
{
    public IActionResult Index() 
    {
        var vm = new HomeViewModel();

        return View(vm);
    }
}

Затем, наконец, в самом представлении, просто вызовите EditorFor и передайте объект PhoneNumber.

/ Views / Home / Index.cshtml

@ Модель HomeViewModel

@Html.EditorFor(x => x.PhoneNumber)

Примечание: если вы создали шаблон в «DisplayTemplates» вместо «EditorTemplates», вам нужно будет вместо этого использовать @ Html.DisplayFor (x => x.PhoneNumber). По сути, встроенная вспомогательная функция MVC знает, какую папку искать, основываясь на используемой вами функции.