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

【问题标题】：Modal popup validation in MVC applicationMVC 应用程序中的模态弹出验证
【发布时间】：2018-01-24 19:22:50
【问题描述】：

我有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());
        });  
    });

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

【问题讨论】：

您的意思是检查txtMare 文本框是否有值？如果是这样，您可以使用var value = $("#txtMare").val(); if (value) { // display modal } })。但是，如果您对该属性应用了其他验证属性，则需要测试验证器的.valid() 方法
@StephenMuecke，是的，我想检查文本框中是否有任何值。您能否为此提供简单的示例。我现在得到了价值。请指导我。
我之前评论中的代码可以做到这一点。如果文本框为空，则 value 将是 null 如果 if 块内的代码不会执行
@StephenMuecke，即使 else 块正在执行，模态仍然显示。 $(function () { $('#Producetable').click(function () { debugger; var value = $("#txtMare").val(); if (value != "") { $('#msg').html($("#txtMare").val()); $('#Maretable').modal('show'); } else { $('#Maretable').modal('hide'); } }); });
我的代码有value != ""吗？？

标签： jquery asp.net-mvc

【解决方案1】：

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

function CloseModalPopup() {		
		$("#Maretable").hide();
}

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

【讨论】：

您的解决方案无法正常工作。当模式弹出时，我无法关闭它。请您检查一次。谢谢。
嗨 Raj，您现在可以关闭模式弹出窗口了。我更新了代码和脚本，请重新检查。谢谢:)