modal - passing parameter with url

Ask Time：2017-05-24T22:55:54 Author：Ethel Patrick

I am creating a modal in which I am passing a parameter that is supposed to open another view using a URL in script. However it opens a blank modal pop-up and never go to the URL. I have tried a couple of different ways however neither have worked.

When I put <div class="modal-body"> in my modal code it will fill out the modal however I cannot get the parameter passed to it.

My modal button -

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

My modal -

<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>

Then my scripts -

$('#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"));
     })

I was requested to post my controller method - I have a [HttpPost] that I call when first accessing the view

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

Author:Ethel Patrick，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/44162010/modal-passing-parameter-with-url

User3250 :

You are not accessing data-id properly. Change to this:\n\n$('#btnChange').click(function (eve) {\n var url = \"/DeviceLocation/ChangeLocation?deviceID=\" + $(this).data(\"id\");\n $(\"#modal-content\").load(url, function () {\n $(\"#myModal\").modal(\"show\");\n });\n })\n\n\nAlso, Model Binder matches with the param names to map the values. Hence, change your url as above.",

2017-05-24T15:41:24

modal - passing parameter with url