使用 Jquery 加载 @Html.Action

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 中 (document).ready 时，如何将 @Html.Action 生成的视图加载到 <div id = "result1" 中？

我试过了，但是没用。

<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。它通过编码所有参数来生成一个有效的url。

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

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

在Razor 中，每个使用@ 块的内容都由Razor 自动进行HTML 编码。

Url.Action 只返回一个字符串，这就是 & 被编码的原因。

你需要使用@Html.Raw来防止&的Encode。

请试试这个：

<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 文件中提取它（或者最坏的情况注入一个全局变量并提取它）..

例如将 Url.Action 添加到您的 DIV（并添加类似 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，而原来的 div 是硬连线的。

注意事项：

• $(function(){...}); 是 $(document).ready 的快捷方式，也是当今的首选方式，

Answer 3

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

Html.Action helper 渲染 View（它返回 html 页面）。

你应该使用Url.Action helper 来生成url。

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