ASP MVC 3.0 Комплексное представление

Question

Я занимаюсь разработкой приложения для управления заказами на продажу с использованием ASP.NET MVC 3.0. Мне нужно разработать страницу, на которой можно добавить данные клиента.

Данные клиента включают

public class Customer
    {
        public int ID { get; set; }
        public string Code { get; set; }
        public string Name { get; set; }
        public string Alias { get; set; }
        public int DefaultCreditPeriod { get; set; }        
        public Accounts Accounts { get; set; }
        public IList<Address> Addresses { get; set; }
        public IList<Contact> Contacts { get; set; }
    }

public class Accounts
    {
        public int ID { get; set; }
        public string VATNo { get; set; }
        public string CSTNo { get; set; }
        public string PANNo { get; set; }
        public string TANNo { get; set; }
        public string ECCNo { get; set; }
        public string ExciseNo { get; set; }
        public string ServiceTaxNo { get; set; }
        public bool IsServiceTaxApplicable { get; set; }
        public bool IsTDSDeductable { get; set; }
        public bool IsTCSApplicable { get; set; }
    }

public class Address 
    {
        public int ID { get; set; }
        public AddressType Type { get; set; }        
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string Line3 { get; set; }
        public string Line4 { get; set; }
        public string Country { get; set; }
        public string PostCode { get; set; }
    }

public class Contact
    {
        public int ID { get; set; }
        public ContactType Type { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string PhoneNumber { get; set; }
        public string Extension { get; set; }
        public string  MobileNumber { get; set; }
        public string EmailId { get; set; }
        public string FaxNumber { get; set; }
        public string Website { get; set; }
    }

Клиент Требуется одна страница для заполнения всех данных клиента (Общая информация, Информация об учетной записи, Информация об адресе и Контактная информация). Будет несколько адресов (выставление счетов, доставка и т. Д.) И несколько контактов (продажа, покупка). Я новичок в MVC. Как создать представление для вышеупомянутого и динамически добавить несколько адресов?

Answer 1

Я часто создаю модели-оболочки, чтобы справиться с подобной ситуацией, например

public class CustomerWrapperModel
{
    public Customer Customer { get; set;}
    public Accounts Accounts { get; set;}
    public List<Address> AddressList { get; set}

    //Add
    public CustomerWrapperModel()
    {

    }

    //Add/Edit
    public CustomerWrapperModel(Customer customer, Accounts accounts, List<Address> addressList)
    {
        this.Customer = customer;
        this.Accounts = accounts;
        this.AddressList = addressList;
    }
}

затем объявите представление типа CustomerWrapperModel и используйте такие редакторы, как:

@model MyNamespace.CustomerWrapperModel

@Html.EditorFor(model => model.Customer)
@Html.EditorFor(model => model.Accounts)
@Html.EditorFor(model => model.AddressList)

и иметь контроллер для получения сообщения, которое выглядит следующим образом:

[HttpPost]
public ActionResult(Customer customer, Accounts accounts, List<Address> addressList)
{
   //Handle db stuff here
}

Что касается динамического добавления адресов, я нашел лучший способ сделать это, если вы используете проверку MVC и хотите правильно структурировать список с правильными индексами списка, чтобы в вашем контроллере был параметр List, а именно: отправить текущие адреса на вспомогательный контроллер следующим образом:

[HttpPost]
public PartialResult AddAddress(List<Address> addressList)
{
   addressList.Add(new Address);

   return PartialView(addressList);
}

затем получим частичное представление, которое просто снова отображает поля адреса:

@model List<MyNamespace.Address>

@{
    //Hack to get validation on form fields
    ViewContext.FormContext = new FormContext();
}

@Html.EditorForModel()

убедитесь, что все поля адресов находятся в одном контейнере, а затем вы можете просто перезаписать существующие поля возвращенными данными, и ваши новые поля адреса будут добавлены внизу. После того, как вы обновили свой контейнер, вы можете сделать что-то вроде этого для повторной проверки:

       var data = $("form").serialize(); 

       $.post("/Customer/AddAddress", data, function (data) {

            $("#address-container").html(data);

            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");

        });

NB. Я знаю, что у некоторых людей есть проблема с этим, так как требуется добавление полей на страницу со стороны сервера, которые могут быть легко добавлены на стороне клиента (я всегда делал это на стороне клиента, но пробовал один раз с этим метод и никогда не возвращался). Причина, по которой я это делаю, заключается в том, что это самый простой способ сохранить правильность индексов в элементах списка, особенно если у вас есть вставки, а также добавления, и у ваших объектов много свойств. Кроме того, используя частичное представление для визуализации данных, вы можете гарантировать, что проверка будет сгенерирована для новых полей для вас из коробки, вместо того, чтобы вручную вырезать проверку для вновь добавленных полей на стороне клиента. Компромисс в большинстве случаев - незначительный объем данных, передаваемых во время запроса ajax.

Вы также можете выбрать более точные поля, которые вы отправляете в контроллер AddAddress, как вы можете видеть, я просто отправляю всю форму на контроллер и игнорирую все, кроме полей адреса, я использую быстрые серверы и дополнительные (незначительные) накладные расходы на нежелательные поля формы незначительны по сравнению со временем, которое я мог бы потратить впустую, кодируя функциональность этого типа более эффективным способом пропускной способности.

Answer 2

Хороший вопрос: D для обычных навигационных свойств, таких как Accounts, сделать это не сложно:

@Html.EditorFor(model => model.Accounts.ID)

@Html.EditorFor(model => model.Accounts.VATNo)

будет делать то, что вы хотите. Но для свойств навигации по коллекции (Addresses и Contacts) вы не можете сделать это в одном месте по умолчанию. Я предлагаю вам использовать другую страницу для Addresses (и одну для Contacts). Потому что это самый простой способ. Но если вы хотите сделать это в одном месте (а также без AJAX-запросов), вы можете создать представление с помощью Customer, использовать строительные леса для модель , и это просто свойства навигации , а для списков (Addresses, Contacts) вы должны добавить их с JavaScript к полям input (например, для каждого добавленного Address, поместите его в Array) и отправлять поля на сервер. На сервере вы можете получить основную модель и простые свойства по умолчанию для привязки модели, а для списков вы можете: 1) создать собственную привязку модели, 2) проанализировать их из введенных строк самостоятельно. Хороший замок

Answer 3

Вы передаете свой корневой объект модели вызову View в вашем контроллере следующим образом:

public ActionResult Index() {
   var customer = GetCustomer(); // returns a Customer
   return View(customer);
}

И тогда ваш взгляд выглядит примерно так:

@model Customer

<!DOCTYPE html>
<!-- etc., etc. -->
<h1>Customer @Model.Name</h1>
<ul>
@foreach (var address in Model.Addresses) {
   <li>@address.Line1</li>
}
</ul>

Получается картинка.

Приведенный выше код зависит от директивы @model, которая появилась в ASP.NET MVC 3 (см. это сообщение в блоге ).