Как вернуть всплывающее окно вместо представления в ActionMethod

Question

У меня есть форма, в которой пользователь вводит данные о пассажирах, которые включают (Имя, Номер места, Номер последовательности и т. Д.). и если какие-либо данные о пассажире уже зарегистрированы. Я возвращаю вид, который показывает Следующий пассажир уже зарегистрировался.

Так что все это работает так хорошо, но я хочу, чтобы были данные любого пассажира, который уже зарегистрирован, вместо того, чтобы возвращать новое представление, которое я хочу показать во всплывающем окне с сообщением.

Это мой Checkedin-View

@model Marhaba.Models.PassengerInfo

@{
    ViewBag.Title = "CheckIn";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var FlightNoList = ViewBag.FlightNoList as IEnumerable<SelectListItem>;
    var category = ViewBag.Passcategory as IEnumerable<SelectListItem>;
}
<section id="contact-us-section" class="contact-us-section pb-30 image-bg">
    <div class="container">
        <br />
        <div class="slider-text-2 text-center pt-40">
            <h2 class="font-w-8 font-30 ltr-s-1 pb-12 color-w" style="color:#e60053">Regular Passengers</h2>
            <h4 class="color-w font-22"><a class="font-20 color-w" href="/Home/Index">Home</a></h4>
        </div>
        <br />
        <div class="section">
            <div class="container" >
                <div class="">
                    <!-- Contact Form Start -->
                    <div class="form-box clearfix">
                        @using (Html.BeginForm("CheckIn", "PassengerInfo", FormMethod.Post))
                        {
                            <div class="form-group col-sm-6">
                                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", required = "required", placeholder = "Name" } })
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group col-sm-6">
                                @Html.EditorFor(model => model.SeatNo, new { htmlAttributes = new { @class="form-control", required = "required", placeholder = "Seat Number" } })
                                <div class="help-block with-errors"></div>
                            </div>     
                            <div class="form-group col-sm-6">
                                @Html.EditorFor(model => model.SequenceNo, new { htmlAttributes = new { @class = "form-control", required = "required", placeholder = "Sequence Number" } })
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group col-sm-6">
                                @Html.DropDownListFor(model => model.FlightId, FlightNoList, new { @class = "form-control", required = "required", placeholder = "Flight Id " })
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group col-md-6">
                                @Html.DropDownListFor(model => model.CategoryID, category, new { @class = "form-control", required = "required", placeholder = "Flight Id " })
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group col-md-6 checkbox">
                                <label>@Html.CheckBoxFor(model => model.isGuest, new { @class = "", @id = "Check", onchange = "valueChanged()" }) With Guest</label>
                            </div>
                            <div class="form-group col-sm-6">
                                @Html.EditorFor(model => model.NoOfGuests, new { htmlAttributes = new { @class = "form-control", @id = "GuestsNo", placeholder = "No Of Guests", style = "display: none;" } })
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group col-sm-12">
                                @Html.TextAreaFor(model => model.Remarks, new { @class="form-control", placeholder = "Comments", rows = "6" })
                                <div class="help-block with-errors"></div>
                            </div>

                            <div class="col-sm-12"  >
                                <input style="float: right; background-color:white; color: #e60053 "  type="Submit" class="btn" value="Check In" onmouseover=" this.style.backgroundColor = '#e60053', this.style.color = 'white' " onmouseout="    this.style.backgroundColor = 'white',   this.style.color = '#e60053'">
                            </div>
                        }
                    </div>
                    <!-- Contact Form End -->
                </div>
            </div>
        </div>
    </div>

Это мой метод Action, вы можете видеть, что я возвращаю представление, которое RecordDublicate .

 public ActionResult CheckIn(PassengerInfo Data)
    {
        if (!General.ValidateSession())
        {
            return RedirectToAction("Login", "User");
        }
        if (!(ModelState.IsValid))
        {
            ViewBag.Message = "Form Data is Invalid";
            return RedirectToAction("CheckOut");
        }
        if (Data.NoOfGuests == null)
        {
            Data.NoOfGuests = "0";
        }
        if (Data.Remarks == null)
        {
            Data.Remarks = "No Comments";
        }
        if(Data.RefSeatNo==null)
        {
            Data.RefSeatNo = "No Reference";
        }
        Data.CheckinTime = DateTime.Now.ToString("hh:mm:ss tt");
        Data.CheckoutTime = null;
        Data.IsCheckout = false;
        Data.isFeedBack = false;
        Data.EnterBy = Session["UserName"].ToString();
        Data.Date = DateTime.Now.ToString("yyyy-MM-dd");
        var result = repository.SearchDublicate(Data.SequenceNo, Data.FlightId, Data.Date);
        if(result >= 1)
        {
            return View("RecordDublicate");
        }
        repository.AddRecord(Data);
        repository.SaveRecord();
        return RedirectToAction("Scaning");
    }

Это мое представление RecordDublicate

@{
    Layout = null;
}
<link href="~/Contents/css/InvalidEmail.css" rel="stylesheet" />
<div class="overlay"></div>
<div class="terminal">
    <h1>Error <span class="errorcode">404</span></h1>
    @*<p class="output">unauthorized access</p>*@
    <p class="output">The Passenger has already checked-in</p>
    <div class="buttons">
        <a class="button" href="/Home/Index">Go to Home</a>
    </div>
</div>

Это все работает нормально, я просто хочу вернуть всплывающее окно на том же экране, а не возвращать новое представление.

Answer 1

Вот пример:

HTML:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" onclick="fncShow();">
    Launch demo modal
</button>

<!-- Modal -->
<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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="divToPopulate">
         @*Populate content here.*@
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ниже приведен код скрипта:

<script>
    function fncShow() {
        $.ajax({
            url: '@Url.Action("ShowDialog", "Home")',
            type: "GET",
            success: function (data) {
                  $('#divToPopulate').html(data);
                  $('#exampleModal').modal('show');
            },
            error: function (a1) {
                console.log(a1);
            }
        });
    }
</script>

Вот представление, которое я хочу показать на теле моего модала (имя файла: _MyView.cshtml):

<h2>_MyView</h2>
<p>Hello World</p>

Вот часть контроллера, которая будет возвращать частичное представление, которое заполнит идентификатор Div: divToPopulate

 public PartialViewResult ShowDialog()
    {
        return PartialView("_MyView");
    }

Вот пример вывода:

Убедитесь, что вы ссылаетесь на JQuery и Bootstrap в своем коде.