Transfering Id Data From View To Partial View And Then To Controller In .NET MVC Web App

Question

I am trying to send an Event id (Model name is event) from my event view to a partial view in which you could comment on that related event (which is encuptulated by that view and rendered via ajax) then to the post controller action of that partial view which will assign eventId to comment id for db relation. View and partial view has different models. How could i manage that?

DIAGRAM OF WORKFLOW

View -> Partial View -> Controller | | | Model1(Event) - Model2(Comment)- Post action that'll get Id from Model1 as argument.
(Detail) - (CreateComment) - (Comment Controller - Create)
Event.Id -> Sent to partial view -> On Post action(create comment), Id will be sent to action.

VIEW CODE

@using Evented.Domain.Models
@using Microsoft.AspNetCore.Identity
@model Evented.Web.EventVMCompany

@inject UserManager<User> UserManager
@{
    ViewData["Title"] = "Detail";

}
<h1>Detail</h1>

<h4>EventVM</h4>
<hr />
@Html.ValidationMessageFor(m => m.Id)
<form asp-action="JoinEvent">
    <div>
        <dl class="row">
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.Id)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.Id)
                @Html.HiddenFor(model=>model.Id)

            </dd>
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.Topic)
                @Html.HiddenFor(model=>model.Topic)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.Topic)
            </dd>

            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.Title)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.Title)
                @Html.HiddenFor(model=>model.Title)

            </dd>
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.Description)
                @Html.HiddenFor(model=>model.Description)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.Description)

            </dd>
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.Location)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.Location)
                @Html.HiddenFor(model=>model.Location)

            </dd>
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.BeginsAt)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.BeginsAt)
                @Html.HiddenFor(model=>model.BeginsAt)

            </dd>
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.EndsAt)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.EndsAt)
                @Html.HiddenFor(model=>model.EndsAt)

            </dd>
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.joineeLimit )
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.joineeLimit)
                @Html.HiddenFor(model=>model.joineeLimit)
            </dd>
            @Html.HiddenFor(model=>model.CreatorId)
            @Html.HiddenFor(model=>model.joineeNumber)
            @Html.HiddenFor(model=>model.UsersJoined)
            @Html.HiddenFor(model=>model.UsersJoined.Count)
        </dl>
    </div>
    @{
        if (Model.CreatorId != UserManager.GetUserId(User))
        {
            @foreach (var item in Model.UsersJoined)
            {
                @if (item.UserId != UserManager.GetUserId(User))
                {
                    <button type="submit" class="btn btn-primary">Join</button>
                }
                else
                {
                    <button type="submit" formaction="/Event/LeaveEvent" class="btn btn-primary">Leave</button>
                }
            }
            @if (Model.UsersJoined.Count == 0)
            {

                <button type="submit" class="btn btn-primary">Join</button>
            }
        }
    }
</form>
<a asp-action="Index" class="btn btn-primary">Back to List</a>


<div>@{
    foreach (var item in Model.UsersJoined)
    {
        if (item.UserId == UserManager.GetUserId(User))
        {
                <div id="commentlist"></div>
        }
    }
}</div>
<div id="createcomment"></div>


<script type="text/javascript">

    $('#createcomment').load('@Url.Action("Create","Comment", ViewData["EventId"] )');
    $('#commentlist').load('@Url.Action("Index","Comment")');

</script>

PARTIAL VIEW CODE

@model Evented.Web.CommentVM

<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create" >
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        
            <div class="form-group">

                <input asp-for="Text" class="form-control"  placeholder="Comment"/>
                <span asp-validation-for="Text" class="text-danger"></span>
            </div>
         
         
            <div class="form-group">
                <input name="button" id="button" type="submit" value="Comment" class="btn btn-primary " />
            </div>
        </form>
    </div>
</div>

CONTROLLER ACTION CODE

      [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task< ActionResult> Create(CommentVM commentVM,int eventId)
        {
            User usr= usrManager.GetUserAsync(User).Result;

            var comment = mapper.Map<Comment>(commentVM);
            comment.EventId= eventId;
            comment.User = usr;
            comment.CreatedAt= DateTime.Now;
            comment.UpdatedAt= DateTime.Now;
        
            await commentService.AddCommentAsync(comment);
            return RedirectToAction("Index");
        }

GITHUB OF PROJECT - https://github.com/kocfurkan/Evented

Codes provided is all i could.

Answer 1

Please try to pass data like this:

EventController:

public async Task<IActionResult> Detail(int id)
{
    ViewData["EventId"] = id;
    //.....
}

Detail.cshtml:

//...
<script type="text/javascript">

    $('#createcomment').load('@Url.Action("Create","Comment", new {id= ViewData["EventId"]} )');
    //...
</script>

CommentController:

public ActionResult Create(int id)
{
    return PartialView("_PartialPageCreate", new CommentVM() { EventId = id});
}

_PartialPageCreate.cshtml:

<div class="form-group">
     //Add a hidden input
     <input name="eventId" type="hidden" value="@Model.EventId" />
     <input asp-for="Text" class="form-control"  placeholder="Comment"/>
     <span asp-validation-for="Text" class="text-danger"></span>
</div>

Test Result: