CODEWITHSUNDEEP
jqueryhtmlmodel-view-controllermodal-dialog
Ethel Patrick
Ethel Patrick

Reputation: 975

modal - passing parameter with url

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

Upvotes: 0

Views: 4077

Answers (2)

Jmin
Jmin

Reputation: 41

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

try with this code and this way hope this will help you.

Upvotes: 1

User3250
User3250

Reputation: 3421

You are not accessing data-id properly. Change to this:

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

Also, Model Binder matches with the param names to map the values. Hence, change your url as above.

Upvotes: 1

Related Questions