Jquery 在弹出模式中放置js节的位置以及如何传递变量asp.net mvc_Jquery_Html_Css_Asp.net Mvc

Jquery 在弹出模式中放置js节的位置以及如何传递变量asp.net mvc

jquery html css asp.net-mvc

Jquery 在弹出模式中放置js节的位置以及如何传递变量asp.net mvc,jquery,html,css,asp.net-mvc,Jquery,Html,Css,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">S

我有两个这样的按钮：

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

js部分应该放在html代码下面，最好放在“”之前，这样它就可以看到上面的html ID和类。

可以直接启动消息而不是发送参数

\u布局视图

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


现代商业-@ViewBag.Title
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@style.Render（“~/bundles/somecss”）
.........
@RenderBody（）
.........

视图

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

@model namespace.MyModel
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
}
美元（“#白金查询”）。在（“点击”，ShowModal（“黄金”）；
美元（“#黄金查询”）。在（“点击”，ShowModal（“白金”）；
函数showmodel（类型）{
var模式=$（“#客户联系模式”）；
如果（值=='Gold'）
{
$（“#消息”）.text（“欢迎金会员”）；
}
else if（值=='platinum'）
{
$（“#消息”）.text（“欢迎白金会员”）；
}
模态。模态（“显示”）；
}   
询价
询价
............
.................. 

..................

Cordalement

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

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

您可能还希望在传递给服务器的模型中包含成员类型。（如果需要，请记住在事件处理程序中指定值）

ps您可以在您的

布局

页面中，在

RenderScripts

部分或此视图上的

script

标记中添加此javascript

问题的第一部分可以这样做：首先在您的按钮中创建一个名为

msg=“Welcome Gold Member！”

的属性，然后创建一个

DOM

函数，当您单击按钮并更改modal

$（'.title'）.html（msg）

的标题时，该函数读取该属性。我看不到什么JavaScript（我假设js就是这个意思）。您也可以考虑部分视图以避免过于复杂的视图，但是很难说明，当您不张贴整个视图时，您有多个问题，在哪里放置JavaScript是一个在老问题中已经回答过的问题。因此，我们可以忽略您，将重点放在函数代码挑战上。对于如何调用使用ajax发布的方法，您是否也有疑问？如果是的话，你在那里尝试了什么，请发布代码。还有更多。在什么“我没听懂这个”之前？在“可能你不明白我在说什么”之前。你不需要

type=“text/javascript”

默认情况下，此处的脚本部分应位于正文结束标记之前的末尾。

此处也有jQuery代码，但不包括现有的jQuery。@Mark Schulthes如果进行跳转，则jQuery应添加到_Layout.cshtml视图（@Scripts.Render（~/bundles/jQuery））（对于布局；是否捆绑.net Core，这很好）您应该在两个位置对客户端脚本进行渲染

@RenderSection（“BodyScripts”，false）

（一个用于头部，一个用于头部脚本，另一个位于身体末端），并且不包括视图中的

，请使用

@section BodyScripts{

注意使用

也会使其成为HTML5：但这可能离主题太远了。相关视图将从_布局母版页中显示的RenderBy部分呈现，jquey将添加@Scripts.Render（“~/bundles/jquery”）说明。页面和页面上的模式之间的绑定状态实际上是一个JavaScript框架（如angular/knockout/react）将大放异彩的领域。如果您在开发中没有这样的空间（或者如果这是一次性情况），那么按照这里的指南应该能够找到并重新绑定相关区域。

$(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)