Блог

Я работаю над Asp.Net Основное веб-приложение MVC и использование VueJS для рендеринга / манипулирования во внешнем интерфейсе. В конечном счете, я хочу реализовать Master-Detail в режиме просмотра Razor с использованием VueJS, где строки сведений (позиции) могли бы добавляться / удаляться динамически, но пока я просто пытаюсь получить доступ к объектной модели домена List<T> типа в VueJS Data и пытаюсь динамически добавлять / удалять строки данных.

Вот мой код:

ViewModel

 public class VueJsTestModelDetail
{
    public int DetailId { get; set; }
    public int Id { get; set; }
    [EmailAddress]
    public string Email { get; set; }
}
  

Контроллер

 public IActionResult Vue()
{
    VueJsTestModel viewModel = new VueJsTestModel();
    viewModel.Id = 1;
    viewModel.Name = "Saud Nasir";
    viewModel.Designation = "Software Engineer";

    for (int i = 0; i < 5; i  )
    {
        viewModel.VueJsTestModelDetails.Add(new VueJsTestModelDetail { Id = 1, DetailId = i   1, Email = "xyz_"   (i   1).ToString()   "@abc.com" });
    }
    return View(viewModel.VueJsTestModelDetails);
}
  

Режим просмотра Razor

 @model List<Vue.js_Hello_World.Models.VueJsTestModelDetail> 

<div id="app">
    <div class="container border" style="border: thin;">
        <div class="mt-2">
            <form asp-action="Vue">
                <div class="form-group" style="text-align:right; width:100%">
                    <input type="submit" value="Save" class="btn btn-primary btn-sm" />
                    <input v-on:click="View" type="button" value="View" class="btn btn-success btn-sm" />
                </div>
                <ul>
                    <li v-for="(detail, index) in DetailData">
                        <h4>{{detail.DetailID}}</h4>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>
  

Скрипт VueJS

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
var vm = new Vue({
    el: "#app",
    data: {
        DetailData: '@Model',
     },
    methods: {
        View: function () {
            alert(this.DetailData);
        }
    }
});
</script>
  

Я хочу заполнить его DetailData значениями, которые я отправляю с контроллера, но в этом коде DetailData заполняются строки, содержащие имя типа данных. (например, « List<Vue.js_Hello_World.Models.VueJSTestModelDetails> «). Я хочу сохранять фактические значения в DetailData при загрузке страницы, например:

 DetailData[0].DetailID = 1, 
DetailData[0].Id = 0, 
DetailData[0].Email = "xyz_1@abc.com"
  

Происходит то, что вывод @Model эквивалентен вызову toString() для модели. Вместо этого то, что вы хотите сделать, это вывести сериализованную версию объекта в формате json.

Замените строку

 DetailData: '@Model',
  

с помощью строки

 DetailData: @Json.Serialize(Model),