Combining Asp.netcore Razor Pages with Vue.js is my goal for a new project. The page modal will return the necessary data, which the Vue controller will then utilize for client-side rendering and other UI interactions.
Pagemodal.cs
public class SampleQuestionModel : PageModel
{
public List<QuestionViewModal> questionViewModals = new List<QuestionViewModal>();
public void OnGet()
{
MYEXAMAPI.Controllers.QuestionApiController questionApiController = new MYEXAMAPI.Controllers.QuestionApiController();
questionViewModals = questionApiController.GetQuestion();
}
}
This is how I showcase the data using Razor:
@page
@model MYEXAM.SampleQuestionModel
@{
ViewData["Title"] = "SampleQuestion";
}
<h1>SampleQuestion</h1>
<script src="~/js/vue.js"></script>
<ul id="app">
<li v-for="item in questionViewModals">
{{ item.fullQuestions }}
</li>
</ul>
<script>
var vueApp = new Vue({
el: '#app',
data: {
questionViewModals: @Json.Serialize(Model.questionViewModals) //This is not working
}
})
</script>