0

Помогите, пожалуйста, разобраться с проблемой вызова Partial View.

Имеем модель:

public class File
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Path { get; set; }

        public int? PhoneId { get; set; }        
    }

Контроллер для отображения Partial View:

        [HttpGet]
        public ActionResult GetAdditionalPhotos(int phoneId)
        {
            using (db)
            {
                var model = db.Files.Where(f => f.PhoneId == phoneId).ToList();

                return PartialView("_GetAdditionalPhotos", model);
            }                        
        }

Так выглядит PartialView (_GetAdditionalPhotos.cshtml):

@model IEnumerable<Models.File>

<table id="table" data-toggle="table" data-search="false" data-virtual-scroll="true">
    <thead>
        <tr>
            <th data-width="100">Фото</th>            
            <th data-width="120"></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var photo in Model)
        {            
            <tr>
                <td><img src="@Url.Content(@photo.Path)" width="80" height="80" /></td>               
            </tr>
        }
    </tbody>
</table>

В основном View пробую вызвать Partial View:

        <div class="col col-sm-12" id="additionalPhotos">            
            @if (Model.Files != null)
            {

                @await Html.PartialAsync("_GetAdditionalPhonePhotos", Model.Id)

            }
            else
            {
                <p>Нет дополнительных фотографий</p>
            }
        </div>

Но получаю ошибку:

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Int32', but this ViewDataDictionary instance requires a model item of type 'System.Collections.Generic.IEnumerable`1[Models.File]'.

С указанной проблемой разобрался - необходимо передавать в PartialView модель.

Но теперь появился дополнительный вопрос - в основном View я обрабатываю событие нажатия на кнопку и выполняю js-скрипт для обновления Partial View. Но как мне теперь передавать модель?

Вот код обработки скриптом события:

<script type="text/javascript">
    var url = '@Url.Action("GetAdditionalPhotos", "Home", new { Model })';
    $("#btnReloadAdditionalPhotos").click(function () {
        $('#additionalPhotos').load(url);
    });
</script>

Но модель не принимается :(

1
  • В ошибке же все написано вы передаете @await Html.PartialAsync("_GetAdditionalPhonePhotos", Model.Id) --> The model item passed into the ViewDataDictionary is of type 'System.Int32'..., а задекларировали получить ...a model item of type 'System.Collections.Generic.IEnumerable1[Models.File]'.`
    – Bulson
    5 янв 2020 в 21:59

1 ответ 1

1

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Int32', but this ViewDataDictionary instance requires a model item of type 'System.Collections.Generic.IEnumerable`1[Models.File]'.

Эта ошибка выводится из-за того, что при вызове метода Html.PartialAsync происходит "рендер" только razor страницы (в вашем случае _GetAdditionalPhotos.cshtml), а действие public ActionResult GetAdditionalPhotos(int phoneId) никогда не выполняется. Поэтому и получается, что вы передаете int id, сразу в вашу вьюху, которая ожидает список File.

Раньше в ASP.NET MVC для этих целей существовал метод Action/RenderAction, и в отличии от Html.PartialAsync, он делал вызов вашего экшена, который принимает id и выполняет нужный код. Сейчас этого нет, но добавили View Component.

Например:

Views/Shared/Components/PhotoViewComponent.cs:

public class PhotoViewComponent : ViewComponent
{
    public PhotoViewComponent(DbContext db) { /* ... */ }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        using (db)
        {
            var model = db.Files.Where(f => f.PhoneId == phoneId).ToList();

            return View(model);
        } 
    }
}

Вашу _GetAdditionalPhotos.cshtml нужно поместить и переименовать в Views/Shared/Components/Photo/Default.cshtml (это не обязательно делать, но тогда в компоненте нужно будет явно передавать название вьюхи).

И рендерить теперь это можно так: @await Component.InvokeAsync("Photo").

А если добавить Tag Helper в _ViewImports.cshtml: @addTagHelper *, <название вашей сборки>, то рендерить его можно будет при помощи тега: <vc:photo></vc:photo>.

6
  • По факту мне нужно обновлять Partial View по событию нажатия на кнопку в основном View. Я пробую это делать через js - добавил информацию об этом в основной вопрос. Смогу ли я из js вызывать @await Component.InovkeAsync? Или может подскажете как передать Модель через Url.Action в контроллер - как я пытаюсь это сделать.
    – Den1024
    5 янв 2020 в 22:46
  • ни Html.PartialAsync, ни Component.InovkeAsync из JS работать не будут, для этого нужно делать экшн, который возвращает PartialView, как у вас, а его уже рендерить на стороне клиента, через @Url.Action 5 янв 2020 в 22:50
  • например, так @Url.Action("GetAdditionalPhotos", "Home", new { phoneId = 1 }), т.к. ваш экшен принимает id, его и нужно передавать 5 янв 2020 в 22:53
  • Понял! Премного Вам благодарен. Получается, что мне нужно вызывать не @await Html.PartialAsync, а Url.Action в обоих ситуациях (из JS и из Razor-кода на основном View). Так сказать, забыть о PartialView. Но может тогда будет реален вариант использования InvokeAsync и его обновлять по событию обновления модели?
    – Den1024
    5 янв 2020 в 23:07
  • Url.Action все лишь возвращает ссылку, которую кто-то должен вызвать/открыть, поэтому в razor скорее всего она будет вам бесполезна, а если вы решили уже решили делать загрузку через js, то зачем обычная? пользователь открыл страницу, а потом js загрузил все что нужно, тогда partial view можно вообще не использовать, а передавать только нужную инфу как json 5 янв 2020 в 23:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.