Сайт .net-core с частичными полями формы интерфейса Vue.js

Question

Я пытаюсь создать сайт с частичной реализацией Vue.js, я смотрю на использование Vue.js, поскольку, насколько я понимаю, он не требует сайта SPA, как другие JS-фреймворки, и я считаю, что этот фреймворк помеченкоробки требуются.

У меня есть базовая форма, которую я хочу использовать для создания, обновления и удаления объектов.

Данные принимаются через SAL, которая вызывает API, все вызовы Create, Update и Deleteбудет проходить через тот же API.

Я смог сделать HttpGet и HttpPost, чтобы получить и обновить данные и показать их в простой форме.

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

Получена ошибка У меня следующий код:

.cshtml page

@model bms.accessbookings.com.Types.ViewModels.ShowVenueViewModel

@{
    ViewData["Title"] = "Venue";
}

<div  class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-content">
        <div class="row">
            <div id="venueForm">
                Venue ID: <input type="text" v-model="venue.venueId" />
                <br/>
                Venue Name: <input type="text" v-model="venue.venueName" />
                <br/>
                Address: <input type="text" v- 
                             model="venue.address.addressLine1"/>
                <br/>
                Line 2: <input type="text" v- 
                             model="venue.address.addressLine2"/>
                <br/>
                City: <input type="text" v-model="venue.address.city"/>
                <button type="button" v-on:click="sendToServer" 
                     style="padding: 0; border: none; background: none; 
                     cursor: pointer;">
                     <i class="la la-save"></i>
                </button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script src="/js/venueform.js" type="text/javascript"></script>
}

.cs ViewModel:

public class ShowVenueViewModel
{
    public int VenueId { get; set; }
    public string VenueName { get; set; }
    public Address Address { get; set; }
}

Элемент адреса содержит Line1, Line2, City и т. Д.

VenueController Получить и отправить:

[HttpGet]
    [Route("GetVenue")]
    public ShowVenueViewModel GetVenue(int venueId = 0)
    {
        ShowVenueViewModel viewModel = new ShowVenueViewModel
        {
            Address = new Address()
        };

        if (venueId > 0)
        {
            viewModel = _venueImplementation.GetShowVenueViewModel(venueId);
        }

        return viewModel;
    }

    [HttpPost]
    [Route("SaveVenue")]
    public ShowVenueViewModel SaveVenue([FromBody]ShowVenueViewModel venueViewModel)
    {
        return venueViewModel;
    }

.js page:

$(document).ready(function() {

var venueId = window.location.pathname.substring(7);

const vm = new Vue({
el: '#venueForm',
data () {
      return {
        venue: {}
    }
},
props: {
  currentevent: Object
},
  created() {
    Object.assign(this.venue, this.currentevent || {});
  },
  mounted: function() {
    axios.get('/venue/GetVenue', { params: { venueId: venueId } }).then(response => {
      this.venue = response.data;
    });
},
  methods: {
    sendToServer: function () {
      var self = this;
      console.log("Venue getting updated");

      axios.post('/venue/SaveVenue', self.venue)
        .then(response => {
          this.venue = response.data;
          console.log("Venue Updated");
        });
    }
  }
 });
});

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

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

Все еще очень плохо знаком с vue.js, и мне трудно найти руководства, которые не указывают на сайты в стиле CLI или SPA.

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

Answer 1

Хорошо, ошибка, которую вы получаете, исходит от вашего шаблона (страница .cshtml).Вам нужно либо убедиться, что значение venue.address всегда имеет значение, либо, что безопаснее, проверить наличие venue.address.addressLine1 перед его отображением.

Когда вы получаете ошибку в функции рендеринга, vue не может сообщить вам номер строки.Но вы знаете, что это где-то в шаблоне, и, как правило, его нетрудно найти.Ваши шаблоны должны быть короткими :-) (показанный в порядке).