【问题标题】:RadioButton in MVCMVC 中的单选按钮
【发布时间】:2018-05-16 09:42:19
【问题描述】:

对不起,我的白痴问题,但我是新手。 - 我第一次使用单选按钮时遇到问题。我想制作如下图所示的单选按钮: My image

  • 当检查单选按钮并单击按钮,这将打开新页面,其中包含GIA的详细信息(20 $,70 $)。但我不知道该怎么办。

  • 索引:

@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 
	@Gia nvarchar(50)
AS
BEGIN

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

CREATE PROCEDURE Select_buyVip 
AS
BEGIN

	SET NOCOUNT ON;
  
	SELECT * from Vip 
END
GO

【问题讨论】:

  • 你能澄清你的问题吗!
  • 我想使用单选按钮,当我检查并单击按钮时,这将获得价值 Giá(Cost , ex:20$,70$) 并打开 Gia 的新详细信息页面。但我不知道该怎么办。
  • 我知道这是个白痴问题...
  • 您的单选按钮已经存在并且详细信息按钮已经存在。你还需要什么?验证?
  • @Wiliam 您在这里指的是哪个按钮?对单选按钮有什么特殊需求吗?

标签: html asp.net-mvc radio-button detailsview


【解决方案1】:

您的问题可以用简单的 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>


或者,您可以根据您选择的项目打开一个模式:

	function validate() {
		var item1 = document.getElementById("item1").checked;
		var item2 = document.getElementById("item2").checked;
		
		if (item1 == true) {
			location.href = "#openModal1"
		}
		
		if (item2 == true) {
			location.href = "#openModal2"
		}
	}
.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;
		border: none;
		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>
	<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)

【讨论】:

    猜你喜欢
    • 2011-12-01
    • 1970-01-01
    • 2014-07-26
    • 2018-01-23
    • 1970-01-01
    • 2012-06-04
    • 1970-01-01
    • 2011-11-15
    • 1970-01-01
    相关资源
    最近更新 更多