Asp.Net MVC 5 1 View 2 models with viewmodel The model item passed into the dictionary is of type error

Question

I am new to Asp.Net MVC and I am coding a simple blog with using ASP.NET MVC 5 Framework. I can create edit and delete posts. You can see my code on GitHub in details. And I want to add comment property to Details page of every posts or articles. I spent so much time for this and tried several ways. I am trying to make it with using ViewModel Here is my code.

CommentVM:

    public DateTime Date { get; set; }

    public string CommentContent { get; set; }

    public Article articles { get; set; }
    public List<Comment> commentList { get; set; }// to show comments which is written before.

Details View:(I modified Details page of Articles. it was @model Blog.Models.Comment I turned to CommentVM and added model.articles.Title. So there is no error in Visual Studio.)

  @model Blog.Models.CommentVM

 @{
  ViewBag.Title = "Details";
 }

 <h2>Details</h2>

<div>
<h4>Article</h4>
<hr />
<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.articles.Title)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.articles.Title)
    </dd>
    .
    .
    .
</dl>
</div>

 <div class="jumbotron">
 <div class="form-horizontal">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
        </div>
 </div>

        <div class="col-md-10">
            @Html.EditorFor(model => model.CommentContent, new { htmlAttributes = new { @class = "form-control" } })
        </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

</div>

Of course this code is not enough. First of all I should write a controller for this. Default controller for this Details page is this:

 public ActionResult Details(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Article article = db.Articles.Find(id);
        if (article == null)
        {
            return HttpNotFound();
        }
        return View(article);
    }

How will I change this Controller Method and View to create and show comments under articles? If you recommend good ViewModel tutorial, I will appretiate this. I want 3 things in Details page 1) Details of an article 2) Create comment 3) show under this comment as in forums or any blog. Please help

Answer 1

You should create a partial view for showing the comments, the model of that view being List<Comment> for displaying the list of comments.

For adding a new comment also can be done using a partial view which will have Comment as the model

Or you can follow the method mentioned in this post

CSHTML

<% using (Html.BeginForm(new { Action = "AddComment", postId = Model._id})) 
       { %>

    <h2>Title: <%= Model.Title%> </h2>


    <%= Model.Body%> 


    <h3>Comments</h3> 

    <% if(Model.Comments.Count > 0)
{ %>

    <% foreach (var comment in Model.Comments)
       { %>

        Name: <%= comment.Name %> 

        Comment: <%= comment.Text %> 


    <% } %>

    <%
}%>

    <h4>Enter Comments</h4>

    Name: <%= Html.TextBox("Name")%> 


    Comment: <%= Html.TextArea("Text")%> 


    <input type="submit" value="Submit" />

    <% } %>