将优惠券代码隐藏在按钮标签后，当点击按钮时显示在模型中。

Question

需要帮助使用.Net MVC编码一个隐藏优惠券功能。我正在寻找隐藏一个优惠券代码背后的按钮和代码应该出现在一个模式，只要任何一个点击按钮。我试图在谷歌上寻找帮助，但无法找到一个相同的结构。

这是我的代码为CouponPage

<div class="container-fluid text-center">
        <div class="row content">
            <div class="col-sm-2 sidenav">
                <p>@Html.Action("StoreMenuPartial", "Shop")</p>
                <p>@Html.Action("CategoryMenuPartial", "Shop")</p>
            </div>
            <div class="col-md-8 text-left" style="padding:20px;">
                @foreach (var item in Model)
                {

                    <div class="card">
                        <div class="row">
                            <div class="store">
                                <div class="col-md-2 offer">
                                    <p>@Html.Raw(item.Offer)</p>
                                </div>

                                <div class="col-md-6">
                                    <strong>@Html.DisplayFor(m => item.Title)</strong>
                                </div>

                                <div class="col-md-4">
                                    <a class="btn btn-danger pull-right" style="width:190px;" href=" @Html.DisplayFor(modelItem => item.OfferLink)" target="_blank">GET DEAL</a>
                                </div>

                                <div class="col-lg-8">
                                    <p>@Html.Raw(item.OfferDetails) </p>
                                </div>
                            </div>
                        </div>                        
                    </div>
                }
                </div>
            <div class="col-sm-2 sidenav">
                <div class="well">
                    <p>ADS</p>
                </div>
                <div class="well">
                    <p>ADS</p>
                </div>
            </div>
        </div>
    </div>

这是我的Coupn模型班

public class Coupn
    {
        [Key]
        public int CoupnID { get; set; }
        public string Title { get; set; }
        public int StoreID { get; set; }
        public string StoreName { get; set; }
        [AllowHtml]
        public string Offer { get; set; }
        [AllowHtml]
        public string OfferDetails { get; set; }
        public string OfferLink { get; set; }
        public int CatID { get; set; }
        public string CatName { get; set; }
        public string Slug { get; set; }
        public string CouponCode { get; set; }

        [ForeignKey("StoreID")]
        public virtual Store Store { get; set; }

        public IEnumerable<SelectListItem> Stores { get; set; }

        [ForeignKey("CatID")]
        public virtual Category Category { get; set; }

        public IEnumerable<SelectListItem> Categories { get; set; } 
    }
}

我指的是

public string CouponCode { get; set; }

属性来显示优惠券，但它也应该在Modal中打开。

请帮助我们

Answer 1

你可以使用 partial view 与 jquery ajax来实现。

控制器。

  public ActionResult ShowCouponCode(int coupnId)
        {
            MyDbContext context = new MyDbContext();
            var model = context.Coupn.Find(coupnId);
            return PartialView("_CouponCode", model);
        }

更新

为了保证打开模态后跳转到相应字段的url，可以将其记录为一个 attribute 在相应的按钮上，比如data-offerlink，(这里我假设存储url的属性是OfferLink)

优惠券页面。

    @model IEnumerable<WebApplication_mvc.Models.Coupn>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
@section Scripts{

    <script>
        $(function () {
            $(".showmodal").click(function () {
                event.preventDefault();
                var coupnId = $(this).attr("data-coupnId");
                var url = $(this).attr("data-offerlink");
                $.ajax({
                    type: "POST",
                    url: "/Shop/ShowCouponCode",
                    data: { "coupnId": coupnId },
                    success: function (data) {
                        $('#partial').html(data);
                        window.open(url);
                    }
                })
            });

        });
    </script>

}
<div class="container-fluid text-center">
    <div class="row content">
        <div class="col-sm-2 sidenav">
            @*<p>@Html.Action("StoreMenuPartial", "Shop")</p>
                <p>@Html.Action("CategoryMenuPartial", "Shop")</p>*@
        </div>
        <div class="col-md-8 text-left" style="padding:20px;">
            @foreach (var item in Model)
            {

                <div class="card">
                    <div class="row">
                        <div class="store">
                            <div class="col-md-2 offer">
                                <p>@Html.Raw(item.Offer)</p>
                            </div>

                            <div class="col-md-6">
                                <strong>@Html.DisplayFor(m => item.Title)</strong>
                            </div>

                            <div class="col-md-4">
                                <a class="btn btn-danger pull-right" style="width:190px;" href=" @Html.DisplayFor(modelItem => item.OfferLink)" target="_blank">GET DEAL</a>
                            </div>

                            <div class="col-lg-8">
                                <p>@Html.Raw(item.OfferDetails) </p>
                            </div>

                            <div class="col-lg-3">
                                <button class="btn btn-primary btn-lg showmodal" data-toggle="modal" data-target="#myModal" data-coupnId="@item.CoupnID" data-offerlink="@item.OfferLink">Show CouponCode</button>

                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    <div id="myModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header ">
                    <h5 class="modal-title">Coupon Code</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="partial">

                </div>
            </div>
        </div>
    </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>ADS</p>
            </div>
            <div class="well">
                <p>ADS</p>
            </div>
        </div>
    </div>
</div>

PartialView，其中名为_CouponCode.cshtml。

    @model WebApplication_mvc.Models.Coupn


    <script>
    $(".copyCode").click(function () {
        var copyText = $("#code");
        copyText.select();
        document.execCommand("copy");
        alert("You have copied the CouponCode!");
    })
</script>

<div class="modal-body">
    <label class="col-2 control-label">The CouponCode of @Html.DisplayFor(m => Model.CoupnID)</label>
    <div class="col-4">
        <input type="text" id="code" value="@Html.DisplayFor(m => Model.CouponCode)" class="form-control" />
    </div>
</div>
<div class="modal-footer">
    @if (!string.IsNullOrEmpty(Model.CouponCode))
    {
        <button type="button" class="btn btn-secondary copyCode">Copy Coupon Code</button>
    }
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

Coupon页面中的Js。

@section Scripts{

    <script>
        $(function () {
            $(".showmodal").click(function () {
                event.preventDefault();
                var coupnId = $(this).attr("data-coupnId");
                var url = $(this).attr("data-offerlink");
                $.ajax({
                    type: "POST",
                    url: "/Shop/ShowCouponCode",
                    data: { "coupnId": coupnId },
                    success: function (data) {
                        $('#partial').html(data);
                        window.open(url);
                    }
                })
            }); 
        });
    </script>

}

下面是测试结果。