Javascript 使用Jquery加载@Html.Action

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

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

您应该通过jquery函数

url

获取您的视图

Html.Action

helper呈现视图（返回Html页面）

您应该使用

Url.Action

helper来生成Url

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

你可以这样试试

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

---

Url.Action

helper方法用于生成Url。它通过对所有参数进行编码来生成有效的url

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

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

在

Razor

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

---

Url.Action

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

您需要使用

@Html.Raw

来防止对&进行编码

请试试这个：

<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>

$（文档）.ready（函数（）{
var url=“@（Html.Raw（url.Action（“index”，“Gauge1”，new{p1=2025，p2=8，p3=101}））”；
$（'#result1'）。加载（url）；

作为指导原则，我建议您避免在视图中直接注入Javascript代码。这会阻止您使用TypeScript和单独的JS文件（以及最酷的调试选项）。注入DOM元素数据属性并从JS文件中提取（或者最坏的情况是注入全局变量并提取）

e、 g.将Url.Action添加到您的DIV（并添加一个类，如

loadme

）： 这种类型的属性和独立的代码更像是编写插件/小部件，您可以毫不费力地调试代码。上面的代码支持加载任意数量的div，而最初的div是硬连接的

笔记：

• $（function（）{…}）；

  是

  $（document）的快捷方式。ready

  是当今实现这一点的首选方法

---

您需要

Url.Action

@Satpal，谢谢您的帮助，每个人都建议使用

Url.Action

但可能因为我想返回一个视图，

Url

似乎不起作用！！@Erwin1，控制台中有错误吗？@Erwin1，我更新了我的答案。请看一看。作为指导原则，我建议您避免注入into直接在视图中使用Javascript代码。这使您无法使用TypeScript和单独的JS文件（以及最酷的调试选项）。插入DOM元素数据属性并从JS文件中提取该属性（或最坏情况下插入全局变量并提取该属性）。我尝试了

Url。

，但无效。我使用

Html.Action

，因为我想返回一个视图。@Erwin1检查控制台（浏览器中的F12）中的内容。此代码应work@Erwin1请先尝试一个或检查控制台中是否有任何错误？不客气！另一个方法是使用以下命令：

var url=“@url.Action（“index”）仪表1“？p1=2012和p2=10和p3=101”

<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>

<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>

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