如何在提交按钮时更新页面的特定内容

Question

我正在使用asp.net MVC构建一个简单的应用程序。我想在单击按钮时更新某个div，但是Ajax仍然调用一个指向不同视图的函数。我不打算使用重定向方法，因为无论如何，我的页面需要时间加载，我宁愿在同一页面上更新某些div。

到目前为止，我已经尝试了以下几点：

 @{
    ViewBag.Title = "SearchResult";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@model IPagedList<JobsOfferSystem.Models.AllJobModel>

@using PagedList;
@using PagedList.Mvc;
<link rel="stylesheet" href="~/Content/Site.css">
<!-- job listing section start -->
@using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
    <div class="job-listing-section content-area">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-12">
                    <div class="sidebar-right">
                        <!-- Advanced search start -->
                        <div class="widget-4 advanced-search">
                            <form class="informeson">
                                <div class="form-group">
                                    <label>Keywords</label>
                                    <input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords">
                                </div>
                                <div class="form-group">
                                    <label>Location</label>
                                    <input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location">
                                </div>

                                <br>
                                <a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
                                    <i class="fa fa-plus-circle"></i> Date Posted
                                </a>
                                <div id="options-content5" class="collapse">
                                    <div class="checkbox checkbox-theme checkbox-circle">
                                        <input id="checkbox15" type="checkbox" name="last24">
                                        <label for="checkbox15">
                                            Last 24 Hours
                                        </label>
                                    </div>
                                    <div class="checkbox checkbox-theme checkbox-circle">
                                        <input id="checkbox16" type="checkbox" name="last3Days">
                                        <label for="checkbox16">
                                            Last 3 days
                                        </label>
                                    </div>
                                    <div class="checkbox checkbox-theme checkbox-circle">
                                        <input id="checkbox17" type="checkbox" name="last7Days">
                                        <label for="checkbox17">
                                            Last 7 days
                                        </label>
                                    </div>
                                    <br>
                                </div>

                                <input type="submit" value="Update" class="btn btn-success" />
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8 col-md-12">
                    @foreach (var item in Model)
                    {
                        <div class="job-box">
                            <div class="company-logo">
                                <img src="~/JobImageUploads/@Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
                            </div>
                            <div class="description">
                                <div class="float-left">
                                    <h5 class="title"><a href="@Url.Action("DetailsFromApis", "Home", new { id = item.Id })" class="hyberLink">@{HtmlString msg = new HtmlString(item.JobTitle); } @msg</a></h5>
                                    <div class="candidate-listing-footer">
                                        <ul>
                                            <li><i class="flaticon-work"></i>@Html.DisplayFor(modelIem => item.maximumSalary)</li>
                                            <li><i class="flaticon-time"></i>@Html.DisplayFor(modelIem => item.maximumSalary)</li>
                                            <li><i class="flaticon-pin"></i>@Html.DisplayFor(modelIem => item.locationName)</li>
                                        </ul>
                                        <h6>@item.PostedDate</h6>
                                    </div>
                                    <div>

                                        @{HtmlString msg2 = new HtmlString(item.JobDescription); }@msg2
                                    </div>
                                </div>
                                <div class="div-right">
                                    @Html.ActionLink("Job Details", "DetailsFromApis", new { id = item.Id }, new { @class = "apply-button" })
                                    @{if (item.jobUrl == "")
                                        {
                                            <a href="#" class="apply-button">ApplyNow</a>
                                        }
                                    }
                                    @if (item.JobImage.Contains("x"))
                                    {

                                        <button onclick="location.href='@item.jobUrl'" type="button" class=" apply-button">View Job On Reed!</button>
                                    }
                                    else if (item.JobImage.Contains("cvx))
                                    {
                                        var c = "https://www.x.com" + @item.jobUrl;

                                        <a href="@c" class="apply-button">View x On xx!!</a>

                                    }
                                    else if (item.JobImage.Contains("xxx"))
                                    {
                                        <button onclick="location.href='@item.jobUrl'" type="button" class=" apply-button">View xxx On xxx!</button>

                                    }
                                    @if (Request.IsAuthenticated)
                                    {
                                        using (Ajax.BeginForm("ApplyForYou", "Home", new { jobId = item.Id }, new AjaxOptions()
                                        {
                                            HttpMethod = "POST",
                                            UpdateTargetId = "divApply",
                                            InsertionMode = InsertionMode.Replace
                                        }))
                                        {
                                            <button class="apply-button">We Apply For You</button>
                                        }

                                        <div class="divApply">

                                        </div>
                                    }
                                    else
                                    {
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                            We apply for yous!
                                        </button>

                                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">You need to register First!</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        Register with us for free!
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                                        @Html.ActionLink("Register Now", "Create", "Candidate", null, new { @class = "btn btn-primary" })
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    }
                                </div>
                            </div>
                        </div>
                    }


                </div>
            </div>
        </div>
    </div>

}
<div class="pagining text-center">
    @Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page, searchTitle = Request.QueryString["searchTitle"], searchLocation = Request.QueryString["searchLocation"], last24 = Request.QueryString["last24"], last3Days = Request.QueryString["last3Days"], last7Days = Request.QueryString["last7Days"] }))
</div>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

我想要实现的是，当单击一个按钮时，如果满足控制器中的方法中的某个条件，则会更改按钮。

在控制器中，我做了以下工作：

  return PartialView("Applied");

在PartialView中，我做了以下工作：

<div class="apply-button" id="divApply">You have applied </div>

但是所发生的事情是，我被重定向到部分视图，而不是仅仅更新按钮，如果它符合条件，否则按钮应该保持不变

Answer 1

您需要下载nuget包；非阻塞ajax。

Solution

• Search Microsoft.jQuery.Unobstrusive.Ajax

• Check解决方案的

1. 工具> Nuget >管理包，安装后单击安装
2. ，您将在脚本文件夹中有一个新脚本，将其放到视图或布局中；

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

如果使用布局，则在插入jquery脚本后插入RenderSection。

<script /> <--jquery should be here-->
@RenderSection("scripts", required: false)

然后在你看来，加上这个；

@section scripts {
   <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
}

如果不想安装软件包，也可以使用from cdn

<script src="https://cdn.jsdelivr.net/npm/jquery-ajax-unobtrusive@3.2.6/dist/jquery.unobtrusive-ajax.min.js"></script>

尝试将您的@html.beginform移动到div中，而不是跨越整个html。

    <div class="job-listing-section content-area">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-12">
                   @using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
                    <div class="sidebar-right">
                        <!-- Advanced search start -->
                        <div class="widget-4 advanced-search">
                            <form class="informeson">
                                <div class="form-group">
                                    <label>Keywords</label>
                                    <input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords">
                                </div>
                                <div class="form-group">
                                    <label>Location</label>
                                    <input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location">
                                </div>

                                <br>
                                <a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
                                    <i class="fa fa-plus-circle"></i> Date Posted
                                </a>
                                <div id="options-content5" class="collapse">
                                    <div class="checkbox checkbox-theme checkbox-circle">
                                        <input id="checkbox15" type="checkbox" name="last24">
                                        <label for="checkbox15">
                                            Last 24 Hours
                                        </label>
                                    </div>
                                    <div class="checkbox checkbox-theme checkbox-circle">
                                        <input id="checkbox16" type="checkbox" name="last3Days">
                                        <label for="checkbox16">
                                            Last 3 days
                                        </label>
                                    </div>
                                    <div class="checkbox checkbox-theme checkbox-circle">
                                        <input id="checkbox17" type="checkbox" name="last7Days">
                                        <label for="checkbox17">
                                            Last 7 days
                                        </label>
                                    </div>
                                    <br>
                                </div>

                                <input type="submit" value="Update" class="btn btn-success" />
                            </form>
                          }
                        </div>
                    </div>
                </div>