How to use a modal popup with ViewComponent (Asp Net Core 5)

Question

Hi I wanna use a modal popup for Create User view in Asp Net Core 5 (mvc). I wanna use this modal as a ViewComponent In User Index view (which shows the list of users). I added a button that is related to Create User method.

I want when I click on that button the modal popup that is a ViewComponent opens.

but after running the application I cant go to Index User page, because of an exception that shows a conflict between the model used in Index.cshtml (which is IEnumerable) and the model used in ViewComponent View (which is UserViewModel).

I will upload the Exception.

ViewConponent Class:

    public class CreateViewComponent : ViewComponent
{
    public async Task InvokeAsync()
    {
        return View("Default");
    }
}

ViewComponent View:

    @model UserViewModel 
    @{
        Layout = "_LayoutAdmin";
        ViewData["Title"] = "Create";
    }

    
        
            **
                
                افزودن کاربر جدید
            **
            
                
                    
                    
                        
                            اسم کاربر

                            
                                
                                
                            
                        
                        

                            نام کاربری

                            
                                
                                @if (ViewBag.UserNameExistence != null)
                                {
                                     @ViewBag.Message 
                                }
                                
                            
                        
                        

                            رمز عبور

                            
                                
                                
                            
                        
                        

                            ایمیل

                            
                                
                                @if (ViewBag.EmailExistence != null)
                                {
                                     @ViewBag.Message 
                                }
                                
                            
                        
                        
                            شماره تلفن

                            
                                
                                @if (ViewBag.PhoneNumberExistence != null)
                                {
                                     @ViewBag.Message 
                                }

Index.cshtml View:

    @model IEnumerable
@{
    Layout = "_LayoutAdmin";
    ViewData["Title"] = "Index";
}


    لیست کاربران


    




    
        

            
                
                        @if (Model != null)
                        {
                            @foreach (var item in Model)
                            {
                                
                            }
                        }
                    
                    
                        
                            نام
                            نام کاربری
                            ایمیل
                            شماره تلفن
                            عملیات
                        
                    
                    
                                    
                                        @Html.DisplayFor(modelItem => item.DisplayName)
                                    
                                    
                                        @Html.DisplayFor(modelItem => item.UserName)
                                    
                                    
                                        @Html.DisplayFor(modelItem => item.Email)
                                    
                                    
                                        @Html.DisplayFor(modelItem => item.PhoneNumber)
                                    
                                    
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                
                    
                        
                            نام
                            نام کاربری
                            ایمیل
                            شماره تلفن
                            عملیات
                        
                    
                
            
        
        
            
                Showing 1 to 10 of 57 entries
            

                
                    
                        
                            Previous
                        
                        1
                        2
                        3
                        4
                        5
                        6
                        
                            Next

The exception:

An unhandled exception occurred while processing the request.

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List`1[ShopOnline.Domain.Entites.User]', but this ViewDataDictionary instance requires a model item of type 'ShopOnline.Web.ViewModel.UserViewModel'.

Microsoft.AspNetCore.Mvc.ViewFeatures.ViewDataDictionary.EnsureCompatible(object value)

In stack part of exception page:
AspNetCore.Areas_Admin_Views_User_Index.ExecuteAsync() in Index.cshtml

Now What should I do.

Sorry for any grammatical mistake, I'm not English or American.

user_7062291 · Answer

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List`1[ShopOnline.Domain.Entites.User]', but this ViewDataDictionary instance requires a model item of type 'ShopOnline.Web.ViewModel.UserViewModel'.

The above exception is clear, when you display the Default View Component, it requires a UserViewModel, instead of the List of User.

To solve the above issue, you could modify the CreateViewComponent as below:

public class CreateViewComponent : ViewComponent
{
    public async Task InvokeAsync()
    {
        return View("Default", new ShopOnline.Web.ViewModel.UserViewModel());
    }
}

user_19663431 · Answer

its true and you need model for show

    public class CreateViewComponent : ViewComponent
    {
       public async Task InvokeAsync()
       {
          return View("Default", new ShopOnline.Web.ViewModel.UserViewModel());
       }
   }

for show modal you should move all Modal control into View of ViewComponent and call view component in primary view not into Button tag

ViewComponent View:

in index view


        @(await Component.InvokeAsync("Create"))

How to use a modal popup with ViewComponent (Asp Net Core 5)

2 Answers