How to pass data to a partial view using a different model?

Question

I want to have a popup modal to add messages/notes to ApplicationUser. I'm having trouble with different models as the view uses Applicationuser.cs and the partial view uses UserNote.cs. I want while on the user details page to add a message via a modal and save and the modal box post the data then closes. The partial view has errors while using a different model class and if I remove it, I can't access the class properties and the Id is not being passed to the method.

ApplicationUser.cs

public class ApplicationUser : IdentityUser
{
    public virtual ICollection<UserNote> UserNotes { get; set; }
}

UserNote.cs

public class UserNote
{
    [Key]
    public int UserNoteId { get; set; }
    public string Message { get; set; }
    public string ApplicationUserID { get; set; }
    public virtual ApplicationUser ApplicationUser { get; set; }
}

UserNoteController

    public IActionResult Create()
    {
        return PartialView("_notesView");
    }

    [HttpPost, ActionName("Create")]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> CreatePost(UserNote userNote, string id)
    {
        if (ModelState.IsValid)
        {
            if (id == null)
            {
                return NotFound();
            }
            userNote.ApplicationUserID = id;
            _db.Add(userNote);
            await _db.SaveChangesAsync();
            return Redirect(Request.Headers["Referer"].ToString());
        }
        return View(userNote);
    }

_notes.cshtml(Partial View)

 @model AspCore.Models.UserNote
<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form asp-action="Create">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="form-group">
                        <textarea asp-for="Message" class="form-control" style="min-height: 200px;width: 100%;"></textarea>
                        <span class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <input type="submit" value="Add Note" class="btn btn-success" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Details.cshtml

@model AspCore.Models.ApplicationUser


@Html.Partial("_notesView", new {id = Model.Id})

Answer 1

You could pass a new UserNote() as the model of partial view like below:

Details.cshtml

@model MVCDemo3_1.Models.User

@await Html.PartialAsync("_notesView", new UserNote {UserId=Model.Id })

_notes.cshtml(Partial View)

@model MVCDemo3_1.Models.UserNote

<button data-toggle="modal" data-target="#modal-container" name="addEmployeeModal">Add Note</button>

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <form asp-action="Create">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input asp-for="UserId" hidden/>
                <div class="form-group">
                    <textarea asp-for="Message" class="form-control" style="min-height: 200px;width: 100%;"></textarea>
                    <span class="text-danger"></span>
                </div>

                <div class="form-group">
                    <input type="submit" value="Add Note" class="btn btn-success" />
                </div>
            </form>
        </div>
    </div>
  </div>
</div>

Result

Answer 2

Since UserNotes is already a part of the ApplicationUser model which is used on the Detail view, you could simply pass Model.UserNotes;

@Html.Partial("_notesView", Model.UserNotes)