如何渲染部分视图使用JQuery取决于True或false

Question

我有一个错误框，我在几乎所有的页面上使用，我已经开始尝试并在部分视图中放入，所以如果返回正确的结果，我可以调用该框。例如，我有一个JQuery，它将验证一个文本框来检查电话号码，如果它不是正确的格式，那么一个布尔值将返回为false。在这一点上，我想呈现部分视图，并同时更改错误框的内容，因为它用于许多验证检查。

我该怎么做?

JQuery:

 <script>
        $('#ContactUsButton').click(function () {
            var PhoneNum = $('#ContactUsPhoneNumTxt').val();
            var regex = /(?([0-9]{3}))?([ .-]?)([0-9]{3})2([0-9]{4})/;
            var rt = false;
            if (!regex.test(PhoneNum)) {
                rt = false;
                $("#ErrorBoxText").html("Error : Incorrect data type in Phone Number");
            }
            else {
                rt = true;
            }
            //Code which will call partial view if RT is false and change the content of the div
            return rt;
        })
    </script>

HTML:

     <div id="RenderErrorBoxPartial">
                    @Html.Partial("_ErrorBox")
                </div>

部分:

<div id="ErrorBox" hidden>
    <div class="alert alert-danger" role="alert">
        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
        <span class="sr-only">Error:</span>
        <p id="ErrorBoxText"></p>
    </div>
</div>

Answer 1

我对你的错误HTML做了一个小的修改。你能试着用一下这个代码吗?

    <div id="ErrorBox" class="hidden">
        <div class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            <p id="ErrorBoxText"></p>
        </div>
    </div>
    <script type="text/javascript">
        $('#ContactUsButton').click(function () {
            var PhoneNum = $('#ContactUsPhoneNumTxt').val(),
                regex = /(?([0-9]{3}))?([ .-]?)([0-9]{3})2([0-9]{4})/,
                rt = false,
                errorTextbox = $("#ErrorBoxText");
            if (!regex.test(PhoneNum)) {
                errorTextbox.text("Error : Incorrect data type in Phone Number")
                                  .removeClass("hidden");
            }
            else {
                errorTextbox.text("")
                            .addClass("hidden");
                rt = true;
            }
            //Code which will call partial view if RT is false and change the content of the div
            return rt;
        })
    </script>

Answer 2

在任何情况下使用.load方法加载partialview

$('#ContactUsButton').click(function () {
      var PhoneNum = $('#ContactUsPhoneNumTxt').val();
      var regex = /(?([0-9]{3}))?([ .-]?)([0-9]{3})2([0-9]{4})/;
      var rt = false;
      if (!regex.test(PhoneNum)) {
           $("#ErrorBoxText").html("Error : Incorrect data type in Phone Number");
      }
      else {
           $("#RenderErrorBoxPartial").load("/ControllerName/LoadPartial",function(){
                   //In case you have to do anything once load it complete
           })
      }
})

在控制器中添加一个actionresult，返回partialView

public ActionResult LoadPartial()
{
     return PartialView("_YourPartialViewName");
}

注意:你不需要在这里赋值任何bool变量或返回任何东西来加载partialview。直接加载就行了

Answer 3

如果你有mvc，你可以使用Ajax Link: Jquery:

var ajaxUrl = '@Url.action("ActionName", "controller")';
$.ajax({
  url: ajaxUrl,
  type: 'POST',
  dataType: 'html',
  success: function (result) {
    $('#RenderErrorBoxPartial').empty().append(result);
    $('#ErrorBoxText').html("Error : Incorrect data type in Phone Number"); //to make sure it sets the text
  },
  error: function (error) {
    console.log(error);
  }
});

服务器端:

Public ActionResult ActionName () {
  return View("_ErrorBox");
}