Где разместить секцию 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. Как передать моей модальной переменную или строку, из которой кнопка называется модальной? У меня есть, например, платиновые и золотые бутоны, и поэтому я хотел бы представить в заголовке модальное приветствие Gold memeber или Welcome platinum memeber

2. Я хочу заранее предупредить об успешном запуске или предупреждении об ошибке, когда пользователь нажимает кнопку «Отправить бронирование». Но я попытался поместить js-код в родительскую страницу и кажется, что он не может его распознать? даже модальный html-код находится в том же классе, что и его родитель?

основная идея заключается в том, что когда пользователь нажимает кнопку «отправить резервирование», он запускает ajax-вызов в мой HttpGet (может быть, пост) и отправляет электронную почту (сопоставленную с почтовыми серверами моего хостинга).

Это мой контроллер:

        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

можно напрямую инициировать сообщение вместо отправки параметров.

_Layout View

<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Modern Business - @ViewBag.Title    
    </title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")       
    @Styles.Render("~/bundles/somecss")

</head>

<body>
    .........

    @RenderBody()

    .........
</body>

</html>

The View

@model namespace.MyModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<head>
  <script type="text/javascript">    

     $("#platinum_inquiry").on("click", ShowModal('Gold'));
     $("#gold_inquiry").on("click", ShowModal('platinum'));  

     function ShowModal(type) {      
      var modal = $("#clientContactModal");
      if(value=='Gold')
      {
         $("#Message").text("Welcome Gold memeber");
      }
      else if(value=='platinum')
      {
         $("#Message").text("Welcome platinum memeber");
      }
          modal.modal("show");        
   }   

  </script>
</head>
<body>
 <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> 
    ............

 <div class="modal fade modal-centered" id="clientContactModal" tabindex="1" role="dialog"  aria-hidden="true">        
    .................. 
       <p id="Message"></p>
    ..................      
 </div>

</body>

Кордиаэлемент

Answer 2

Ваш раздел js должен быть помещен ниже ваших html-кодов, предпочтительно перед "", чтобы он мог видеть ваши html-идентификаторы и классы выше.