使用Jquery

Question

在我的仪表板上，我有以下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>

Answer 1

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

因此，在您的示例中，＆符号将被编码，您的网址将如下所示：

/Gauge1/index?p1=2025&p2=8&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>

Answer 2

作为指导，我建议您避免直接在视图中注入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的快捷方式，也是目前首选的方法，

Answer 3

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

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

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

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

Answer 4

您可以尝试这样

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