.net core 3.1 MVC Partial View not showing inside main view

Question

I cannot get the partial view to work properly inside another view.

This is very important: I am using a .NET core 3.1 MVC project

Everything works, except:

1. My main view can post the values to a PartialViewResult inside the controller (below)
2. The PartialViewResult function returns the results to the partial view
3. The partial displays the data on the screen, but takes over the entire screen
4. I cannot get the partial view to display the information inside the view that called it.

Here is the controller

 public class PlayerController : Controller
    {

        private readonly IRecordingRepository _recordingRepository;

        public PlayerController(
            IRecordingRepository recordingRepository)
        {
            _recordingRepository = recordingRepository;
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Search(int partnersId, string phoneFromFileName, string extension, int durationStart,
                                    int durationEnd, DateTime startDate, DateTime endDate, string fileName, SearchViewModel searchViewModel)
        {
            // Get Recordings
            var search = new SearchViewModel();


            search.PartnerList = _recordingRepository.GetAllPartners();

            // Get Recordings
            if (startDate == new DateTime())
                startDate = DateTime.Today.AddMonths(-100);

            if (endDate == new DateTime())
                endDate = DateTime.Today;

            search.RecordingList = _recordingRepository.GetRecordings(partnersId, phoneFromFileName,
                                                                   extension, durationStart,
                                                                   durationEnd, startDate,
                                                                   endDate, fileName);

            return View(search);
        }

        [HttpPost]
        public PartialViewResult SearchRecordings(int partnersId, string phoneFromFileName, string extension, int durationStart,
            int durationEnd, DateTime? startDate, DateTime? endDate, string fileName, SearchViewModel searchViewModel)
        {
            if (startDate == new DateTime()) startDate = null;


            if (endDate == new DateTime()) endDate = null;

            // Get Recordings
            var result = _recordingRepository.GetRecordings(partnersId, phoneFromFileName,
                extension, durationStart,
                durationEnd, startDate,
                endDate, fileName);

            return PartialView("_GridPartial", result);
        }
    }

Here is the main view

@model Compliance.Recordings.Models.ViewModels.SearchViewModel;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    var durationValues = new List<string> { "--", "1", "5", "15", "20", "30", "40", "50", "60", "70", "80", "90", "100", "150", "200", "250", "300", "500", "1000", "5000", "10000", "100000" };
    var durationList = new SelectList(durationValues);
    var extensionValues = new List<string> { "All", "MP3", "WAV", "PDF" };
    var extensioList = new SelectList(extensionValues);
}

<form asp-action="SearchRecordings" asp-controller="Player"
      data-ajax="true" data-ajax-method="POST"
      data-ajax-begin="OnBegin" data-ajax-failure="OnFailure"
      data-ajax-success="OnSuccess" data-ajax-complete="OnComplete">
    <table class="table">
        <thead>
            <tr>
                <th colspan="4" scope="col">Recording Search</th>
            </tr>
        </thead>
        <tr>
            <td>File Name</td>
            <td><input type="text" name="FileName"></td>
            <td>Phone</td>
            <td><input type="text" name="Phone"></td>
        </tr>
        <tr>
            <td>Duration Start</td>
            <td>@Html.DropDownList("DurationStart", durationList)</td>
            <td>Duration End</td>
            <td>@Html.DropDownList("DurationEnd", durationList)</td>
        </tr>
        <tr>
            <td>Start Date</td>
            <td><input type="date" name="StartDate"></td>
            <td>End Date</td>
            <td><input type="date" name="EndDate"></td>
        </tr>
        <tr>
            <td>Partner</td>
            <td>
                @(Html.DropDownListFor(m => m.PartnerList,
        new SelectList(Model.PartnerList, "Id", "Name", Model.PartnerList),
        "All"))
            </td>
            <td>File Extension</td>
            <td>@Html.DropDownList("Extension", extensioList)</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><input type="submit"></td>
        </tr>
    </table>
</form>

<div id="progress">
</div>

Here is the partial view

@model IEnumerable<Compliance.Recordings.Models.Recording>


<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.VendorName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MasterFolder)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FileName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FilePath)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PhoneFromFileName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Extension)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DateFromFileName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DateFromFileInfo)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DateFromFolderName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ArchiverProcessed)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.OriginalFilePath)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NewFilePath)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DurationInSeconds)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DateCreated)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FileSizeInBytes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsTpvPartner)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FileLink)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FoundStatus)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ActiveAccountMatch)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LegacyAccountMatch)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AreaCodeStateMatch)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AreaCodeCountryMatch)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CellPhoneMatch)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DateIndexed)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.VendorName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MasterFolder)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FileName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FilePath)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PhoneFromFileName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Extension)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateFromFileName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateFromFileInfo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateFromFolderName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ArchiverProcessed)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.OriginalFilePath)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.NewFilePath)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DurationInSeconds)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateCreated)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FileSizeInBytes)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IsTpvPartner)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FileLink)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FoundStatus)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ActiveAccountMatch)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LegacyAccountMatch)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AreaCodeStateMatch)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AreaCodeCountryMatch)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CellPhoneMatch)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateIndexed)
            </td>
        </tr>
}
    </tbody>
</table>

Answer 1

1. Model Binding binds the property by name attribute.

For example, your action contains string phoneFromFileName, but the front end does not contain such element with name="phoneFromFileName", so it will always get null for parameter phoneFromFileName.

Also, there is no element named partnersId in frontend.

2. Model Binding cannot binds the complex model by simple one element.

For example, the @(Html.DropDownListFor(m => m.PartnerList,xxx,xxx) will generate the select element with name="PartnerList" and PartnerList is a List Model type, so this select element cannot be bind to any parameter in SearchRecordings action.

3. data-xx works in jQuery Unobtrusive Ajax plugin, be sure add the js reference.

4. If you want to get the partial view to display the information inside the view that called it, it is better to use data-ajax-mode="replace" and data-ajax-update="#progress".

A working sample you could follow:

View

@model SearchViewModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
//...    
<form asp-action="SearchRecordings" asp-controller="Player" data-ajax-mode="replace" data-ajax-update="#progress"
      data-ajax="true" data-ajax-method="POST">
    <table class="table">
        <thead>
            <tr>
                <th colspan="4" scope="col">Recording Search</th>
            </tr>
        </thead>
        <tr>
            <td>File Name</td>
            <td><input type="text" name="FileName"></td>
            <td>Phone</td>
            <td><input type="text" name="Phone"></td>
        </tr>
        <tr>
            <td>Duration Start</td>
            <td>@Html.DropDownList("DurationStart", durationList)</td>
            <td>Duration End</td>
            <td>@Html.DropDownList("DurationEnd", durationList)</td>
        </tr>
        <tr>
            <td>Start Date</td>
            <td><input type="date" name="StartDate"></td>
            <td>End Date</td>
            <td><input type="date" name="EndDate"></td>
        </tr>
        <tr>
            <td>Partner</td>
            <td>
                @*If you want to get this dropdown selected value in backend*@
                @*You can change like below*@
                @*just a sample*@
                @(Html.DropDownList("PartnerList[0].Id", new SelectList(Model.PartnerList, "Id", "Name", Model.PartnerList),"All"))
            </td>
            <td>File Extension</td>
            <td>@Html.DropDownList("Extension", extensioList)</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><input type="submit"></td>
        </tr>
    </table>
</form>

<div id="progress">
</div>

@section Scripts
{
    @*must add jQuery Unobtrusive Ajax js reference *@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>
}

Controller

Be sure the result in return PartialView("_GridPartial", result); contains value.