我在几个局部视图中有几个JS代码。
我认为将所有这些代码放在单独的JS文件中以将JS代码与HTML代码分开是个好主意。
但是你如何处理JS中的MVC代码?
以下示例是我在部分View中看到的JS代码。我想放入JS文件,但JS代码有MVC代码@Url.Action("ResultForm", "File")
,它不会在JS文件中执行。
有什么建议吗?
Javascript代码
<script type="text/javascript">
var varTimerSpeed = 5000;
var varTimerInterval;
var onlyOneInstance = false;
startTimer();
function startTimer() {
onlyOneInstance = false;
varTimerInterval = setInterval(loadResultForm, varTimerSpeed);
}
function loadResultForm() {
if (onlyOneInstance) return;
clearInterval(varTimerInterval);
onlyOneInstance = true;
$.ajax({
url: '@Url.Action("ResultForm", "File")',
data: '',
dataType: 'html',
success: function (data) {
$('#ResultForm').html(data);
startTimer();
}
});
};
</script>
答案 0 :(得分:3)
我假设使用Razor部分仅用于js代码不是一个选项。在这种情况下,您可以使用这种方法:
在view.cshtml中
<script type="text/javascript">
var Namespace.urlForModule = '@Url.Action("ResultForm", "File")';
</script>
<script type="text/javascript" src="customScript.js"></script>
在你的customScript.js
中$.ajax({
url: Namespace.urlForModule,
})
这个想法是从js代码中分离出Asp.Net MVC特定代码。
你想要的方式取决于你。正如其他人建议的那样,你可以将data- *属性附加到某个div并读取它们。我更喜欢这个,因为它清楚地表达了我的意图。
答案 1 :(得分:1)
解决方案是使用所需的动态值创建meta
标记或data-*
属性,并使用JavaScript捕获它。这样,您可以完全分离代码并进行微小更改。
答案 2 :(得分:0)
创建一个文件“somescript.js”并将代码放在一个唯一的公共函数中,提取硬编码的外部依赖项并将它们替换为参数。
var startXyz = function(resultFormUrl) {
var varTimerSpeed = 5000;
var varTimerInterval;
var onlyOneInstance = false;
startTimer();
function startTimer() {
onlyOneInstance = false;
varTimerInterval = setInterval(loadResultForm, varTimerSpeed);
}
function loadResultForm() {
if (onlyOneInstance) return;
clearInterval(varTimerInterval);
onlyOneInstance = true;
$.ajax({
url: resultFromUrl,
data: '',
dataType: 'html',
success: function (data) {
$('#ResultForm').html(data);
startTimer();
}
});
};
};
然后,在您的页面中执行:
<script>
$(function(){
startXyz('@Url.Action("ResultForm", "File")');
});
</script>
现在你有了一个模块化的功能,可以启动你的页面/部分和一个不直接取决于服务器状态的脚本文件,可以在同一个页面或另一个页面上重复使用。
如果每页多次呈现部分视图,则此方法特别有用。
答案 3 :(得分:0)
您可以使用网址添加隐藏字段:
// View:
@Html.Hidden("LoadResultFormUrl", @Url.Action("ResultForm", "File"))
// js-file
function loadResultForm() {
url = $("#LoadResultFormUrl").val();
...
};
答案 4 :(得分:0)
为什么不创建一个只包含js代码的局部视图
并执行renderpartial
而不是添加脚本标记?