[英]MVC Partial view using ajax
I have made an MVC application and I'm trying to create a partial view for when the user clicks the "details" button. 我已经制作了MVC应用程序,并试图为用户单击“详细信息”按钮时创建局部视图。 I have one partial view working at the moment for my "delete" button. 目前,我的“删除”按钮有一个局部视图。 When I step through my code using breakpoints it brings me as far as my Task Controller and steps into my PartialViewResult method but then goes no further. 当我使用断点逐步执行代码时,它会带我到任务控制器的最深处,并进入我的PartialViewResult方法,但此后再没有其他内容了。 When I click the "details" button nothing happens. 当我单击“详细信息”按钮时,没有任何反应。 Not sure what is missing here. 不知道这里缺少什么。
Index.cshtml Index.cshtml
<span class="btn btn-success btn-sm" onclick="showTask('@item.TaskId')">Details</span>
<div id="Detail"></div>
<Script>
function showTask(showTaskID) {
$.ajax({
url: '@Url.Action("ShowTaskByID")',
data: { id: showTaskID },
success: function (data) {
$('#Detail').hide();
$('#Detail').html(data);
$('#Detail').animate({
opacity: 1,
left: "+=50",
height: "toggle"
}, 3000, function () {
// Animation complete.
});
$('#Edit').hide();
$('#Delete').hide();
},
error: function (data) { $('#Details').html('<h3>Error</h3>'); }
});
}
</script>
_ShowTask _ShowTask
@model IEnumerable<WebApplication4.Models.Task>
<div class="panel panel-info">
<div class="panel-heading" style="font-size:20px">
<h2>List of Actors</h2>
</div>
<p>
@Html.ActionLink("Create New Task", "CreateTask", null, new { @class = "btn btn-sm btn-primary" })
</p>
@if (Model.Any())
{
<table class="table table-condensed table-striped">
<tr>
<th>
@Html.DisplayNameFor(model => model.First().TaskName)
</th>
<th>
@Html.DisplayNameFor(model => model.First().StartDate)
</th>
<th>
@Html.DisplayNameFor(model => model.First().FinishDate)
</th>
<th></th>
</tr>
@if (Model != null)
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.TaskName)
</td>
<td>
@Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.FinishDate)
</td>
<td>
@Html.ActionLink("Edit", "EditTask", new { id = item.TaskId }, new { @class = "btn btn-info btn-xs" })
@*<a onclick="showEditActor('@item.MovieID','@item.ActorID','@item.ActorName','@item.age')" class="btn btn-xs btn-info">Edit</a>*@
@Html.ActionLink("Delete", "DeleteTask", new { id = item.TaskId }, new { @class = "btn btn-danger btn-xs" })
</td>
</tr>
}
} @* closing of if *@
</table>
}
else
{
<div><strong>No Actors in Movie</strong></div>
}
</div>
Task Controller 任务控制器
public ActionResult Details(int id)
{
var q = db.Tasks.Find(id);
if (q == null)
{
}
return View(q);
}
public PartialViewResult ShowTaskByID(int id)
{
return PartialView("_ShowTask", db.Tasks.Find(id).TaskName);
}
HTML 的HTML
<input id="btnDetail" type="button" class="btn btn-success btn-sm" value="Details" />
<div id="Detail"></div>
JS JS
$('#btnDetail').on('click', function(){
$.ajax({
url: '@Url.Action("ShowTaskByID")',
data: { id: showTaskID },
}).done(function (data) {
$('#Detail').html(data);
$('#Detail').animate({
opacity: 1,
left: "+=50",
height: "toggle"
}, 3000, function () {
// Animation complete.
});
$('#Edit').hide();
$('#Delete').hide();
}).fail(function (jqXHR, textStatus) {
$('#Detail').html('<h3>Error :' + jqXHR.responseText + '</h3>');
});
});
C# C#
public ActionResult Details(int id)
{
try
{
var task = db.Tasks.Find(id);
}
catch(HttpException e)
{
throw new HttpException(404, "Task not found.")
}
return View(task);
}
public PartialViewResult ShowTaskByID(int id)
{
try
{
var tasks = db.Tasks.Find(id).TaskName;
}
catch(HttpException e)
{
throw new HttpException(404, "Task nout found.")
}
return PartialView("_ShowTask", tasks);
}
If you are expecting a list of Tasks try this: 如果您期望任务列表,请尝试以下操作:
public PartialViewResult ShowTaskByID()
{
try
{
var tasks = db.Tasks.ToList();
}
catch(HttpException e)
{
throw new HttpException(404, "Task nout found.")
}
return PartialView("_ShowTask", tasks);
}
Or instead, you could edit _ShowTask model type to Task: 或者,您可以将_ShowTask模型类型编辑为Task:
@model WebApplication4.Models.Task
<div class="panel panel-info">
<div class="panel-heading" style="font-size:20px">
<h2>List of Actors</h2>
</div>
<p>
@Html.ActionLink("Create New Task", "CreateTask", null, new { @class = "btn btn-sm btn-primary" })
</p>
@if (Model.Any())
{
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.TaskName)
</th>
<th>
@Html.DisplayNameFor(model => model.StartDate)
</th>
<th>
@Html.DisplayNameFor(model => model.FinishDate)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.DisplayFor(model => model.TaskName)
</td>
<td>
@Html.DisplayFor(model => model.StartDate)
</td>
<td>
@Html.DisplayFor(model => model.FinishDate)
</td>
<td>
@Html.ActionLink("Edit", "EditTask", new { id = Model.TaskId }, new { @class = "btn btn-info btn-xs" })
@*<a onclick="showEditActor('@item.MovieID','@item.ActorID','@item.ActorName','@item.age')" class="btn btn-xs btn-info">Edit</a>*@
@Html.ActionLink("Delete", "DeleteTask", new { id = Model.TaskId }, new { @class = "btn btn-danger btn-xs" })
</td>
</tr>
</tbody>
} @* closing of if *@
</table>
}
else
{
<div><strong>No Actors in Movie</strong></div>
}
</div>
[HttpGet] add the tag to your public PartialViewResult ShowTaskByID(int id)
[HttpGet]将标签添加到您的public PartialViewResult ShowTaskByID(int id)
so, it should result like: 因此,结果应为:
[HttpGet] public PartialViewResult ShowTaskByID(int id)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.