Passing value from page to bootstrap modal using jquery ajax in asp.net MVC 4

Question

I have a view in my asp.net MVC 4 application which iterates through the model and shows a checkbox, a link and a button like this:

 @foreach (var sv in Model)
        {

 @Html.CheckBox("VehicleId", false, new { value = sv.Id.ToString(), @id = "myCheckbox" + sv.Id.ToString()  })

<a href="#">@sv.Mileage miles</a> - [email protected]


<button id="btnMakeOffer" class="btn btn-success btn-primary pull-right"  data-toggle="modal" data-target="#article-editor" data-id="@sv.Id"><i class=" icon-shopping-cart icon-white"></i>Make an Offer</button><br />

}

The button should show bootstrap modal and all the information of model class. Right modal is shown because of data-target="#article-editor". I want to show modal only if checkbox is checked. So I wrote this jquery:

@section Scripts{
 <script type="text/javascript">

    $("#btnMakeOffer").on("click", function () {

        if ($('#myCheckbox' + $(this).data('id')).is(':checked')) {
            var vehicleId = $(this).data('id');
            $.ajax({               
                url: "/Home/GetSearchCriteria",
                type: "GET",  //these is must               
                cache: false,  //these is for IE
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { provinceId: 1 },
            }).done(function (data) {
                $("#Title").val(data.Title);
                $("#Summary").val(data.Summary);
                $("#Magazine").val(data.Magazine);
                $("#Url").val(data.Url);
                $("#PubMonth").val(data.Year.toString() + "-" +
                                   ("00" + data.Month.toString()).slice(-2));
                $('#myModal').modal('show');
            });
        }
        else {
            alert('Record not selected!');
        }

    });

</script>
}

and action method

 [GET("GetSearchCriteria")]
        public ActionResult GetSearchCriteria(int id)
        {
            return Json(new { Title = "abc", Summary = "Summary", Magazine = "This is magazine", Url = "test url" }, JsonRequestBehavior.AllowGet);
        }

but it is not hitting the action method. When i see in firefox console, it says:

Failed to load resource: the server responded with a status of 404 (Not Found) and url it shows is:

=1387802961520">http://localhost:27741/Home/GetSearchCriteria?provinceId=1&=1387802961520

not sure what is 1387802961520

Please suggest solution to this.

I believe that you missed the _ character in your query string. _=1387802961520. That value was because you set cache to false. Anyway, to fix your problem, change provinceId to just id — LostInComputer
– LostInComputer, Commented Dec 23, 2013 at 12:57
I mean change your code from data: { provinceId: 1 } to data: { id: 1 } — LostInComputer
– LostInComputer, Commented Dec 23, 2013 at 13:01
still same error Failed to load resource: the server responded with a status of 404 (Not Found) localhost:27741/Home/GetSearchCriteria?Id=1&_=1387803837510. — DotnetSparrow
– DotnetSparrow, Commented Dec 23, 2013 at 13:04

hakan · Accepted Answer · 2021-04-07 11:55:30Z

1

It causes a 404 because the url is relative: instead of sending to /Home/GetSearchCriteria you should use /GetSearchCriteria

answered Apr 7, 2021 at 11:55

hakan

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Thiago Custodio · Accepted Answer · 2013-12-23 13:27:48Z

0

try to pass the parameter direct through url as follows:

@section Scripts{
 <script type="text/javascript">

    $("#btnMakeOffer").on("click", function () {

        if ($('#myCheckbox' + $(this).data('id')).is(':checked')) {
            var vehicleId = $(this).data('id');
            var provinceId = 1;
            var newUrl = "/Home/GetSearchCriteria?id=" + provinceId;
            $.ajax({               
                url: newUrl,
                type: "GET",  //these is must               
                cache: false,  //these is for IE
                contentType: "application/json; charset=utf-8",
                dataType: "json"                
            }).done(function (data) {
                $("#Title").val(data.Title);
                $("#Summary").val(data.Summary);
                $("#Magazine").val(data.Magazine);
                $("#Url").val(data.Url);
                $("#PubMonth").val(data.Year.toString() + "-" +
                                   ("00" + data.Month.toString()).slice(-2));
                $('#myModal').modal('show');
            });
        }
        else {
            alert('Record not selected!');
        }

    });

</script>
}

edited Dec 23, 2013 at 13:27

answered Dec 23, 2013 at 12:56

Thiago Custodio

18.4k9 gold badges50 silver badges99 bronze badges

1 Comment

DotnetSparrow Over a year ago

I tried to pass hardcode value but it still shows same Failed to load resource: the server responded with a status of 404 (Not Found) localhost:27741/Home/GetSearchCriteria1?_=1387803685566

Collectives™ on Stack Overflow

Passing value from page to bootstrap modal using jquery ajax in asp.net MVC 4

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related