如何在ActionMethod中返回弹出窗口而不是视图

时间:2018-05-16 10:33:11

标签: javascript asp.net-mvc modal-dialog popup

我有一个用户输入乘客数据的表格,其中包括(姓名,座位号,序列号和电子号码)。 如果任何乘客数据已经办理登机手续。我正在返回显示的视图以下Passenger已经签入。

所以这一切都工作得很好但我想要的是当有任何乘客的数据已经签到而不是返回新视图我想用弹出消息显示。

这是我的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>

这一切都运行正常,我只想在同一个屏幕上返回弹出视图,而不是返回新视图。

1 个答案:

答案 0 :(得分:0)

以下是一个例子:

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 ID的部分视图: divToPopulate

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

以下是示例输出:

enter image description here

确保在代码中引用JQuery和Bootstrap。