Javascript 将Asp.net核心页面模式对象转换为Vue、js数据对象

我尝试在一个项目中混合使用Asp.netcore Razor页面和Vue.js，其中返回的页面模式将包含数据，Vue控制器将使用该数据进行客户端渲染和其他UI交互

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();
        }
    }

public类SampleQuestionModel:PageModel
{
public List questionViewModals=新列表（）；
公共互联网
{
MYEXAMAPI.Controllers.QuestionApicController QuestionApicController=新的MYEXAMAPI.Controllers.QuestionApicController（）；
questionViewModals=QuestionApicController.GetQuestion（）；
}
}

这是我的剃须刀，我使用页面模式来显示数据

@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>

@page
@模型MYEXAM.SampleQuestionModel
@{
ViewData[“Title”]=“SampleQuestion”；
}
抽样问题


{{item.fullQuestions}


var vueApp=新的Vue({
el:“#应用程序”，
数据：{
questionViewModals:@Json.Serialize（Model.questionViewModals）//这不起作用
}
})

对ASP.net不太清楚——但尝试将

@Json.Serialize（Model.questionViewModals）

这段代码移动到

创建的

钩子中

<script>

var vueApp = new Vue({
    el: '#app',
    created() {
        this.questionViewModals = @Json.Serialize(Model.questionViewModals);
    },
    data: {
        questionViewModals: null
    }
})
</script>

var vueApp=新的Vue({
el:“#应用程序”，
创建（）{
this.questionViewModals=@Json.Serialize（Model.questionViewModals）；
},
数据：{
questionViewModals:null
}
})

对ASP.net不太清楚——但尝试将

@Json.Serialize（Model.questionViewModals）

这段代码移动到

创建的

钩子中

<script>

var vueApp = new Vue({
    el: '#app',
    created() {
        this.questionViewModals = @Json.Serialize(Model.questionViewModals);
    },
    data: {
        questionViewModals: null
    }
})
</script>

var vueApp=新的Vue({
el:“#应用程序”，
创建（）{
this.questionViewModals=@Json.Serialize（Model.questionViewModals）；
},
数据：{
questionViewModals:null
}
})

这是一个工作代码，您可以参考：

@page
@model RazorPages3_0Test.SampleQuestionModel

<h1>SampleQuestion</h1>

<ul id="app">
  <li v-for="item in questionViewModals">
    {{ item.fullQuestions }}
  </li>
</ul>

@section Scripts
{
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var vueApp = new Vue({
      el: '#app',
      data: {
        questionViewModals: @Json.Serialize(Model.questionViewModals) 
      }
   })
  </script>
 }

@page
@模型RazorPages3\u 0测试样本问题模型
抽样问题


{{item.fullQuestions}


@节脚本
{
var vueApp=新的Vue({
el:“#应用程序”，
数据：{
questionViewModals:@Json.Serialize（Model.questionViewModals）
}
})
}

结果

---

您可以从

下载Vue.js这是一个工作代码，您可以参考：

@page
@model RazorPages3_0Test.SampleQuestionModel

<h1>SampleQuestion</h1>

<ul id="app">
  <li v-for="item in questionViewModals">
    {{ item.fullQuestions }}
  </li>
</ul>

@section Scripts
{
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var vueApp = new Vue({
      el: '#app',
      data: {
        questionViewModals: @Json.Serialize(Model.questionViewModals) 
      }
   })
  </script>
 }

@page
@模型RazorPages3\u 0测试样本问题模型
抽样问题


{{item.fullQuestions}


@节脚本
{
var vueApp=新的Vue({
el:“#应用程序”，
数据：{
questionViewModals:@Json.Serialize（Model.questionViewModals）
}
})
}

结果

---

您可以从

下载Vue.js，您所说的“这不起作用”是什么意思？您是否使用Chrome开发工具检查js中是否有错误或

@Json.Serialize（Model.questionViewModals）

的结果？渲染页面的实际结果是什么？是的，它不起作用，@hardik answer解决了问题。但不确定你所说的“这不起作用”是什么意思？您是否使用Chrome开发工具检查js中是否有错误或

@Json.Serialize（Model.questionViewModals）

的结果？渲染页面的实际结果是什么？是的，它不起作用，@hardik answer解决了问题。但不知道为什么