单击

时间:2019-10-18 00:20:39

标签: jquery ajax asp.net-mvc

我基本上有一个表,该表具有一键单击工作板的“应用”按钮功能。我编写了一些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>

这是错误消息:https://i.imgur.com/o23bHUZ.jpg 我的用户界面如下所示:https://i.imgur.com/r3IASim.jpg

有关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>


    }

1 个答案:

答案 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" })
  }