110,534
社区成员
发帖
与我相关
我的任务
分享.net mvc 分部页如何使用vue.js
这是—layout.cshtml
这是topchml
这是MainPage.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title-中海油深水勘探规划编制系统</title>
<script src="~/js/vue.min.2.6.js"></script>
<script src="~/js/Element-ui.js"></script>
<script src="~/js/jquery-1.11.3.min.js"></script>
<link href="~/css/Element-ui.css" rel="stylesheet" />
<link href="~/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="~/css/main.css" rel="stylesheet" />
<link href="~/css/scrollbar.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
</body>
</html>
这是topchml
@{
Layout = null;
}
<div id="_top" style="height:100px; width:100%; background-color:azure;">
用户：{{userName}}
<a href="/Public/MainPage">首页</a>
<a href="/BasicData/BasicData">基础数据</a>
<a href="">方案编制</a>
<input name="file" type="file" id="file" style="display:none" onchange="fileUpload()" />
<input name="submit" type="button" id="btn-excel" class="flat_bt" value="导入Excel" style="float:left;margin-left:5px" onclick="selectFile()" />
</br>
</br>
姓名：<input type="text" name="userName" id="userName" />
密码：<input type="password" name="Userpass" id="userPass" />
<input type="button" name="userSubmit" id="userSubmit" value="提交" onclick="submitUser()" />
</div>
<script>
var _top = {
el: '#_top',
data() {
return { userName: getUser() }
}
}
function getUser() {
var vR = '';
$.ajaxSettings.async = false;
$.post("/Public/GetUser", function (msg) {
vR = msg;
});
return vR;
}
var Ctor = Vue.extend(_top);
new Ctor().$mount('#app');
</script>
这是MainPage.cshtml
@{
ViewBag.Title = "方案编制";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="app">
<el-container class="wrapper">
<el-header id="_header" style="height:100px;">
@{Html.RenderPartial("_Top", "");}
</el-header>
<el-container style="width:100%; height:calc(100% - 100px); overflow:hidden;">
<el-aside width="300px">
<div class="title"><strong>方案编制</strong></div>
<ul class="content_ul">
<li v-on:click="open_url('Setup')">规划区域设置</li>
<li v-on:click="open_url('Statistics')">统计分析</li>
</ul>
</el-aside>
<el-main id="_main"></el-main>
</el-container>
</el-container>
</div>
<script>
new Vue({
el: "#app",
data: {}
})
$(function () {
open_url('Setup');
})
function open_url(url) {
var self = this;
$.post(url, function (result) {
$('#_main').html(result);
})
}
</script>
...全文
请发表友善的回复…
发表回复
非专业开发Five 2019-09-16
- 打赏
- 举报
先想清楚自己想干什么，再想想自己想怎么做。
Html.RenderPartial内仅渲染元素不包含js代码即可。
SoulRed 2019-09-16
- 打赏
- 举报
推荐你看一下element
https://element.eleme.cn
快速开发
正怒月神 2019-09-16
- 打赏
- 举报
我觉得你既然使用了 vue。
就不要用.net mvc这种绑定机制了。
直接vue访问webapi多赶紧方便呢
淳朴的男孩子 2019-09-16
- 打赏
- 举报
新手小白第一次过来报告学习
dy2017 2019-09-16
- 打赏
- 举报
最后还是采用了下面这位仁兄的建议，结帖给分，谢谢各位。
dy2017 2019-09-15
- 打赏
- 举报
大佬具体怎么做，引用js文件也能，我只是不想把Html代码作为js的一部分
u011447236 2019-09-12
- 打赏
- 举报
或者在cshtml页面里的js脚本前面加个标识符@section
LikeWatchStar 2019-09-12
- 打赏
- 举报
不要把js写在cshtml页面里，重新建立一个js文件，在这个js里面写好代码，然后再在cshtml文件引入
dy2017 2019-09-12
- 打赏
- 举报
求教各位大侠，这个问题怎么解决，还是代码哪儿写的有问题
