modal - 使用 url 传递参数答案

【问题标题】：modal - passing parameter with urlmodal - 使用 url 传递参数
【发布时间】：2017-05-24 14:55:54
【问题描述】：

我正在创建一个模式，我在其中传递一个参数，该参数应该使用脚本中的 URL 打开另一个视图。但是，它会打开一个空白模式弹出窗口，并且永远不会转到 URL。我尝试了几种不同的方法，但都没有奏效。

当我在模态代码中输入<div class="modal-body"> 时，它会填写模态，但是我无法将参数传递给它。

我的模态按钮 -

  <a href="#myModal" id="btnChange"class="btn btn-default" data-toggle="modal" data-id="@item.DeviceID">Change Location</a>

我的模态 -

<div id='myModal' class='modal fade' tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div id='modal-content'>

            </div>
        </div>
    </div>
</div>

然后是我的脚本 -

$('#btnChange').click(function (eve) {
        var url = "/DeviceLocation/ChangeLocation/" + $(this).data("deviceID");
        $("#modal-content").load(url, function () {
            $("#myModal").modal("show");
        });

        //$("#modal-content").load("/DeviceLocation/ChangeLocation/" + $(this).data("deviceID"));
     })

我被要求发布我的控制器方法 - 我有一个 [HttpPost]，我在第一次访问视图时调用它

 [HttpGet]
    public ActionResult ChangeLocation(int deviceID)
    {
        PopulateLocation();
        ViewBag.DeviceID = deviceID;
        return View();
    }

【问题讨论】：

当脚本尝试加载外部内容时，您是否有任何错误显示在控制台中？
没有任何我可以告诉的错误消息

标签： jquery html model-view-controller modal-dialog

【解决方案1】：

您没有正确访问data-id。改为：

$('#btnChange').click(function (eve) {
    var url = "/DeviceLocation/ChangeLocation?deviceID=" + $(this).data("id");
    $("#modal-content").load(url, function () {
        $("#myModal").modal("show");
    });
 })

此外，模型绑定器与参数名称匹配以映射值。因此，如上所述更改您的网址。

【讨论】：

它仍然是空白的。它似乎甚至没有尝试访问该 url。
@EthelPatrick 请发布您的控制器方法。它对我有用。
我用我在“/DeviceLocation/ChangeLocation/”中调用的[HttpPost] 编辑了我的原始问题
@EthelPatrick 更新了我的答案。另外，您的方法是[HttpGet] 而不是[HttpPost]

【解决方案2】：

$('#btnChange').on('click',function (eve) {
$.ajax({
  type: "Post",
  url: "/DeviceLocation/ChangeLocation?deviceID=$(this).attr('data-id')",
  success: function(data){
    $("#modal-content").html(data);
  $("#myModal").modal("show");
  }
 })

尝试使用此代码，希望对您有所帮助。

【讨论】：