将CouponCode隐藏在button标签后面，点击Button时显示在model中

Question

需要有关使用 .Net MVC 编写隐藏优惠券功能的帮助。我希望将优惠券代码隐藏在按钮后面，只要有人点击按钮，代码就会出现在模式中。我试图在 google 上寻求帮助，但找不到相同的结构。

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

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; }

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

请帮忙

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);
        }

更新

为了保证打开modal后跳转到相应字段的url，可以在data-offerlink等相应按钮上记录为attribute。（这里我假设属性存储 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>

名为 _CouponCode.cshtml 的 PartialView:

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

优惠券页面中的 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>

}

测试结果如下：

将CouponCode隐藏在button标签后面，点击Button时显示在model中

Hide CouponCode behind button tag, and display in model when Click on Button

asp.net

asp.net-mvc

asp.net-mvc-4

asp.net-core

更新