前端之家

  1. 首页
  2. 问答

js部分放在弹出模式的位置以及如何将变量传递给asp.net mvc

• 问答

我有两个这样的按钮：

<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,@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(),@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,@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

    的标题中
    1. 当用户单击“发送预订”按钮时，我想阻止引导成功或错误警报。但是我试图将js代码放到我的父页面中，似乎无法识别它？甚至模态html代码都在其父代的同一个类中？

主要思想是，当用户单击“发送预订”时，它会触发对我的HttpGet（也许是发布）控制器的ajax调用，并发送电子邮件（与我的托管邮件服务器映射）。

这是我的控制者：

        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;
            }
        }
leohejinling 回答：js部分放在弹出模式的位置以及如何将变量传递给asp.net mvc

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

<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部分或script标签内将此JavaScript广告

,

可以直接启动消息，而不必发送参数。

_布局视图 

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

视图 

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

结局

,

您的js部分应放置在html代码下方，最好放在“”之前，以便能够看到上方的html ID和类。

asp.net-mvccsshtmljquery
本文链接：https://www.f2er.com/3129366.html

大家都在问