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：

… (function() {
    switch(item.status) {
        case 'upcoming':  return 'label-upcoming';
        case 'available': if (item.type == 'ticket_required' && item.hasTicket)
                              return 'label-ticket';
        default: return '';
    }
}()) …

服务器端：

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);
  }
});

如何根据True或false使用JQuery渲染局部视图？

3 个答案: