ASP.NET Core MVC：引导模式未显示

Question

我一直在按照教程在 CRUD 应用程序中使用引导模式，但我无法显示模式。

这是调用 jQuery 的按钮：

<a onclick="CreateOrganization('@Url.Action("AddOrEdit","Organizations",null,Context.Request.Scheme)','New Organization')" class="btn btn-success text-white"><i class="fas fa-random"></i> New Organization</a>

这是与创建组织按钮位于同一页面底部的 jQuery 函数：

< script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > < /script> <
  script type = "text/javascript" >
  CreateOrganization = (url, title) => {
    $.ajax({
      type: 'GET',
      url: url,
      data: {
        'id': null
      },
      success: function(res) {
        $("#formModal").find(".modal-body").html(res);
        $("#formModal").find(".modal-title").html(res);
        $("#formModal").modal('show');
      },
      failure: function(response) {
        alert(response.responseText);
      },
      error: function(response) {
        alert("error");
      }
    })
  }; <
/script>

模态在 _Layout 页面中：

<div class="modal" tabindex="-1" role="dialog" id="formModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" id="formModal">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

这是控制器中的 AddOrEdit 操作方法：

public async Task <IActionResult> AddOrEdit(int id = 0)
  { 
    if (id == 0) 
      return View(new Organization()); 
    else 
    { 
      var org = await _context.Organizations.FindAsync(id); 
      if (org == null) 
        { 
         return NotFound(); 
        } 
         return View(org); 
    }
   }

当我在 jQuery 中放置一个 alert() 时，我得到了从按钮传递的正确 url，如果我在控制器中的 AddOrEdit Action 方法中放置了一个中断，我确实打了中断，因此 jQuery 函数似乎按预期工作。如果我在 ajax{} 的成功部分中放置一个警报，它会命中，所以即使 jQuery 似乎也很高兴。但是，模式没有显示。有人可以告诉我哪里出错了吗？

Answer 1

更新：

您能否解释一下两者之间的关系。我不问 正如您的演示所证明的那样，您的两行代码将打开一个模式 但我如何接受你写的东西并修改并不明显 我的 JQuery Ajax 脚本。

好吧，根据我的调查，我发现了代码问题的示例。我打算向您展示最简单的方法，而不是解释这些问题。但是，根据您的评论，我现在正在解释。

问题：1：脚本参考与您的 Ecma 5 不兼容：

这意味着当我运行您的代码时，我遇到了以下错误：

这告诉我们，jquery/1.8.3/jquery.min.js 这个版本的jQuery 不知道ecma-5 或更高版本。所以我通过替换 jQuery/jquery-3.2.1.min.js 的版本解决了这个问题

问题：2：控制器操作：

在您的共享代码中，您只共享了一个controller。但是，要使其可行，您的示例需要两个controller action。因为，显示您的视图需要一个操作。当您调用 GET 操作时，您是 explecting data from server，因此，该控制器应返回 json data instead of view 例如：return Ok(org); 不是 return View(org);

        [HttpGet]
        public async Task<IActionResult> AddOrEdit(int id = 0)
        {
            if (id == 0)
                return View(new Users());
            else
            {
                try
                {
                    var org = await _context.Organizations.FindAsync(id);
                    if (org == null)
                    {
                        return NotFound();
                    }
                    return Ok(org); ;
                }
                catch (Exception ex)
                {

                    throw;
                }
               
               
            }
        }

        public IActionResult AddOrEditView()
        {
            return View();
        }

问题：3：不正确的绑定或对象解析：

在success: function(res) 上的GET 方法中，您将response 直接绑定到html，这不能显示为object order，即json data object，如下所示：

$("#formModal").find(".modal-body").html(res);
$("#formModal").find(".modal-title").html(res);

因此，您应该使用如下的显式声明来绑定它：

$("#formModal").find(".modal-body").html(res.skills);
$("#formModal").find(".modal-title").html(res.developerName);

笔记：我根据我的对象将其定义为res.skills，您可以根据您的对象进行替换。

最终：输出

代码：

<div class="modal" tabindex="-1" role="dialog" id="formModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="formModal">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
               
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>
<a onclick="CreateOrganization('@Url.Action("AddOrEdit","Todo",null,Context.Request.Scheme)','New Organization')" class="btn btn-success text-white"><i class="fas fa-random"></i> New Organization</a>
@*
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>*@
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script>
<script type="text/javascript">

   
    CreateOrganization = (url, title) => {
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                'id': 1
            },
            success: function (res) {
                console.log(res);
                $("#formModal").find(".modal-body").html(res.skills);
                $("#formModal").find(".modal-title").html(res.developerName);
                $("#formModal").modal('show');
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                console.log(response);
                alert("error");
            }
        })
    };
</script>

上一个示例：

我检查了您的代码，并在您的script 和模态HTML 上也发现了问题。请尝试以下代码 sn-p 按预期工作。

模型

<div class="modal" tabindex="-1" role="dialog" id="formModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="formModal">
                <h5 class="modal-title">Tesing Modal Error</h5>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
             
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

脚本

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
   
    $(document).ready(function () {
       
        $(function () {
            $('#formModal').modal('show');
        });

    });
   
</script>

输出

笔记：我已尝试解决您的模态显示问题。因此，与控制器响应相关的数据尚未验证或测试。