Where to put js section in a pop-up modal and how to pass variables asp.net mvc

Question

I have two buttons like this:

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

and I have a modal inside same cshtml class:

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

Questions:

How to pass to my modal a variable or string from which button is called modal? I have for example platinum and gold buttoons, and therefore I wolud like to present in a header of a modal Welcome Gold memeber or Welcome platinum memeber
1. I want to prevew bootstrap success or error alert when user clicks on send reservation button. But I tried to put js code into my parent page and it seems it cant recognize it? even the modal html code is in the same class of its parent?

the main idea is to when user click send reservation it triggers an ajax call to my HttpGet (maybe post) controller, and sends email (mapped with my hosting mail servers).

This is my 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;
            }
        }

The first part of your question can be done this way : First create an attribute called ( for example ) `msg="Welcome Gold Member !"` in your button , then create a `DOM` function that reads this attribute when you click on button and changes the title of modal `$('.title').html(msg)` . — Ahmed Tag Amer, Nov 10 '19 at 12:16
what JavaScript I see no JavaScript (I assume js to mean that). You might also consider partial views to avoid an overly complex view, but hard to tell that as you do not post the entire view — Mark Schultheiss, Nov 10 '19 at 13:44
Your have multiple questions, where to put the JavaScript is a question already answered in old questions here. So we can ignore you there and focus on the functional code challenge. Do you also have a question on how to call the method you posted with ajax? If so what have you tried there, please post that code. https://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html/3531534#3531534 and https://stackoverflow.com/q/436411/125981 and more. — Mark Schultheiss, Nov 10 '19 at 14:21

score 4 · Answer 1 · answered Nov 19 '19 at 10:16

You can use data attributes which can be accessed via the event handler, you can then manipulate the string.

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

Event Handler:

$(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');
    });
});

You may also want to include the member type in the model that you pass to the server. (remember to assign the value in the event handler if this is required)

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

ps you can just ad this javascript in your layout page, in the RenderScripts section or within script tags on this view

Binding state between a page and a modal on the page is really an area where a JavaScript framework like angular/knockout/react would shine. If you do not have the room for that in your development though (or if this is a one-off situation), following the guide here should be able to find and re-bind the relevant areas. — Brandon Barkley, Nov 19 '19 at 16:52

LPGTE SOFTS · Answer 2 · 2019-11-10T18:12:18.207

it is possible to directly initiate the message instead of sending the parameters.

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

Cordialement

you do not need `type="text/javascript"` as it defaults to that — Mark Schultheiss, Nov 10 '19 at 13:50
The script section here should be right at the end before the body close tag `
` You also have jQuery code there but do not include jQuery as you have it. — Mark Schultheiss, Nov 10 '19 at 14:02
@Mark Schultheiss the jQuery should be added in _Layout.cshtml view (@Scripts.Render("~/bundles/jquery")) — LPGTE SOFTS, Nov 10 '19 at 14:49
If you make that jump (to a layout; bundle or not for .net Core, which is fine) you should have a render for the client scripts in two places `@RenderSection("BodyScripts",false)` (one for head, HeadScripts one at end of body ) and not include the ` ` in the view here use`@section BodyScripts {` note using ` ` will also make it HTML5 re: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 but this is perhaps getting too far off topic — Mark Schultheiss, Nov 10 '19 at 15:40
The concerned view will be rendered from the RenderBody section shown in the _Layout masterpage and the jquey will be added with @Scripts.Render("~/bundles/jquery") instruction. — LPGTE SOFTS, Nov 10 '19 at 18:20
Also the message will be displayed based on the jQuery code indicated in the view. — LPGTE SOFTS, Nov 10 '19 at 18:28

score -3 · Answer 3 · answered Nov 10 '19 at 13:06

-3

Your js section should be placed below your html codes preferably before "" so that it will be able to see your html Ids and classes above.

answered Nov 10 '19 at 13:06

PopGlintz

15
4

before what "" I didnt catch this? – Stefan0309 Nov 10 '19 at 13:26
Before "" – PopGlintz Nov 10 '19 at 13:27
Maybe you don't understand what I am saying. – PopGlintz Nov 19 '19 at 17:39

Where to put js section in a pop-up modal and how to pass variables asp.net mvc

3 Answers3