我基本上有一个表,该表具有一键单击工作板的“应用”按钮功能。我编写了一些ajax函数代码和jquery,以便每当用户单击按钮时,该按钮将被禁用并更改文本。现在,ajax按钮确实起作用了,单击后数据库中发生了更改,但是我无法禁用该按钮并更改文本。请帮忙。
这是Ajax链接按钮的样子:
@if (User.Identity.IsAuthenticated)
{
@Ajax.ActionLink("1-Click-Apply", "OneClickApply", new { id = item.PositionID }, new AjaxOptions
{
HttpMethod = "POST",
Confirm = "Are you sure you want to apply for " + item.Title + "?",
OnSuccess = "deactive"
}, new { @class = "btn btn-info float-right", id = "oneClick" + item.PositionID, style = "margin-left:10px; margin-right:10px" })
}
这是jquery的一部分:
<script type="text/javascript">
function deactive(data) {
$('#oneClick' + data.id)addClass('disabled').text("Applied");
}
</script>
有关1单击按钮的代码:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult OneClickApply(int id)
{
Application ctx = new Application();
Position position = db.Positions.Find(id);
OpenPosition open = db.OpenPositions.Where(op => op.PositionID == id).FirstOrDefault();
//open.PositionID = open.OpenPositionID;
string userID = User.Identity.GetUserId();
UserDetail currentUser = db.UserDetails.Where(ud => ud.UserID == userID).FirstOrDefault();
ctx.OpenPositionID = open.OpenPositionID;
ctx.UserID = currentUser.UserID;
ctx.ApplicationDate = DateTime.Today.Date;
ctx.ResumeFileName = currentUser.ResumeFileName;
ctx.ApplicationStatusID = 1;
db.Applications.Add(ctx);
db.SaveChanges();
string confirmMessage = string.Format("You have just applied for '{0}'!", open.Position.Title);
return Json(new { id = id, message = confirmMessage});
}
cshtml的整个页面
@model PagedList.IPagedList<JobBoard.DATA.EF.Position>
@using System;
@using PagedList.Mvc
@{
ViewBag.Title = "Index";
}
<section class="section-hero overlay inner-page bg-image"
style="background-image: url('/Content/images/hero_1.jpg');"
id="home-section">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1 class="text-white font-weight-bold">Admin Panel</h1>
<div class="custom-breadcrumbs">
<a href="/Home/Index">Home</a> <span class="mx-2 slash">/</span>
<a href="/Home/Positions">Positions</a> <span class="mx-2 slash">/</span>
<span class="text-white"><strong>@ViewBag.Title</strong></span>
</div>
</div>
</div>
</div>
</section>
<section class="site-section" id="next-section">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-5 mb-lg-0">
<p>
@Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("Index", "Positions", FormMethod.Get))
{
<div style="border:2px solid lightblue; margin-top:10px;margin-bottom:10px;padding:15px">
Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</div>
}
<span style="margin-top:10px; margin-bottom:10px;">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, currentFilter = ViewBag.CurrentFilter }))
</span>
<a href="#">content</a>
@if (Model.Count() > 0)
{
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Job Description
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<a href="/Positions/Details/@item.PositionID"> @Html.DisplayFor(modelItem => item.Title)</a>
</td>
<td style="width:270px">
@*@item.JobDescription.Substring(0, Math.Min(item.JobDescription.Length, 200)) ...*@
@Html.Raw(item.JobDescription.Substring(0, Math.Min(item.JobDescription.Length, 200))) ...
</td>
<td>
@if (User.IsInRole("Admin") || User.IsInRole("Manager"))
{
<span class="float-right" style="margin-left:10px; margin-right:10px">
@Html.ActionLink("Edit", "Edit", new { id = item.PositionID }, new { @class = "btn btn-primary" })
</span>
<span class="float-right" style="margin-left:10px; margin-right:10px"> @Html.ActionLink("Delete", "Delete", new { id = item.PositionID }, new { @class = "btn btn-danger" })</span>
}
<span class="float-right" style="margin-left:10px; margin-right:10px"> @Html.ActionLink("Details", "Details", new { id = item.PositionID }, new { @class = "btn btn-warning " })</span>
@if (User.Identity.IsAuthenticated)
{
@Ajax.ActionLink("1-Click-Apply", "OneClickApply", new { id = item.PositionID }, new AjaxOptions
{
HttpMethod = "POST",
Confirm = "Are you sure you want to apply for " + item.Title + "?",
OnSuccess = "deactive"
}, new { @class = "btn btn-info float-right", id = "oneClick" + item.PositionID, style = "margin-left:10px; margin-right:10px" })
}
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>Sorry your criteria did not return any result.Please try again or or hit "Go!" to refresh the page</p>
}
</div>
</div>
</div>
</section>
@section scripts{
<script type="text/javascript">
function deactive(data) {
$('#oneClick' + data.id).addClass('disabled').text("Applied");
}
</script>
}
答案 0 :(得分:0)
在ajax OnSuccess
中,您没有传递函数deactivate
的位置ID,这就是您的脚本不执行任何操作的原因,因为函数参数data
为空
@Ajax.ActionLink("1-Click-Apply", "OneClickApply", new { id = item.PositionID }, new AjaxOptions
{
HttpMethod = "POST",
Confirm = "Are you sure you want to apply for " + item.Title + "?",
OnSuccess = "deactive"
}, new { @class = "btn btn-info float-right", id = "oneClick" + item.PositionID, style = "margin-left:10px; margin-right:10px" })
}
因此,要更正此错误,您应该使用deactive()
参数调用PositionId
;
OnSuccess = "deactive('" + item.PositionID + "')"
然后在您的脚本中可以通过执行以下操作访问ID
function deactive(id) {
$('#oneClick' + id)addClass('disabled').text("Applied");
}
您的Ajax助手应该看起来像这样;
@Ajax.ActionLink("1-Click-Apply", "OneClickApply", new { id = item.PositionID }, new AjaxOptions
{
HttpMethod = "POST",
Confirm = "Are you sure you want to apply for " + item.Title + "?",
OnSuccess = "deactive('" + item.PositionID + "')"
}, new { @class = "btn btn-info float-right", id = "oneClick" + item.PositionID, style = "margin-left:10px; margin-right:10px" })
}