【问题标题】:How to pass property to modal in ASP.NET MVC Razor view?如何在 ASP.NET MVC Razor 视图中将属性传递给模式?
【发布时间】:2020-01-14 07:05:16
【问题描述】:

我有一个如下 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 -->

【问题讨论】:

    标签: c# jquery ajax asp.net-mvc


    【解决方案1】:

    使用 jQuery 很容易做到(我希望你的 modal 来自 bootstrap 框架)。 您只需订阅显示模式事件,从按下的链接中获取日期参数,生成完整链接并填充模式链接的 href 属性。 您可能会发现 this docs 很有帮助。

    // 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>

    【讨论】:

    • Boostrap 文档链接非常有用且内容丰富
    猜你喜欢
    • 2021-12-01
    • 2020-04-24
    • 2023-03-15
    • 2020-12-16
    • 1970-01-01
    • 2011-05-08
    • 2012-06-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多