How to pass a list from controller post action to a view without using Json?

50 views Asked by At

I'm coding with ASP.NET Core. I have a form in a view that has several select inputs to insert orders. I want to change asp-items in select input of Products at run time, after changing select inputs of Properties of Products. In other words, a select input populates with a new list, after selecting new value in other inputs.

I try to use ajax for bind new list to select. but I don't know how to send the output list to ajax without json result. Is there any way to send list to view?

View's Code:

<form id="InsertForm">
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>
  <div class="form-group">
     <label asp-for="ProductTitleId" class="control-label"></label>
     <select asp-for="ProductTitleId" asp-items="@ViewBag.ProductTitles" class="form-control" id="txtProductTitleId" name="SearchItem">
         <option value="0" disabled selected>Select an item...</option>
     </select>
     <span asp-validation-for="ProductTitleId" class="text-danger </span>
  </div>
  <div class="form-group">
     <label asp-for="ProductTypeId" class="control-label"></label>
     <select asp-for="ProductTypeId" asp-items="@ViewBag.ProductTypes" class="form-control" id="txtProductTypeId" name="SearchItem">
        <option value="0" disabled selected>Select an item...</option>
     </select>
     <span asp-validation-for="ProductTypeId" class="text-danger"></span>
  </div>
  <div class="form-group">
     <label asp-for="SizeId" class="control-label"></label>
     <select asp-for="SizeId" asp-items="@ViewBag.Sizes" id="txtSizeId" class="form-control" name="SearchItem">
         <option value="0" disabled selected>Select an item...</option>
     </select>
     <span asp-validation-for="SizeId" class="text-danger"></span>
  </div>                
  <div class="form-group">
     <label asp-for="FinalProductId" class="control-label"></label>
     <select asp-for="FinalProductId" asp-items="@ViewBag.FinalProducts" class="form-control" dir="rtl" id="txtFinalProductId">
         <option value="0" disabled selected>Select an item...</option>
     </select>
     <span asp-validation-for="FinalProductId" class="text-danger"></span>
  </div>
  <div class="form-group">
     <button type="submit" class="btn">Insert</button>
  </div>
</form>
    
<script>
   $(document).ready(function () {
       $('[name = SearchItem]').change(function () {
          var _url = '@Url.Action("FindFinalProductCode", "Order")';
          $.ajax({
                url: _url,
                type: "Post",
                data: {
                        ProductTitleId: $("#txtProductTitleId option:selected").val(),
                        ProductTypeId: $("#txtProductTypeId option:selected").val(),
                        SizeId: $("#txtSizeId option:selected").val(),
                },
                success: function (data) {
                        $("#txtFinalProductId").empty();
                        $("#txtFinalProductId").append('<option value="' + "0" + '">' + "Select an item..." + '</option>');
                        $("#txtFinalProductId").items(data);  ///????
                        });
                },
                error: function (data) {
                        alert(data);
                }
           });
    
         });
     });    
</script>

Controller's Code: OrderController.cs

[HttpPost]
public IActionResult FindFinalProductCode(FinalProductViewModel finalProductViewModel)
{
    List<FinalProduct> finalProducts = FindFinalProduct(finalProductViewModel);
    return OK(finalProducts);
}

ViewModel's Code: FinalProductViewModel.cs

public class FinalProductViewModel
{
   [Display(Name = "Title")]
   public int ProductTitleId { get; set; }
        
   [Display(Name = "Type")]
   public int ProductTypeId { get; set; }
        
   [Display(Name = "Size")]
   public int SizeId { get; set; }
}

I don't know how to re-populate asp-items with ajax at run time. How to change my code to run correctly?

0

There are 0 answers