To Consume a REST Ajax services to create a Select

Question

User1692641958 posted

Currently I want to consume 2 services rest one that lists departments of a url locally, here the list of departments:

[{"iIdSede":3,"iIdSedeZona":1,"vcDescripcion":"PASCO"},{"iIdSede":5,"iIdSedeZona":11,"vcDescripcion":"LIMA"},{"iIdSede":85,"iIdSedeZona":5,"vcDescripcion":"AREQUIPA"},{"iIdSede":86,"iIdSedeZona":7,"vcDescripcion":"PISCO"}

And the other one that when I select a department I select its province by the id of the selected department an example, where id = 3

[{"vcDescripcion":"Cerro de Paso"},{"vcDescripcion":"Oxapampa"},{"vcDescripcion":"Daniel Carrion"}

Lo que quiero hacer es consumirlo con Ajax para los dos Select pero no sé cómo hacerlo si pudieran ayudarme, estaría muy agradecido

@{ ViewBag.Title = "Departamentos y su Provincias"; } <section class="content-header"> <h1> Departamentos y su Provincias </h1> </section> <br /> <label class="col-md-6">ORIGEN</label> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="col-md-6">Sede</label> <div class="col-md-6"> <select id="depaId" class="form-control"> <option value="Select">Seleccione</option> </select> </div> </div> <div class="form-group"> <label class="col-md-6">Servicio</label> <div class="col-md-6"> <select id="proviId" class="form-control"> <option value="Select">Seleccione</option> </select> </div> </div> </div> </div> </div>

Answer 1

User61956409 posted

Hi RockChris,

To dynamically call REST services and populate <select> element based on user's selection, you can refer to the following sample code.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-md-6">Sede</label>
                <div class="col-md-6">
                    <select id="depaId" class="form-control">
                        <option value="Select">Seleccione</option>
                        <option value="3">PASCO</option>
                        <option value="5">LIMA</option>
                        <option value="85">AREQUIPA</option>
                        <option value="86">PISCO</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-6">Servicio</label>
                <div class="col-md-6">
                    <select id="proviId" class="form-control">
                        <option value="Select">Seleccione</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#depaId").change(function () {
            var depaId = $("#depaId :selected").val();

            $.ajax({
                method: "GET",
                url: "/Home/GetProvince?id=" + depaId,
                contentType: "application/json; charset=utf-8"
            }).done(function (data) {
                //alert(data);
                $("#proviId :nth-child(n+2)").remove();

                var newoption = "";
                $.each(data, function (index, item) {
                    newoption = "<option value='" + item.vcDescripcion + "'>" + item.vcDescripcion + "</option>";
                    $("#proviId").append(newoption);
                })
            });
        })
    })
</script>

Test Result:

With Regards,

Fei Han

Answer 2

User-271186128 posted

Hi RockChris,

Currently I want to consume 2 services rest one that lists departments of a url locally,

Not quite sure whether you are using web service or WebApi, I suggest you could refer to the following articles to use JQuery Ajax method to call the services:

WebApi:

https://docs.microsoft.com/en-us/aspnet/web-api/overview/older-versions/build-restful-apis-with-aspnet-web-api

https://www.c-sharpcorner.com/UploadFile/dacca2/web-api-with-ajax-understand-post-request-in-web-api/

Web Service:

https://www.c-sharpcorner.com/blogs/how-to-call-asp-net-web-service-using-jquery-ajax

Then, refer to these articles to populate the select element:

https://www.c-sharpcorner.com/article/ajax-call-for-dropdown-lists-in-mvc/

https://www.aspsnippets.com/Articles/Populate-Bind-DropDownList-using-jQuery-AJAX-and-JSON-in-ASPNet-MVC.aspx

Best regards,
Dillion