使用 AJAX 渲染局部视图答案

【问题标题】：Rendering Partial Views using AJAX使用 AJAX 渲染局部视图
【发布时间】：2014-10-16 10:33:35
【问题描述】：

我有一个非常简单的任务，我必须在主页上呈现部分视图，以便每次单击链接时都不会加载整个页面，而只是特定的div 或section。

看看这个：

Link。

当您单击上述网站标题处的链接时，它只会加载特定部分而不是整个页面。

我在 Internet 上尝试了许多解决方案，但我无法成功。

我尝试过的解决方案：

由于我无法解释所有这些，我只想问一下：

Link

阅读大量教程后，我让虚拟项目工作，但它在我的团队正在处理的项目中无法工作：

我在 Home 中添加了一个名为 Partial 的 PartialView。

我在 Home 控制器中添加了一个方法：

public PartialViewResult Test()
{
    return PartialView();
}

我在Index 中添加了一个按钮：
```
<input type="submit" id="clik" />
```

我的 JavaScript：

<script type="text/javascript">
    $('#clik').click(function () {
    $("#s").load("/Home/Test");
    });
</script>

我添加了以下参考：

<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>

点击提交前的屏幕截图

点击提交后的屏幕截图

这在我的虚拟项目上运行良好，但在我的团队正在处理的项目上运行良好，当我尝试按照上面编写的完全相同的步骤执行此操作时，我在通过 Google Chrome Developer Tools 检查页面时遇到以下错误：

GET http://localhost/Employees/Test 404 (Not Found) 
    jquery-1.7.2.min.js:4
        send                        jquery-1.7.2.min.js:4
        f.extend.ajax               jquery-1.7.2.min.js:4
        f.fn.extend.load            jquery-1.7.2.min.js:4
        (anonymous function)        Employees:278
        f.event.dispatch            jquery-1.7.2.min.js:3
        h.handle.i                  jquery-1.7.2.min.js:3

我是 ASP .Net MVC 的初学者，我正在使用 ASP .Net MVC 4...

【问题讨论】：

该消息表明EmployeesController 中的Test 方法不存在。通过在浏览器地址栏中输入该地址进行检查
@StephenMuecke 我把地址放在浏览器中，Test 方法工作正常...你能想到另一个可能返回此消息的问题吗？
不确定，但您确实有另一个问题。您的按钮是type="submit"，它将提交表单。应该是 type="button" or modify your script to $('#clik').click(function(e) { e.preventDefault(); ....` 来停止表单提交。还要注意您同时引用 HomeController 和 EmployeeController (根据错误信息）
@StephenMuecke 我尝试了@Venkat 的方法并且它有效，但是我仍然没有得到上述工作方式......即使在我将其修改为button 之后它也没有工作，我只是参考EmployeesController。这里：$("#change").load("/Employees/Test");
您的问题有$("#s").load("/Home/Test");，所以我认为这只是一个错字。如果它使用 ajax 操作链接工作，那么它应该使用 .load() 工作，所以不确定问题出在哪里，但如果错误是 404，它肯定找不到 //localhost/Employees/Test。

标签： ajax asp.net-mvc

【解决方案1】：

为了让事情更简单：

为每个菜单链接创建一个 ajax 操作链接。
将UpdateTargetId 设置为div 的id，您要在其中显示部分视图。

【讨论】：

我已经尝试过很多次了，但没有成功，在阅读了你的答案后，我尝试了，它成功了，:)
@SyedFarjadZiaZaidi 很高兴听到您说“有效”。祝你有美好的一天。