How to fill select option order type after search submit on post funct

Question

I work on asp.net core razor page model .I face issue i can't store result of select option ajax request that fill order type

to fill it after serach reset submit done

because after search button click order type select option reset

so i need to fill select option again of data that have before submit or before reset

so I get data list fill select option order type success on function RelatedOrderType with

reprintModel.OrderTypes = orderTypes;

How to get result or store result of reprintModel.OrderTypes = orderTypes; on funcion OnPost after search submit done

meaning how to get result of ajax request onPost function after search submit finish

$('#orderType-select').prepend('<option value="0" selected>-- Select Order Type --</option>');

my code details as below

 <form id="FrmReprintAdcSupport" method="post" onsubmit="return validateForm() ">
<div class="card" style="margin-top:-50px;">
<div class="card-body">

    <div class="row">
        <div class="col-lg-12 col-12 row">
            
            <div class="col-md-2 col-lg-1">
                <input type="hidden" name="Reset" value="XX" />
                <label for="userty-select" class="form-control-label" style="color:#525f7f;font-size:15px;font-family: 'Open Sans', sans-serif;">OrderType</label>
                <select id="orderType-select" name="selectedordertype" asp-for="reprintModel.SelectedOrderType" name="ordertypeid" class="form-select" style="color:#000 !important;font-size:15px;font-family: 'Open Sans' , sans-serif;" onchange="updateHiddenFields()">
                <option value="0">--Select--</option>

                @foreach (var ordertype in Model.reprintModel.OrderTypes)
                {
                    <option value="@ordertype.OrderTypes">@ordertype.OrderTypes</option>
                }
                </select>
            </div>
            <input type="hidden" id="hiddenselectedOrderType" name="hiddenselectedOrderType" value="@Model.hiddenselectedOrderType" />
        </div>
    </div>
</form>
$('#totimeselect').change(function (event) {
    //event.preventDefault();
    var DateLogged = $("#statusDateId").val();
    var branchId = $("#branch-select").val();
    var FromTime = $("#txtFromTime").val();
    var ToTime = $("#totimeselect").val();
    console.log(branchId);
    if (DateLogged) {
        console.log(DateLogged);
        $.ajax({

            url: '?handler=RelatedOrderType',
            type: "GET",
            dataType: "json",

            data: { branchId: branchId, DateLogged: DateLogged, FromTime: FromTime, ToTime: ToTime },
            success: function (data) {
                //console.log(data);
                 $('#orderType-select').empty();
                $.each(data, function (i, item) {
                    console.log(item);
                    $('#orderType-select').append($('<option>', {
                        value: item.orderTypes,
                        text: item.orderTypes
                    }));
                });
                // Add a default option
                $('#orderType-select').prepend('<option value="0" selected>-- Select Order Type --</option>');
            }
        });
    }
});

public JsonResult OnGetRelatedOrderType(string branchId, string DateLogged,string FromTime,string ToTime)
{
    string eventDatefromtime = Convert.ToDateTime(FromTime).ToString("HH:mm");
    string eventDatetotime = Convert.ToDateTime(FromTime).AddMinutes(Convert.ToInt16(ToTime)).ToString("HH:mm");


    DataTable dtordertype = _IAdcSupportService.GetOrderTypes(branchId, DateLogged, eventDatefromtime, eventDatetotime);

    List<OrderTypePrinterServer> orderTypes = dtordertype.AsEnumerable()
	.Select(row => new OrderTypePrinterServer
   {
	// Map the values from the DataRow to the properties of the PrintServer object
	OrderTypes = row["Doc_type"].ToString()

   })
   .ToList();
    reprintModel.OrderTypes = orderTypes;
    return new JsonResult(orderTypes);
}

Now I click on search button to display data
so OnPost Function will fire

public async Task OnPost(IFormCollection formcollection)
{
//after search data and data display select option order type will reset so I will fill again

reprintModel.OrderTypes = orderTypes;
}

Mohamed Azarudeen Z · Answer

Hi ahmad Create a hidden input field in your Razor Page's form to hold the serialized JSON data representing the reprintModel.OrderTypes . Add this field within the tag: in your AJAX success function, serialize the data response and set the value of the hidden input field with the serialized JSON: success: function (data) { $('#orderType-select').empty(); $.each(data, function (i, item) { $('#orderType-select').append($(' ', { value: item.orderTypes, text: item.orderTypes })); }); $('#orderType-select').prepend(' -- Select Order Type -- '); $('#orderTypesData').val(JSON.stringify(data)); } In the OnPost method, retrieve the serialized JSON data from the orderTypesData form field, deserialize it back into a list of OrderTypePrinterServer objects, and assign it to reprintModel.OrderTypes : public async Task OnPost(IFormCollection formcollection) { // Retrieve the serialized JSON data var orderTypesJson = formcollection["orderTypesData"]; // Deserialize the JSON into a list of OrderTypePrinterServer objects var orderTypes = JsonConvert.DeserializeObject >(orderTypesJson); // Assign the deserialized orderTypes to reprintModel.OrderTypes reprintModel.OrderTypes = orderTypes; // ... Rest of your code ... } If this helped kindly accept ythe anser.