jQuery 在 .NET MVC4 中使用 Ajax 加载部分视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14529936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using Ajax for partial view loading in .NET MVC4
提问by kralco626
I'm trying to follow the post here, which may very well be wrong, to learn a little more about partial view loading in MVC. I know the basics of MVC but want to do more of the ajax stuff I used to do before I started using MVC.
我正在尝试关注此处的帖子，这很可能是错误的，以了解有关 MVC 中部分视图加载的更多信息。我知道 MVC 的基础知识，但想要做更多我在开始使用 MVC 之前曾经做过的 ajax 东西。
The goal is to have the partial view load INSIDE the div.Its just loading the partial view as the whole page, rather than inside of the Div.
目标是将部分视图加载到 div 中。它只是将局部视图作为整个页面加载，而不是在 Div 内部。
Code is as follows:
代码如下：
Controller:
控制器：
namespace LDP.WebUI.Controllers
{
public class TestController : Controller
{
//
// GET: /Test/
public ActionResult Index()
{
return View();
}
public PartialViewResult Page1()
{
return PartialView("Page1");
}
public PartialViewResult Page2()
{
return PartialView("Page2");
}
}
}
Main View (Index): (I also tried "mainDiv" without the pound sign, wasen't sure which was right)
主视图（索引）：（我也试过没有英镑符号的“mainDiv”，不确定哪个是对的）
<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#hideme').click(function () {
$(this).hide();
});
});
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>
</div>
<button id ="hideme">Hide Me</button>
</div>
Partial View 1 (Page1.cshtml)
局部视图 1 (Page1.cshtml)
@{
ViewBag.Title = "Page1";
}
<h2>Page1</h2>
Partial View 2 (Page2.cshtml)
局部视图 2 (Page2.cshtml)
@{
ViewBag.Title = "Page2";
}
<h2>Page2</h2>
Update: I created a brand new MVC 4 project. This comes, by default, with Jquery 1.7.1 and the unobtrusive-ajax library from microsoft. It still loads the partial view in a new page...
更新：我创建了一个全新的 MVC 4 项目。默认情况下，这是 Jquery 1.7.1 和来自微软的 unobtrusive-ajax 库。它仍然在新页面中加载部分视图......
Update: Not sure if this helps, but the following does achieve the result I want... But still doesn't solve the problem as to why this solution doesn't work
更新：不确定这是否有帮助，但以下确实达到了我想要的结果......但仍然没有解决为什么这个解决方案不起作用的问题
<button>load about</button>
<script type="text/javascript">
$("button").click(function () {
$("#mainDiv").load("Test/Page2");
});
</script>
enter code here
采纳答案by Dmitry Efimenko
- ditch
#inUpdateTargetId = "#mainDiv" - make sure you have
jquery.unobtrusive-ajax.min.jsscript referenced on your page.
- 沟
#中UpdateTargetId = "#mainDiv" - 确保您
jquery.unobtrusive-ajax.min.js的页面上引用了脚本。
回答by Eric Eijkelenboom
I copied your code into a brand new MVC4 project and it works fine.
我将您的代码复制到一个全新的 MVC4 项目中，并且运行良好。
See screenshot of the solution:
查看解决方案截图：
Hope this will give you a hint on what could be wrong.
希望这会给你一个关于可能出错的提示。
回答by Dave Alperovich
I typically load partials like this using JQuery
我通常使用 JQuery 加载像这样的部分
$( document ).ready(function() {
$("#lnkPage1").click(function( event ) {
$('#mainDiv').load('Test/Pag1');
});
$("#lnkPage2").click(function( event ) {
$('#mainDiv').load('Test/Pag2');
});
});
回答by Schanckopotamus
@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))
{
<p>
<input type="submit" value="Ajax Form Action" />
</p>
}
<div id="result></div>
On the button click it should call the Action that returns a PartialView. You dont need the '#' in your Ajax.BeginForm call.
在按钮上单击它应该调用返回 PartialView 的操作。您不需要 Ajax.BeginForm 调用中的“#”。
回答by Vincent Finn
Only issue I had with original example was the \lib\ in script src path. Default MVC 4 Web app will put js files in "Scripts", not "Scripts\Lib". Your screen shot example is correct.
我在原始示例中遇到的唯一问题是脚本 src 路径中的 \lib\。默认的 MVC 4 Web 应用程序会将 js 文件放在“Scripts”中，而不是“Scripts\Lib”中。您的屏幕截图示例是正确的。
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
Also in the original example - putting in ViewBag.Title will cause this to not work:
同样在原始示例中 - 放入 ViewBag.Title 将导致这不起作用：
@{
ViewBag.Title = "Some Title";
}
回答by Julian Rosebury
I got this exact same issue; loading the partial view as the whole page rather than in the defined div.
我遇到了完全相同的问题；将局部视图作为整个页面而不是在定义的 div 中加载。
I was incorrectly presuming that my _Layout.cshtmlwas including the jquery.unobtrusive-ajax.jsfile as I didn't understand what the Bundles thingy(?) was doing. I thought it was being added by Bundles.
我错误地假设我_Layout.cshtml包含了该jquery.unobtrusive-ajax.js文件，因为我不明白 Bundles thingy(?) 在做什么。我以为它是由 Bundles 添加的。
In my _Layout.cshtmlView it defines @RenderSection("scripts", required: false)Which in English is; it's optional to include a section in your view called @scripts.
So no error is thrown if you don't include it (@section scripts) but the symptom is that the Ajax just renders in a new page if you don't.
在我_Layout.cshtml看来，它定义@RenderSection("scripts", required: false)了英语中的哪个；在视图中包含一个名为 @scripts 的部分是可选的。因此，如果您不包含它（@section 脚本），则不会引发任何错误，但症状是如果您不包含，Ajax 只会在新页面中呈现。
To fix it: put the following in your view (I put it below the ...ViewBag.Title; })
修复它：将以下内容放在您的视图中（我将其放在 下方...ViewBag.Title; }）
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}
Sorry if my explanation is a bit rudimentary, I'm a bit new to this. Hoping this helps someone.
对不起，如果我的解释有点简陋，我对此有点陌生。希望这可以帮助某人。
回答by david
load json data or table partial view. not full format view.
加载json数据或表局部视图。不是全格式视图。
success:function(data){
alert(data);
debugger;
('#div_id').data(data);
}
here, returned data is json data or data like
在这里，返回的数据是 json 数据或类似的数据
data
数据
. 使用警报检查数据。