从 Spring MVC BE 打开 Bootstrap 对话框 window

Question

我有一个 Spring MVC 控制器和 bootstrap 页面。

当我提交表单并向此端点发送一些负载时，如果不满足某些条件，我想显示确认信息 window:

API:

    @PostMapping(value = "/pairs")
    public String addPair(@ModelAttribute StepForm addPairStepForm,
                          Model model) {
    ....... // do some check and trigger modal dialog in FE
    }

Bootstrap 页数：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
        
    <!-- Modal -->
    <div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Pair already exists for the same exchange.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Continue</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
                   
        <div class="row justify-content-center align-items-center">
            <div class="col-md-10">
                <form id="add_pair_form" class="form-inline" action="#" th:action="@{/pairs}"
                      th:object="${stepForm}"
                      autocomplete="off"
                      method="post">

                    <div class="row g-3 align-items-center mb-1 mt-1">
                        <div class="col-auto">
                            <label for="pair" class="form-label">New</label>
                        </div>
                        <div class="col-auto">
                            <input id="pair" class="form-control" name="pair" type="text"
                                   placeholder="Pair to be added."
                                   th:field="*{pair}"
                                   required
                                   autofocus>
                        ......................................
                        </div>                            
                    </div>

                    <div class="form-group mb-1 mt-1">
                    <button type="submit" class="btn btn-primary submit_btn">Submit</button>

                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
                        Validate
                    </button>
                </div>
                    
                </form>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>       
</main>
</body>
</html>

当我提交表单和 post 一些负载到 Spring BE 时，如何打开模态对话框 window？我想在 BE 中做一些验证，如果出现错误显示对话框 window。

Answer 1

我假设你想用 id="pair" 验证输入您要检查此条目是否为空：

$( "#add_pair_form" ).submit(function( event ) {
  event.preventDefault();
  const pairValue = $("#pain").val();

  if(pairValue.trim() == "") {
     // show alert dialogue
    alert('YOUR ERROR MESSAGE');
    return;
  }
  ...

  $.ajax({
    url: "API_URL",
    success: function(result){
      // result is data from response
      ....
    }
  });
});

记住这是一个例子:)

Answer 2

您需要一些机制来表明您的视图应该显示您的模式。

因为您正在使用 Spring 和 Thymeleaf，例如，您可以尝试在 Spring 模型中设置一个 boolean 标志，比方说 pairAlreadyExistsWithTheSameExchange，在 addPairs 方法中，当满足适当的条件时：

@PostMapping(value = "/pairs")
public String addPair(@ModelAttribute StepForm addPairStepForm,
                      Model model) {
  ....... // do some check and trigger modal dialog in FE
  
  // set the required flag if appropriate
  model.addAttribute("pairAlreadyExistsWithTheSameExchange", true);

  // ...
  return "path to your thymeleaf page";
}

现在，您需要修改视图以考虑新的模型属性并因此显示模态对话框。

例如，您可以包含模态框，以及使其可见的必要信息 - 通过应用 show class 和 display: block 样式 - 如果 pairAlreadyExistsWithTheSameExchange 是 true:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
        
    <!-- Modal -->
    <div th:if="${pairAlreadyExistsWithTheSameExchange}" class="modal fade show" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-modal="true" role="dialog" style="display: block;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Pair already exists for the same exchange.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Continue</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
                   
        <div class="row justify-content-center align-items-center">
            <div class="col-md-10">
                <form id="add_pair_form" class="form-inline" action="#" th:action="@{/pairs}"
                      th:object="${stepForm}"
                      autocomplete="off"
                      method="post">

                    <div class="row g-3 align-items-center mb-1 mt-1">
                        <div class="col-auto">
                            <label for="pair" class="form-label">New</label>
                        </div>
                        <div class="col-auto">
                            <input id="pair" class="form-control" name="pair" type="text"
                                   placeholder="Pair to be added."
                                   th:field="*{pair}"
                                   required
                                   autofocus>
                        ......................................
                        </div>                            
                    </div>

                    <div class="form-group mb-1 mt-1">
                    <button type="submit" class="btn btn-primary submit_btn">Submit</button>

                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
                        Validate
                    </button>
                </div>
                    
                </form>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>       
</main>
</body>
</html>

或者，您也可以保留原始代码中的模式，并在 HTML 页面中包含类似以下 Javascript 的代码片段：

<script type="text/javascript" th:if="${pairAlreadyExistsWithTheSameExchange}">
    var validationModal = new bootstrap.Modal(document.getElementById('validationModal'));
    validationModal.show();
</script>

如您所见，它获取了对模态对话框 window 和 shows it via Javascript.

的 div 的 ID 的引用

也许你可以通过包含请求参数等提供类似的信息并获得类似的结果，但我认为这种方式更清晰，更容易实现。

从 Spring MVC BE 打开 Bootstrap 对话框 window

Open Bootstrap dialog window from Spring MVC BE

javascript

spring

bootstrap-4