Как передать свойство модальному в ASP. NET MVC Razor view? - PullRequest
0 голосов
/ 14 января 2020

У меня бритва, как показано ниже C# ASP. NET MVC. Это представление заполняет итоговые строки для транзакции по банковскому счету за день. Пользователь может щелкнуть каждую строку, чтобы просмотреть детали каждого дня. Когда пользователь нажимает на каждую строку, появляется модальное окно, и пользователь выбирает, чтобы просмотреть подробную информацию о платежах или приемах.

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

Я знаю, что могу справиться с этой ситуацией, используя jQuery и ajax, но, поскольку у меня нет знаний о внешнем интерфейсе, я не знаю, как справиться с этой ситуацией.

@model IEnumerable<WebApplication1.Models.BankAccountDailySummary>

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

<div id="wrapper">


    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column fadeInRight animated faster">
        <!-- Main Content -->

        <div id="content">
            <!-- Topbar -->
            <div class=" sticky-top ios-content-box-header p-1">
                <nav class="topbar  container-fluid pr-16p">
                    <div class="row font-12 " style="height: 45px">
                        <div class="col-3 text-right m-auto color-orange pl-1 pr-1"></div>
                        <div class="col-6 px-1 text-center m-auto text-gray-900 f-w-600 text-overflow-dot">@ViewBag.accountName</div>
                        <div class="col-3 text-left m-auto color-orange pr-1 pl-1"><a href="bank.html" class="ios-nav-link"> return<i class="fas fa-chevron-left  fa-fw  mr-1 color-orange"></i></a></div>
                    </div>

                </nav>

            </div>
            <!-- End of Topbar -->
            <!-- Begin Page Content -->
            <div class="container-fluid px-0 head-foot-margin min-h-content">
                <!-- Page Heading -->

                <form class="user" action="">


                    <span class="col-12 text-gray-900 font-12  d-inline-block  px-4 pb-2 ">Time interval</span>
                    <div class="ios-content-box px-4 py-3 mb-3 sticky-top" style="top:49px">
                        <div class="row ">
                            <a href="#" class="col-1 p-0"><i class="fas fa-search  fa-fw  m-auto d-block  text-gray-500 pt-2"></i></a>
                            <div class="form-group float-right  col-4 input-style-1">
                                <input title="" id="dateValue_1" type="text" class="example1 form-control form-control-user d-inline" />
                            </div>
                            <a onclick="clearValue('dateValue_1')" class="col-1 p-0"><i class="fas fa-trash-alt  fa-fw  m-auto d-block  text-gray-500 pt-2"></i></a>
                            <div class="form-group float-right  col-4 input-style-1">
                                <input title="" id="dateValue_2" type="text" class="example1 form-control form-control-user d-inline" />
                            </div>
                            <a onclick="clearValue('dateValue_2')" class="col-1 p-0"><i class="fas fa-trash-alt  fa-fw  m-auto d-block  text-gray-500 pt-2"></i></a>
                        </div>
                    </div>
                    @if (Model != null)
                    {
                        foreach (var item in Model)
                        {
                            <a href="#" data-toggle="modal" data-target="#exampleModal" date =" @item.Date">
                                <div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
                                    <div class="row font-12 my-2 ios-divider-line">
                                        <div class="col-10 f-w-600 color-orange text-right">@ViewBag.accountName</div>
                                        <div class="col-2 text-left"> <i class="fas fa-chevron-left  fa-fw  color-orange "></i></div>
                                    </div>
                                    <div class="row font-12 my-2 ios-divider-line">
                                        <div class="col-6 text-gray-600 text-right">Receptions</div>
                                        <div class="col-6 text-gray-600 text-left digit_divider">@Html.DisplayFor(modelItem => item.TotalPayment)</div>
                                    </div>
                                    <div class="row font-12 my-2 ios-divider-line">
                                        <div class="col-6 text-gray-600 text-right">Payments</div>
                                        <div class="col-6 text-gray-600 text-left digit_divider">@Html.DisplayFor(modelItem => item.TotalReception)</div>
                                    </div>
                                    <div class="row font-12 my-2 ios-divider-line">
                                        <div class="col-6 text-gray-600 text-right">Remaining</div>
                                        <div class="col-6 text-gray-900 f-w-600 text-left digit_divider">>@Html.DisplayFor(modelItem => item.Remain)</div>
                                    </div>
                                </div>
                            </a>
                        }@*foreach item*@
                    }@*if model was not null*@


                </form>


            </div>
            <!-- /.container -->
            <div class=" sticky-top ios-content-box-footer p-1" style="bottom: 0">
                <nav class="bottom-bar  container-fluid pr-15p" style="height: 40px;">
                    <div class="row font-12 " style="height: 40px">
                        <div class="col-6 text-right m-auto text-gray-900">Total items found: </div>
                        <div class="col-6 d-inline m-auto  color-orange text-left">@ViewBag.itemCount</div>
                    </div>

                </nav>

            </div>
        </div>
        <!-- End of Main Content -->
    </div>
    <!-- End of Content Wrapper -->
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="padding-top: 50%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header border-0 ">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 10">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title modal-title-ios font-13 f-w-600 text-gray-900">Select Type of Report:</h5>
                </div>
                <div class="modal-body">
                    <div class=" w-100 " style="overflow: auto">

                        <div class="row justify-content-center m-0">

                            <div class=" col-6 col-sm-4 text-center mb-2"><a href="@Url.Action("BankAccountDailyDeatils","Banks",new {accountId =  @ViewBag.accountID,date= "dateReadFromROW", isPayment=true, accountName= ViewBag.accountName})" class="ios-nav-link text-gray-900"><div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/debit-card.svg" class="max-w-55 m-auto"><div class="font-12 mt-2">Payments</div></div></a></div>
                            <div class=" col-6 col-sm-4 text-center mb-2"><a href="@Url.Action("BankAccountDailyDeatils","Banks",new {accountId =  @ViewBag.accountID,date= "dateReadFromROW",isPayment=false, accountName= ViewBag.accountName})" class="ios-nav-link text-gray-900"><div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/income.svg" class="max-w-55 m-auto"><div class="font-12 mt-2">Receptions</div></div></a></div>

                        </div>

                    </div>
                </div>

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



</div>
<!-- End of Page Wrapper -->

1 Ответ

1 голос
/ 14 января 2020

Это довольно легко сделать с jQuery (я надеюсь, что ваш модал взят из bootstrap framework). Вам просто нужно подписаться на показ модального события, получить параметр даты из нажатой ссылки, сгенерировать полные ссылки и заполнить атрибуты href модальных ссылок. Вы можете найти эту документацию полезной.

// define base link url(without date parameter)
var testLink = '/Banks/BankAccountDailyDeatils?accountId=1&accountName=test';//just for display purposes, you should use generated link as a base url
var link = '@Url.Action("BankAccountDailyDeatils", "Banks", new { accountId = ViewBag.accountID, accountName = ViewBag.accountName })';//perhaps it must be encoded properly

//subscribe to the show modal event
$('#exampleModal').on('show.bs.modal', function(e) {
  //retrieve pressed button from the event
  var button = $(e.relatedTarget); // Button that triggered the modal
  //retrieve the date parameter from the button
  var date = button.data('date'); // Extract info from data-* attributes
  //populate links' href attributes
  $('#paymentsLink').attr('href', testLink + '&isPayment=true&date=' + date);
  $('#receptionsLink').attr('href', testLink + '&isPayment=false&date=' + date);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<a href="#" data-toggle="modal" data-target="#exampleModal" data-date="2019-12-12">
  <div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-10 f-w-600 color-orange text-right">@ViewBag.accountName</div>
      <div class="col-2 text-left"> <i class="fas fa-chevron-left  fa-fw  color-orange "></i></div>
    </div>
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-6 text-gray-600 text-right">Receptions</div>
      <div class="col-6 text-gray-600 text-left digit_divider">@Html.DisplayFor(modelItem => item.TotalPayment)</div>
    </div>
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-6 text-gray-600 text-right">Payments</div>
      <div class="col-6 text-gray-600 text-left digit_divider">@Html.DisplayFor(modelItem => item.TotalReception)</div>
    </div>
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-6 text-gray-600 text-right">Remaining</div>
      <div class="col-6 text-gray-900 f-w-600 text-left digit_divider">>@Html.DisplayFor(modelItem => item.Remain)</div>
    </div>
  </div>
</a>

<a href="#" data-toggle="modal" data-target="#exampleModal" data-date="2020-01-14">
  <div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-10 f-w-600 color-orange text-right">@ViewBag.accountName</div>
      <div class="col-2 text-left"> <i class="fas fa-chevron-left  fa-fw  color-orange "></i></div>
    </div>
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-6 text-gray-600 text-right">Receptions</div>
      <div class="col-6 text-gray-600 text-left digit_divider">@Html.DisplayFor(modelItem => item.TotalPayment)</div>
    </div>
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-6 text-gray-600 text-right">Payments</div>
      <div class="col-6 text-gray-600 text-left digit_divider">@Html.DisplayFor(modelItem => item.TotalReception)</div>
    </div>
    <div class="row font-12 my-2 ios-divider-line">
      <div class="col-6 text-gray-600 text-right">Remaining</div>
      <div class="col-6 text-gray-900 f-w-600 text-left digit_divider">>@Html.DisplayFor(modelItem => item.Remain)</div>
    </div>
  </div>
</a>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="padding-top: 50%">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header border-0 ">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 10">
            <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title modal-title-ios font-13 f-w-600 text-gray-900">Select Type of Report:</h5>
      </div>
      <div class="modal-body">
        <div class=" w-100 " style="overflow: auto">

          <div class="row justify-content-center m-0">

            <div class=" col-6 col-sm-4 text-center mb-2">
              <a href="#" id="paymentsLink">
                <div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/debit-card.svg" class="max-w-55 m-auto">
                  <div class="font-12 mt-2">Payments</div>
                </div>
              </a>
            </div>
            <div class=" col-6 col-sm-4 text-center mb-2">
              <a href="#" id="receptionsLink" class="ios-nav-link text-gray-900">
                <div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/income.svg" class="max-w-55 m-auto">
                  <div class="font-12 mt-2">Receptions</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...