jquery - 在弹出模式中将 js 部分放在哪里以及如何传递变量 asp.net mvc

Question

我有两个这样的按钮:

<button class="platinum_inquiry" type="submit" data-toggle="modal" data-target="#clientContactModal">Send Inquiry</button>
<button class="gold_inquiry" type="submit" data-toggle="modal" data-target="#clientContactModal">Send Inquiry</button>

我在同一个 cshtml 类中有一个模式:

<div class="modal fade" id="clientContactModal" tabindex="-1" role="dialog" style="padding-top:50px !important;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">We need some more information</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>
                <div class="modal-body">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    <div class="form-group">
                        @Html.LabelFor(model => model.DateReservation, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.DateReservation, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                            @Html.ValidationMessageFor(model => model.DateReservation, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.ApartmentName, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.ApartmentName, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                            @Html.ValidationMessageFor(model => model.ApartmentName, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.GuestsNumber, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.TextBoxFor(model => model.GuestsNumber, guests.ToString(), new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                            @Html.ValidationMessageFor(model => model.GuestsNumber, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Mobile, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Mobile, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Mobile, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label" })
                        <div class="col-md-10">
                            @Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { @class = "form-control", @rows = 5 } })
                        </div>
                    </div>

                </div>
                <div class="modal-footer">

                    @*<button type="submit" class="btn btn-primary" onclick="function(){alert(" dsdsdsds")};">Send message</button>*@
                    <button type="button" class="btn btn-primary sendButtonDYNAMICSUFFIX - platinum or gold based on click button">Send message</button>
                </div>
            </form>
        </div>
    </div>
</div>

问题:

1. 如何向我的模态传递一个变量或字符串，从中调用模态按钮？例如，我有白金和黄金按钮，因此我想在模式 Welcome Gold memeber 或 Welcome platinum memeber

   的标题中显示
   1. 我想在用户点击发送预订按钮时预示引导成功或错误提示。但是我试着把js代码放到我的父页面里，它似乎无法识别它？甚至模态 html 代码都在其父级的同一类中？

主要思想是，当用户点击发送预订时，它会触发对我的 HttpGet(可能是 post) Controller 的 ajax 调用，并发送电子邮件(映射到我的托管邮件服务器)。

这是我的 Controller :

        public bool SendMessage(ClientModel msgModel)
        {
            try
            {
                SmtpClient smtpClient = new SmtpClient("smtp.gmail.com", 587);

                smtpClient.Credentials = new NetworkCredential("xxx@xxx.com", "xxxxx");
                smtpClient.UseDefaultCredentials = true;
                smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
                smtpClient.EnableSsl = false;
                MailMessage mail = new MailMessage();

                //Setting From , To and CC
                mail.From = new MailAddress(msgModel.Email, "OnyxWeb");
                mail.To.Add(new MailAddress("xxx@xxx1.com"));
                //mail.CC.Add(new MailAddress("MyEmailID@gmail.com"));

                smtpClient.Send(mail);
                return true;
            }
            catch (Exception ex)
            {

                //throw;
                return false;
            }
        }

Answer 1

您可以使用可通过事件处理程序访问的数据属性，然后您可以操作字符串。

<button data-memberType="platinum" class="platinum_inquiry btn_inquiry" type="subbuttonmit">Send Inquiry</button>
<button data-memberType="gold" class="gold_inquiry btn_inquiry" type="button">Send Inquiry</button>

事件处理器:

$(function () {
    $('.btn_inquiry').on('click', function () {
        let memberType = $(this).data('memberType');
        $('#clientContactModal').find('.modal-title').html(`Hello ${memberType} member, we need some more information`);
        $('#clientContactModal').modal('show');
    });
});

您可能还想在传递给服务器的模型中包含成员类型。 (如果需要，请记住在事件处理程序中分配值)

@Html.HiddenFor(model => model.MemberType)

ps 你可以在你的 layout 页面、RenderScripts 部分或这个 View 的 script 标签中添加这个 javascript