Создать новых родителей и детей на одной странице бритвы - PullRequest
Новая
       5

Создать новых родителей и детей на одной странице бритвы

0 голосов
/ 05 февраля 2019

Я знаю, что это существующий вопрос, но я не видел такого, который отвечал бы моему сценарию в asp.net core 2.1 mvc.Кроме того, я довольно нуб в этой области, и это мой самый первый вопрос здесь, так что заранее извините.Вопрос прост (я думаю): используя asp-net core 2.1 и mvc, как мне создать страницу бритвы для метода create, где я могу динамически создавать родительские и дочерние отношения на стороне клиента, получая все данные впост на сервере?Что у меня пока (простой код):

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

    public class BusinessCategory
        {
            public BusinessCategory()
            {
                SubBusinessCategories = new List<SubBusinessCategory>();
            }

            [Key]
            public long ID { get; set; }

            public string Code { get; set; }

            [Required]
            public string Name { get; set; }

            public virtual ICollection<SubBusinessCategory> SubBusinessCategories { get; set; }
        }

Дочерняя модель: 

public class SubBusinessCategory
    {
        [Key]
        public long ID { get; set; }

        public string Code { get; set; }

        [Required]
        public string Name { get; set; }

        [Required]
        public long BusinessCategoryID { get; set; }
        [ForeignKey("BusinessCategoryID")]
        public virtual BusinessCategory BusinessCategory { get; set; }
    }

ViewModel (я думаю, что это неправильно... но это я пытаюсь что-то получить): 

public class BusinessCategoryViewModel
    {
        public BusinessCategory BusinessCategory { get; set; }
        public List<SubBusinessCategory> SubBusinessCategories { get; set; }
    }

Родитель GET Создать действие в контроллере: 

[BindProperty]
public BusinessCategoryViewModel BusinessCategoryVM { get; set; }

public IActionResult Create()
{
    return View(BusinessCategoryVM);
}

Создать представление: 

<form method="post" asp-action="Create">
    <div class="p-4 border rounded">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group row">
            <div class="col-2">
                <label asp-for="BusinessCategory.Code" class="control-label"></label>
            </div>
            <div class="col-5">
                <input asp-for="BusinessCategory.Code" class="form-control" />
            </div>
            <span asp-validation-for="BusinessCategory.Code" class="text-danger"></span>
        </div>
        //
        // all other properties...
        //
        <br />
        <h2 class="text-info">CHILDS</h2>
        <input type="button" value="Add" class="btn btn-primary" onclick="addSubBusinessCategory()" />
        <br />
        <br />
        <div id="subBusinessCategories" class="p-4 border rounded">
            // HERE I WOULD LIKE TO ADD THE CHILDS 
        </div>

        <br />
        <br />
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
            <a asp-action="Index" class="btn btn-success">Back to List</a>
        </div>
    </div>
</form>

IЯ знаю, что я скучаю по многим вещам ... Должен ли я использовать частичное представление для childs и добавлять их с помощью вызовов ajax и jquery, или что-то еще?Кто-нибудь, кто может направить меня в правильном направлении, пожалуйста?

1 Ответ

0 голосов
/ 05 февраля 2019

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

Vanilla JS

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

  1. Есть индекс того, сколько строк у вас есть
  2. Когда вы нажимаете кнопку, добавляете предварительно написанный ввод в контейнер
  3. Затем вы можете использовать индекс для удаления потомков, создать индекс данных, атрибут.

container.appendChild("<input name="SubBusinessCategories[index].Property" />")

Ajax Request (fetch)

Похож на Vanilla JS, но на этот раз ваш шаблон живет в PartialView.cshtml.Это хорошо, если вам нужно запустить некоторый внутренний код перед рендерингом шаблона или каким-либо образом заполнить значения в шаблоне.

  1. В этом случае вам все равно нужно сохранить index и передатьперед обработкой рендеринга.

fetch(UrlToGetPartial).then(res => {container.appendChild(res)})

Примечание: если вы собираетесь начать удаление записей, вам нужно будет изменить индексв каждой записи.Скажем, если у вас есть 5 в списке, индекс от 0 до 4. Если вы удалите 1, вы получите 0, 2, 3, 4. Таким образом, при отправке вы получите только 1 запись с индексом 0.

JS Framework (Vue)

Вероятно, самый простой для запуска и запуска, просто добавьте файл библиотеки в свой проект.Это довольно мощный инструмент, который делает ваш код чище, чем другие решения.

Ваш Javascript 

var app = new Vue({
    el: '#subBusinessCategories',
    data: {
        rows: []
    },
    methods: {
         addRow(){
             this.rows.push(this.rows.length)
         },
         removeRow(index){
             this.rows.splice(index, 1)
         },
         createName(index, property) {
              return 'SubBusinessCategories[' + index + '].' + property;
         }
    }
})

В вашем HTML 

<div id="subBusinessCategories" class="p-4 border rounded">
     <button v-on:click="addRow()">Add</button>
     <div v-for="(el, index) in rows">
           <input v-bind:name="createName(index, 'Code')" />
           <button v-on:click="removeRow(index)">Add</button>
     </div>
</div>

PS: ничего из этого не проверено,Решение Vue не идеально, но подойдет для новичка, и все же позволяет использовать Razor.

...