ラジオボタンをクリックするとモーダルポップアップが表示されます

ASP.NETに精通している小規模なプロジェクトに取り組んでいます。は私がラジオボタンをクリックするとモーダルポップアップが表示されます

<div class="col-lg-12"> 
    <div class="form-group"> 
     @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" }) 
     <div class="col-lg-9"> 
      @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" }) 
     </div> 
    </div> 
</div> 

<div class="col-lg-12"> 
    <div class="form-group"> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { id = "", value = "" }) North East 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { id = "", value = "" }) North West 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { id = "", value = "" }) South West 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { id = "", value = "" }) South East 
     </div> 
    </div> 
</div>

メートル=> m.COUNTRY_AREAは4つのラジオボタンを生成する必要があります。このモデル

public partial class COUNTRIES 
{ 
public int COUNTRY_ID { get; set; } 
public string COUNTRY_NAME { get; set; } 
public int COUNTRY_AREA { get; set; } 
}

ビューを持っている、と4つのラジオボタンは、それに関連付けられています。

私は何を達成したいことは、私が上でクリックすることです：

のRadioButton 1、それはあなたが北東からです」というメッセージをポップアップモーダルフォームを表示する必要があり

のRadioButton 2、それが表示されるはずです。ポップアップモーダルフォーム。「あなたはノースウェスト出身です。

RadioButton 3、メッセージ「あなたは南東から来たものです。

RadioButton 1、メッセージは「あなたはサウスイーストからです」というポップアップモーダルフォームを表示する必要があります。

どのように私はこれが動作すること

出典

2017-05-24 Jibike

...することができますあなたはあなたの質問に、1つのラジオボタンのレンダリングされたHTMLを追加しますか？ – Hackerman

行くのです、そして唯一のJavaScriptの機能があるように、それが加味されて：あなたは簡単にJavaScriptを使用していることを達成することができます

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index706</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".DoPopup").click(function (event) { 
       alert("You are from the " + event.target.id); 
      }) 
     }) 
    </script> 
</head> 
<body> 
    <div class="col-lg-12"> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" }) 
      <div class="col-lg-9"> 
       @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" }) 
      </div> 
     </div> 
    </div> 

    <div class="col-lg-12"> 
     <div class="form-group"> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { @class = "DoPopup", id = "North East", value = "" }) North East 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { @class = "DoPopup", id = "North West", value = "" }) North West 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { @class = "DoPopup", id = "South West", value = "" }) South West 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { @class = "DoPopup", id = "South East", value = "" }) South East 
      </div> 
     </div> 
    </div> 
</body> 
</html>

出典

2017-05-24 17:29:17 kblau

https://jsfiddle.net/kblau237/3m27una2/ – kblau

ラジオボタンをクリックするとモーダルポップアップが表示されます

答えて

関連する問題