ASP.NET Core 7 MVC model errors on modal popup

My Index view uses List<Rental> as it's model, and I display all Rental objects. The desired scenario: user clicks on "Filter!" button, a modal popup shows up, user selects some options, clicks "Submit", then, if the model state is invalid, the modal popup stays and displays the errors, otherwise, we load the Index view with different (filtered) list of rentals as model.

Index.cshtml, the modal popup and "Filter!" button for displaying it:

<div id="filterModal" class="modal" tabindex="-1">
	<div class="modal-dialog modal-xl"></div>
</div>

<button id="filterButton" class="btn btn-outline-light" type="button">Filter!</button>

Index.cshtml, jQuery for displaying the modal popup:

<script>
	$('#filterButton').click(function () {
		$('#filterModal .modal-dialog').load('/Home/GetFilterPartial');
		$('#filterModal').modal('show');
	});
</script>

HomeController.cs, methods for rendering the Index page and the modal popup:

[HttpGet]
[Route("/")]
public async Task<IActionResult> IndexAsync()
{
	//I get the list of all rentals

	return View(model);
}

[HttpPost]
[Route("/Results")]
public async Task<IActionResult> IndexAsync(FilterViewModel vm)
{
	if (ModelState.IsValid)
	{
		//I do some filtering based on the popup's view model

		return View(await rentals.ToListAsync()); //GOOD POPUP'S VIEWMODEL, RETURN INDEX WITH FILTERED RENTALS
	}

	return PartialView("_FilterPartial", vm); //BAD POPUP'S VIEWMODEL, STAY ON THE POPUP & SHOW WHAT'S WRONG
}

[HttpGet]
public async Task<IActionResult> GetFilterPartialAsync()
{
	return PartialView("_FilterPartial");
}

_FilterPartial.cshtml:

@model FilterViewModel

<div class="modal-content">
	<form asp-controller="Home" asp-action="Index" id="filterForm" method="post">
		<div class="modal-header">
			<h5 class="modal-title">Wanna filter?</h5>
			<button class="btn-close" type="button" data-bs-dismiss="modal"></button>
		</div>
		<div class="modal-body d-grid gap-3">
			<div class="row">
				<div asp-validation-summary="ModelOnly" class="text-danger"></div>
			</div>
			
			<!--- here are some input fields for FilterViewModel --->
		</div>
		<div class="modal-footer">
			<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
			<button class="btn btn-primary">Submit</button>
		</div>
	</form>
</div>

The modal popup shows, but if there are model errors, the IndexAsync(FilterViewModel vm) method returns the _FilterPartial, and that partial view is shown independently (not as part of modal popup or Index view). I just don't understand how to return a partial view with model errors back to the modal popup, not affecting another scenario where we would return a view.

Any help is greatly appreciated!!!

You should refresh your modal popup with Ajax instead of sumbit the form

I tried as below:

partial Viewmodel:

 public class PartialVM
    {
        public int Id { get; set; }
        [Required]
        public string? Prop1 { get; set; }
        [Required]
        public string? Prop2 { get; set; }
        [Required]
        public string? Prop3 { get; set; }
    }

_FilterPartial :

@model PartialVM

<div class="modal-content">
    <form asp-controller="Home" asp-action="Index" id="filterForm" method="post">
        <div class="modal-header">
            <h5 class="modal-title">Wanna filter?</h5>
            <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body d-grid gap-3">
            <div class="row">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            </div>
            <label asp-for="Id" class="control-label"></label>
            <input asp-for="Id"/>
            <label asp-for="Prop1" class="control-label"></label>
            <input asp-for="Prop1" class="form-control" />
            <span asp-validation-for="Prop1" class="text-danger"></span>
            <label asp-for="Prop2" class="control-label"></label>
            <input asp-for="Prop2" class="form-control" />
            <span asp-validation-for="Prop2" class="text-danger"></span>
            <label asp-for="Prop3" class="control-label"></label>
            <input asp-for="Prop3" class="form-control" />
            <span asp-validation-for="Prop3" class="text-danger"></span>
            

            <!--- here are some input fields for FilterViewModel --->
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>


<script>
    $("#filterForm").submit(function (e) {
        e.preventDefault(); 
        var form = $(this);
        var actionUrl = form.attr('action');
        $.ajax({
            type: "POST",
            url: actionUrl,
            data: form.serialize(), 
            success: function (data) {
                $('#filterModal .modal-dialog').html(data)
            }
        });
    });
</script>

Result:

Check the issue again,modified my codes for your requirement:

Controller:

public IActionResult Index(int[] id)
        {
            //filter with id or something else
            if (id.Count() != 0)
            {

            }
            
            return View();
        }
        [HttpPost]
        public async Task<IActionResult> Index(PartialVM partialVM)
        {
            if (ModelState.IsValid)
            {
                return new JsonResult(
                    new { 
                        valid=true,
                        url=HttpContext.Request.PathBase+"Home/Index?id=1&id=2&id=3"
                    });
            }
            else
            {
                this.ViewData.Model = partialVM;
                using StringWriter sw = new StringWriter();
                IView view = _viewEngine.FindView(ControllerContext, "_filterPartial", false).View;
                ViewContext viewContext = new ViewContext(ControllerContext, view, ViewData, TempData, sw, new HtmlHelperOptions());
                await view.RenderAsync(viewContext);
                var content = sw.GetStringBuilder().ToString();


                return new JsonResult(new
                {
                    valid = false,
                    content = content
                });
                //return PartialView("_FilterPartial", partialVM);
            }

        }

Jquery codes:

<script>
    $("#filterForm").submit(function (e, ban) {     
        
        if(ban!=false){
            e.preventDefault();
        }     
          
         
        var form = $(this);
        var actionUrl = form.attr('action');
        $.ajax({
            type: "POST",
            url: actionUrl,
            data: form.serialize(), 
            success: function (data) {
                console.log(data)
                if(data.valid){
                    window.location.assign(data.url)
                    
                }
                else{
                    $('#filterModal .modal-dialog').html(data.content)
                }
                
            }
        });
    });
</script>

Now Result: