Question

我有MareBook.cshtml部分视图，我已完成验证以检查textox txtMare是否为空。如果文本框不为空，则将文本框值显示为模态弹出窗口，否则不显示模态弹出窗口。

    @using (Html.BeginForm("Pedigrees", "Pedigrees", FormMethod.Post))
    {
      @Html.TextBoxFor(m => m.txtMare)
      @Html.ValidationMessageFor(m => m.txtMare, "", new { @class = "error" })
      <button type="button" id="Producetable" class="btn btn-default" data-toggle="modal" data-target="#Maretable">Produce Page</button>

//Modal
<div id="Maretable" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
           ...
          <div class="modal-body">
          <h5>Producing table :<label id="msg"></label></h5>
          </div>
         <div class="modal-footer">
           ....
         <button type="submit" class="btn btn-primary">Save changes</button>
         </div>              
        }

获取值的脚本：

$(function () {
        $('#Producetable').click(function () {
          $('#msg').html($("#txtMare").val());
        });  
    });

任何人都请告诉我进行验证的方法。谢谢。

Answer 1

＆＃13;

$("#Producetable").click(function() {
	var loInputText = $('#txtMare').val();
	if(loInputText != ""){
		$("#Maretable").show();
	}
});

function CloseModalPopup() {		
		$("#Maretable").hide();
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


Add Your Input here: <input type="text" id="txtMare">
<br/><br/><button type="button" id="Producetable" class="btn btn-default">Produce Page</button>



<div class="modal" tabindex="-1" role="dialog" id="Maretable">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" onclick="CloseModalPopup();" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" onclick="CloseModalPopup();">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

MVC应用程序中的模态弹出验证

1 个答案: