Partial Update of a webpage ASP.NET Core radiobuttons

According to your description, it seems that you want to show the related Endpoints options based on the selected API, if that is the case, you could refer to the following code (I assume you have created a Asp.net Core Razor page application):

Based on the config json file, create the following class:

public class APIS
{
    public int APIID { get; set; }
    public string APIName { get; set; }
    public bool Enabled { get; set; }
    public int APIPort { get; set; }
    public List<Endpoints> Endpoints { get; set; }
}

public class Endpoints
{
    public int ID { get; set; }
    public bool Enabled { get; set; }
    public string FriendlyName { get; set; }
    public string Mapping { get; set; }
}

In the Index.cshtml.cs file:

    [BindProperty]
    public List<APIS> APIS { get; set; }
    public void OnGet()
    {
        APIS = apiservice.GetAllAPI(); //get all API and the related endpoints. 
    }
    [BindProperty(SupportsGet = true)]
    public string apiname { get; set; }
    public JsonResult OnGetGetEndPoints()
    {
        APIS = apiservice.GetAllAPI(); //get all API and the related endpoints.

        return new JsonResult(APIS.Where(c => c.APIName == apiname).Select(c => c.Endpoints).ToList());
    }

Code in the Index.cshtml page (the endpoints div is used to populate the endpoints.):

<div >
    <div class="col-md-6">
        <div class="">
            <h2>Please select API</h2>
            @foreach (var item in Model.APIS)
            {
                <input type="radio" id="[email protected]" class="radio_api" data-apiname="@item.APIName" name="APIName" /> @item.APIName
            }
        </div>
    </div>

    <div class="col-md-6">
        <div class="">
            <h2>Please select Endpoints</h2>
            <div id="endpoints">

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

JavaScript code:

    @section Scripts{ 
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script type="text/javascript">
            $(function () { 
                $(".radio_api").each(function (index, item) {
                    $(item).click(function () {
                        var apiname = $(this).attr("data-apiname");
                        //using getJson method:
                        $.getJSON(`?handler=GetEndPoints&apiname=${apiname}`, (data) => {
                            $("#endpoints").html(""); //clear the container.
                            $.each(data[0], function (key, value) {
                                $("#endpoints").append(`<input type="radio" name="endpoint"/>${value.friendlyName}`);
                            });
                        }); 
                    });
                });
            });
        </script>
    }

Besides, you could also create a API and use JQuery Ajax to call the API method and load the endpoints:

                  $.ajax({
                            url: "api/values?apiname=" + apiname,
                            type: 'Get', 
                            contentType: "application/json; charset=utf-8",
                            dataType: "json", 
                            error: function (exception) {
                                console.log(exception);
                            },
                            success: function (result) { 
                                //console.log("Success");
                                $("#endpoints").html("");

                                $.each(result[0], function (key, value) {
                                    $("#endpoints").append(`<input type="radio" name="endpoint"/>${value.friendlyName}`);
                                });
                            }
                        });

The screenshot like this:

enter image description here

Reference: https://www.learnrazorpages.com/razor-pages/ajax/cascading-dropdowns

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top