文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将属性传递给ASP.NET MVC Razor视图中的模式？

问如何将属性传递给ASP.NET MVC Razor视图中的模式？
EN

Stack Overflow用户

提问于 2020-01-14 15:05:17

回答 1查看 506关注 0票数 0

我有一个剃刀视图如下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 -->

jquery

ajax

asp.net-mvc

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-14 16:54:18

用jQuery很容易做到(我希望你的模式来自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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59728914

复制

相似问题

问如何将属性传递给ASP.NET MVC Razor视图中的模式？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将属性传递给ASP.NET MVC Razor视图中的模式？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将属性传递给ASP.NET MVC Razor视图中的模式？
EN