[英]How to create partial view via AJAX call
I am in learning phase and I want to create partial view from Ajax call . 我处于学习阶段,我想从Ajax call创建局部视图 。 But for every click the page gets redirected to a altogether New Page . 但是对于每次单击,页面都会重定向到一个完全“新页面” 。 Below is my attempt. 以下是我的尝试。
Link I referred from Stack Overflow SO LINK 我从堆栈溢出引用的链接SO LINK
Model 模型
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
Home Controller: 家庭控制器:
public ActionResult PartialViewContainer()
{
return View();
}
public PartialViewResult All()
{
var students = _context.Students.ToList();
return PartialView("_Student", students);
}
public PartialViewResult Top3()
{
var students = _context.Students.OrderByDescending(s => s.Age).Take(3);
return PartialView("_Student", students);
}
public PartialViewResult Bottom3()
{
var students = _context.Students.OrderBy(s => s.Age).Take(3);
return PartialView("_Student", students);
}
Main View located inside Home Folder 位于主文件夹内的主视图
@{
ViewBag.Title = "PartialViewContainer";
}
<div style="font-family: Arial">
<h2>Students</h2>
@Html.ActionLink("All", "All", new AjaxOptions {
HttpMethod = "GET",
UpdateTargetId = "divStudents",
InsertionMode = InsertionMode.Replace
})
<span style="color:Blue">|</span>
@Html.ActionLink("Top3", "Top3", new AjaxOptions{
HttpMethod = "GET",
UpdateTargetId = "divStudents",
InsertionMode = InsertionMode.Replace
})
<span style="color:Blue">|</span>
@Html.ActionLink("Bottom", "Bottom3", new AjaxOptions{
HttpMethod = "GET",
UpdateTargetId = "divStudents",
InsertionMode = InsertionMode.Replace
})
<div id="divStudents"></div>
</div>
"_Student" Partial view located inside "Shared" folder 位于“共享”文件夹中的“ _Student”局部视图
@model IEnumerable<WebApplication3.Models.Student>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table" style="border: 1px solid black; background-color: silver">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Age)
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
</tr>
}
</table>
Initial page: 初始页面:
After Ajax Call 在Ajax通话之后
PS: I have included jquery plug in. PS:我包括了jquery插件。
But I could not find jquery.unobstrusice-ajax.js in my ASP.Net MVC 5 project template, so I have not included it. 但是我在ASP.Net MVC 5项目模板中找不到jquery.unobstrusice-ajax.js ,所以没有包含它。
Please guide me what am I doing wrong here. 请在这里指导我我在做什么错。
EDIT 1 编辑1
Replaced
@html.ActionLink with @Ajax.ActionLink
, but still it's getting redirected to a new page. 将@html.ActionLink with @Ajax.ActionLink
替换@html.ActionLink with @Ajax.ActionLink
,但仍将其重定向到新页面。
try this: 尝试这个:
Replace @html.ActionLink
with @Ajax.ActionLink
将@html.ActionLink
替换为@Ajax.ActionLink
@Ajax.ActionLink("All", "All", new AjaxOptions {
HttpMethod = "GET",
UpdateTargetId = "divStudents",
InsertionMode = InsertionMode.Replace
})
Keep in mind. 记住。 AJAX CANNOT change the page. AJAX无法更改页面。
I personally steered away from the unobtrusive ajax framwork
. 我个人避开了unobtrusive ajax framwork
。 I just used good ole AJAX
What is happening is that ajax is not actually working and it is actually just doing an html GET
. 我只是使用了很好的ole AJAX
发生了什么事,那就是ajax实际上没有工作,实际上只是在执行html GET
。
Invoke a function like this when you press a button. 按下按钮时调用这样的功能。 This is how I solved the similar problem that I had. 这就是我解决类似问题的方式。
This code may not be a direct cut and paste, but it is pretty close. 这段代码可能不是直接剪切和粘贴的,但是非常接近。
function CallAjax(actionPath) {
$.ajax({
url: actionPath,
type: 'POST',
success: function (partialView) {
$("#sampleContainer").html(partialView);
},
error: function () {
alert('error');
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.