使用Jquery

时间:2016-12-01 08:18:40

标签: javascript jquery html razor

在我的仪表板上,我有以下div工作正常,当页面加载时,操作返回一个视图

    <div id="result1" class="col-xs-2 col-sm-4">
        @Html.Action("index", "Gauge1", new { p1 = 2025, p2 = 8, p3 = 101 })                         
    </div>

如何在JQuery中@Html.Action时将<div id = "result1"生成的视图加载到(document).ready

我试过了,但它没有用。

<script type="text/javascript">
$(document).ready(function(){
  $('#result1').load(@(Html.Action("index", "Gauge1", new { p1 = 2025, p2 = 8, p3 = 101 })));
       }); 
</script>

<div id="result1" class="col-xs-2 col-sm-4">
</div>

4 个答案:

答案 0 :(得分:1)

Url.Action辅助方法用于生成网址。它通过编码所有参数生成有效的URL。

因此,在您的示例中,&符号将被编码,您的网址将如下所示:

/Gauge1/index?p1=2025&amp;p2=8&amp;p3=101

Razor中,使用@ block的每个内容都会自动由Razor进行HTML编码。

Url.Action只返回一个字符串,这就是为什么&amp;得到编码。

您需要使用@Html.Raw来阻止&amp;。

的编码

请试试这个:

<script type="text/javascript"> 
     $(document).ready(function(){
     var url = "@(Html.Raw(Url.Action("index","Gauge1", new { p1=2025, p2=8,p3=101})))";
     $('#result1').load(url);
</script>

<div id="result1" class="col-xs-2 col-sm-4">
</div>

答案 1 :(得分:1)

作为指导,我建议您避免直接在视图中注入Javascript代码。这使您无法使用TypeScript和单独的JS文件(因此也是最酷的调试选项)。注入DOM元素数据属性并从您的JS文件中选择(或最坏情况下注入全局变量并拾取)...

e.g。向您的DIV添加Url.Action(并添加类似loadme的类):

<div id="result1" class="col-xs-2 col-sm-4 loadme" data-url="@(Url.Action("index", "Gauge1", new { p1 = 2025, p2 = 8, p3 = 101 }))">
</div>

然后在脚本中(最好是一个单独的TS / JS文件):

$(function(){
    $('.loadme').each(function(){
         var $div = $(this);
         $div.load($div.data('url'));
    })
});

这种属性和单独的代码更像是编写插件/小部件,您可以毫不费力地调试代码。以上内容将支持加载任意数量的div,而原始版本则是硬连线。

说明:

  • $(function(){...});$(document).ready的快捷方式,也是目前首选的方法,

答案 2 :(得分:0)

您应该从获取视图的位置传递给jquery .load()函数url

Html.Action帮助器呈现View(它返回html页面)。

您应该使用Url.Action帮助程序生成网址。

$('#result1').load('@(Url.Action("index", 
                      "Gauge1", 
                      new { p1 = 2025, p2 = 8, p3 = 101 }))');

答案 3 :(得分:0)

您可以尝试这样

$(document).ready(function(){
    $('#result1').load("/Gauge1/index?p1=2025&p2=8&p3=101");
   // OR
    var url = '@Url.Action("index", "Gauge1", new { p1 = 2025, p2 = 8, p3 = 101 })'
    $('#result1').load(url);
});