2017-12-02 10 views
0

私のばかげた質問に申し訳ありませんが、私は初心者です。 - 初めてラジオボタンを使うときに問題があります。ラジオボタンがチェックされ、私は、これはジアの詳細ベース(20 $、70 $)を使用して新しいページを開きます]ボタンをクリックすると My imageMVCのRadioButton

  • :私は下の画像のようにラジオボタンを作りたいです。しかし、私は何をすべきかわかりません。

  • インデックス:

@model List<Model.Select_buyVip_Result> 
 

 
<div class="panel-body table-responsive"> 
 
    <table style="width:50%" cellspacing="0" class="table table-striped table-bordered table-hover" id="example"> 
 
     <thead> 
 
      <tr> 
 
       <th>#</th> 
 
       <th>Hình thức</th> 
 
       <th>Giá</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      @foreach (var item in Model) 
 
      { 
 
       <tr> 
 
        <td><input type="radio" value="@item.Gia" /></td> 
 
        <td>@item.Ten</td> 
 
        <td>@item.Gia $</td>  
 
       </tr> 
 
       @Html.ActionLink("Thanh toán", "Details", new { id=item.Gia}) 
 
      } 
 
      
 
     </tbody> 
 
    </table> 
 
</div>

  • 詳細:

@model List<Model.Select_buyVip_byGia_Result> 
 

 
<div class="panel-body table-responsive"> 
 
    <table style="width:50%" cellspacing="0" class="table table-striped table-bordered table-hover" id="example"> 
 
     <thead> 
 
      <tr> 
 
       <th>Hình thức</th> 
 
       <th>Giá</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      @foreach (var item in Model) 
 
      { 
 
       <tr> 
 
        <td>@item.Ten</td> 
 
        <td>@item.Gia $</td> 
 
       </tr> 
 
      } 
 

 
     </tbody> 
 
    </table> 
 
</div> 
 
<p> 
 
    @Html.ActionLink("Back to List", "Index") 
 
</p>

  • コントローラー:

public class MuaVipController : Controller 
 
    { 
 
     // GET: MuaVip 
 
     public ActionResult Index() 
 
     { 
 
      var mm = new MuaVipModel(); 
 
      var model = mm.select_vip(); 
 
      return View(model); 
 
     } 
 
     public ActionResult Details(string gia) 
 
     { 
 
      var mm = new MuaVipModel(); 
 
      var model = mm.select_vip_gia(gia); 
 
      return View(model); 
 
     } 
 
    }

  • SQL手順:

CREATE PROCEDURE Select_buyVip_byGia 
 
\t @Gia nvarchar(50) 
 
AS 
 
BEGIN 
 

 
\t SET NOCOUNT ON; 
 
    
 
\t SELECT * from Vip where Gia = @Gia 
 
END 
 
GO

CREATE PROCEDURE Select_buyVip 
 
AS 
 
BEGIN 
 

 
\t SET NOCOUNT ON; 
 
    
 
\t SELECT * from Vip 
 
END 
 
GO

+0

問題を明確にすることはできますか? – AlameerAshraf

+0

私はラジオボタンを使用したいと思います。チェックしてボタンをクリックすると、Giá(費用:20 $、70 $)が得られ、Giaの新しい詳細ページが開きます。しかし、私は何をすべきか分からない。 – Wiliam

+0

私はこれがばかげた質問だと知っています... – Wiliam

答えて

0

あなたの質問は、簡単なJavaScriptで答えることができます。ラジオボタンをチェックすると、ラジオが選択されているかどうかが確認され(入力ボタンによって起動される)、別のページ(item1_details.htmlまたはitem2_details.html)に移動します。ここにはアイテムの詳細を含めることができます。

function validate() { 
 
    var item1 = document.getElementById("item1").checked; 
 
    var item2 = document.getElementById("item2").checked; 
 

 
    if (item1 == true) { 
 
    location.href = "item1_details.html" 
 
    } 
 

 
    if (item2 == true) { 
 
    location.href = "item2_details.html" 
 
    } 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<table class="table table-bordered table-striped table-responsive"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Item</th> 
 
     <th>Price</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <form> 
 
     <tr> 
 
     <td width="15%"> 
 
      <div class="radio"> 
 
      <label><input type="radio" id="item1" name="optradio"></label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>Item 1</label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>9.99</label> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <div class="radio"> 
 
      <label><input type="radio" id="item2" name="optradio"></label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>Item 1</label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>10.99</label> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </form> 
 
    </tbody> 
 
</table> 
 
<br /> 
 
<center> 
 
    <input type="button" onclick="validate()" value="Submit"> 
 
</center>


それとも、あなたが選択したどのような項目に基づいてモーダルを開くことができます:

\t function validate() { 
 
\t \t var item1 = document.getElementById("item1").checked; 
 
\t \t var item2 = document.getElementById("item2").checked; 
 
\t \t 
 
\t \t if (item1 == true) { 
 
\t \t \t location.href = "#openModal1" 
 
\t \t } 
 
\t \t 
 
\t \t if (item2 == true) { 
 
\t \t \t location.href = "#openModal2" 
 
\t \t } 
 
\t }
.modalDialog { 
 
     position: fixed; 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     background: rgba(0,0,0); 
 
     z-index: 99999; 
 
     opacity:0; 
 
     -webkit-transition: opacity 400ms ease-in; 
 
     -moz-transition: opacity 400ms ease-in; 
 
     transition: opacity 400ms ease-in; 
 
     pointer-events: none; 
 
    } 
 

 
    .modalDialog:target { 
 
     opacity:1; 
 
     pointer-events: auto; 
 
    } 
 

 
    .modalDialog > div { 
 
     width: 400px; 
 
     position: relative; 
 
     margin: 10% auto; 
 
     padding: 5px 20px 13px 20px; 
 
     border-radius: 10px; 
 
     background: #eee; 
 
    } 
 

 
    .closeModal { 
 
     background: #606061; 
 
     color: #FFFFFF; 
 
     line-height: 25px; 
 
     position: absolute; 
 
     right: -12px; 
 
     text-align: center; 
 
     top: -10px; 
 
     width: 24px; 
 
     text-decoration: none; 
 
     font-weight: bold; 
 
     -webkit-border-radius: 12px; 
 
     -moz-border-radius: 12px; 
 
     border-radius: 12px; 
 
     -moz-box-shadow: 1px 1px 3px #000; 
 
     -webkit-box-shadow: 1px 1px 3px #000; 
 
     box-shadow: 1px 1px 3px #000; 
 
\t \t border: none; 
 
\t \t height: 24px; 
 
    } 
 

 
    .closeModal:hover { background: #00d9ff; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<table class="table table-bordered table-striped table-responsive"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>Item</th> 
 
     <th>Price</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <form> 
 
     <tr> 
 
     <td width="15%"> 
 
      <div class="radio"> 
 
      <label><input type="radio" id="item1" name="optradio"></label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>Item 1</label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>9.99</label> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <div class="radio"> 
 
      <label><input type="radio" id="item2" name="optradio"></label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>Item 1</label> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="radiotext"> 
 
      <label>10.99</label> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </form> 
 
    </tbody> 
 
</table> 
 
<br /> 
 
<center> 
 
\t <input type="button" onclick="validate()" value="Submit"> 
 
</center> 
 
<div id="openModal1" class="modalDialog"> 
 
<div> 
 
    <button onclick="location.href = '#close'" title="Close" class="closeModal">&times;</button> 
 
    <h2>Item 1</h2> 
 
    <p>Use this space to describe your first item.</p> 
 
</div> 
 
</div> 
 
<div id="openModal2" class="modalDialog"> 
 
<div> 
 
    <button onclick="location.href = '#close'" title="Close" class="closeModal">&times;</button> 
 
    <h2>Item 2</h2> 
 
    <p>Use this space to describe your second item.</p> 
 
</div> 
 
</div>

(元モーダルコードhereを見る)

関連する問題