javascript - 如何避免在 ASP.NET MVC 5 中获得纯 JSON 结果

Question

我有一个视图，其中有一个用于申请工作的按钮，该按钮被重定向到处理应用逻辑的 HttpPost 操作方法，然后将 JSON 结果返回到同一视图。如下所示：

// POST: Application/Apply
[HttpPost]
public ActionResult Apply(string idUser, int idAnnouncement)
{
    try
    {
        // TODO: Add insert logic here

        // Search for the candidate that has the same Hash code as idUser param
        Candidate appliedCandidate = db.Candidates.Where(c => c.CandidateSecondID.Equals(idUser)).FirstOrDefault();

        // todo: check if Candidate is already applyed to job
        var check = db.Applications.Where(a => a.CandidateID.Equals(appliedCandidate.CandidateID) && a.AnnouncementID.Equals(idAnnouncement)).FirstOrDefault();
        if (check == null)
        {
            Application newApp = new Application
            {
                AnnouncementID = idAnnouncement,
                CandidateID = appliedCandidate.CandidateID,
                ApplicationDate = DateTime.Now,
            };
            db.Applications.Add(newApp);
            db.SaveChanges();

            return this.Json(new
            {
                EnableSuccess = true,
                SuccessTitle = "Success",
                SuccessMsg = "Your application has been sent successfully!"
            });
        }
        else
        {
            return this.Json(new
            {
                EnableSuccess = false,
                ErrorTitle = "Warning",
                ErrorMsg = "You are already applayed for this Job!"
            });
        }

    }
    catch
    {
        return View();
    }
}

这是 AJAX 调用：

$.ajax({
    method: "POST",
    url: action,
    success: function (result) {
        if (result.EnableSuccess) {
            swal(
                result.SuccessTitle,
                result.SuccessMsg,
                'success'
            )
        } else {
            swal(
                result.ErrorTitle,
                result.ErrorMsg,
                'warning'
            )
        }
    },
    error: function (err) {
        console.log(err);
    }
})

这是完整的视图：

    @model IEnumerable<JobPostingProject.Models.Announcement>

@using Microsoft.AspNet.Identity;
@using Microsoft.AspNet.Identity.Owin;

@{
    ViewBag.Title = "List of jobs";
}

@using (Html.BeginForm("Index", "Announcement", FormMethod.Get))
{
    <div class="row mb-3">
        <div class="col-lg-3 ">
            <div class="title">
                <i class="fas fa-search mr-2"></i>
                <input type="text" name="titleInput" class="title__input form-control border-0" placeholder="Job Title" value="@ViewBag.Job" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="city">
                <i class="fas fa-map-marker-alt mr-2"></i>
                <input type="text" name="cityInput" class="city__input form-control border-0" placeholder="Location" value="@ViewBag.City" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="categorie">
                @Html.DropDownList("Categories", null, "Job Category", new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="row my-4">
        <div class="col-lg-3">
            <div class="date mb-4">
                @*<i class="fas fa-search mr-2"></i>*@
                <input type="date" name="dateInf" class="title__input form-control" style="border: 1px solid #ced4da; padding-left: 10px;" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="date mb-4">
                @*<i class="fas fa-search mr-2"></i>*@
                <input type="date" name="dateSup" class="title__input form-control" style=" border: 1px solid #ced4da;
        padding-left: 10px;
" />
            </div>
        </div>
        <div class="col-lg-3">
            <div class="level">
                @Html.DropDownList("Levels", ViewBag.Levels as SelectList, "Level", new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="search">
        <input type="submit" value="Search" class="text-white text-decoration-none btn btn-primary search__button" />
        @*@Html.ActionLink("Search", "Index", "Announcement", null, new { @class = "text-white text-decoration-none btn btn-primary search__button" })*@
    </div>
}




<!--list of all jobs searched for-->

<div class="container mt-5">
    @{
        if (!Model.Any())
        {
            <p class="text-center p-3 text-secondary">No job found with the chosen critiria</p>
        }
        else
        {
            <p class="text-secondary">@ViewBag.TotalResults job results found</p>
            foreach (var item in Model)
            {
                <div class="row">
                    <div class="col-lg-7">
                        <div class="jobs">
                            @using (Html.BeginForm("Apply", "Application", new { idUser = User.Identity.GetUserId(), idAnnouncement = item.AnnouncementID }, FormMethod.Post, new { @class = "w-100 AnnonceForm" }))
                            {
                                <div class="job">
                                    <div class="job__header d-flex align-items-center justify-content-between flex-wrap mb-0">
                                        <h5 class="job__title">@item.Title</h5>
                                        <h2 class="job__city">@item.Location</h2>
                                    </div>
                                    <h5 class="job__datetime">Posted in @item.PublicationDate.ToString("dd/mm/yyyy")</h5>
                                    <h5 class="job__company-name mb-4">By @item.Company.Name</h5>
                                    <div class="job__actions d-flex align-items-center">
                                        <p class="job__apply my-0 mr-2">
                                            @Html.ActionLink("More details", "AnnouncementDetails", "Application", new { idAnnouncement = item.AnnouncementID }, new { @class = "btn btn-primary" })
                                        </p>
                                        @if (!User.IsInRole("Company"))
                                        {
                                            <input type="submit" value="Apply Now" class="btn btn-outline-primary submit-btn">
                                        }
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                    <div class="col-lg-5"></div>
                </div>
            }
        }
    }
</div>

@section AnnouncementIndex {
    <link href="@Url.Content("~/Content/Home.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Announcement/AnnouncementIndex.css")" rel="stylesheet" type="text/css" />
}

@section Scripts{
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        let submitButtons = document.querySelectorAll(".submit-btn");
        for (let i = 0; i < submitForms.length; i++) {
            submitButtons[i].addEventListener("submit", e => {
                e.preventDefault();
                var el = this.parentElement;
                while (el.className != 'AnnonceForm') {
                    el = el.parentElement;
                }
                //el is now your parent
                let action = el.attr("action");
                $.ajax({
                    method: "POST",
                    url: action,
                    data: {},
                    dataType: "json",
                    success: function (result) {
                        console.log("entered success block");
                        if (result.EnableSuccess) {
                            swal(
                                result.SuccessTitle,
                                result.SuccessMsg,
                                'success'
                            )
                        } else {
                            swal(
                                result.ErrorTitle,
                                result.ErrorMsg,
                                'warning'
                            )
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
                return false;
            })
        }

    </script>
}

但是，出于某种原因，我得到了这个普通的 JSON 结果，而不是在 AJAX 调用中实际返回成功函数。

标签： javascriptc#asp.netjsonajax