时间戳

首页 > 解决方案 > 带有 ASP.NET MVC 的 Vue.js

asp.net-mvc - 带有 ASP.NET MVC 的 Vue.js

问题描述

我刚刚开始尝试Vue.js并将其应用于现有ASP.NET MVC 5应用程序。

该应用程序有一个带有许多输入控件的表单：

<div id="vueApp">
    ...
    @Html.TextBoxFor(model => model.FullName, new { @v_model = "fullName", @class = "form-control input" })

    @Html.TextBoxFor(model => model.Branch, new { @v_model = "branch", @class = "form-control input" })

有些地方最后有一个摘要，让用户在提交之前查看数据：

<label>Name</label>: {{ fullName }}

<label>Branch</label>: {{ branch }}

脚本如下：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script type="text/javascript">
    myObject = new Vue({
        el: '#vueApp',
        data: {
            fullName: '',
            branch: ''
        }
    })
</script>

如果从所有字段为空开始，这很好。但是，如果某些字段使用来自服务器的值进行初始化，或者在用于编辑现有记录时，这些字段将显示为空。

标签： asp.net-mvcvue.js

解决方案

可能有更优雅的方法可以做到这一点，但我认为应该有效的一种简单方法是更新您的脚本：

<script type="text/javascript">
    var fullNameVal = $('#FullName').val();
    var branchVal = $('#Branch').val();

    myObject = new Vue({
        el: '#vueApp',
        data: {
            fullName: fullNameVal,
            branch: branchVal
        }
    })
</script>

推荐阅读