Import HTML BeginForm from other view

Question

I have BlogHomePage.cshtml as homepage

@model IEnumerable<WebApplication1.Models.Post>

@{
    ViewBag.Title = "BlogHomePage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <div id="content">
    <!--Content of the blog-->
    @foreach (var post in Model)
    {
        <div id="mainContent">
            <section>
                <article class="blogPost">
                    <header>
                        <h2>@Html.DisplayFor(modelItem => post.PostTitle)</h2>
                        <p>Posted on @Html.DisplayFor(modelItem => post.PostDate) by <a target="_new" href=@Html.DisplayFor(modelItem => post.WebSite)>@Html.DisplayFor(modelItem => post.PostAuthor)</a> - <a href="#@Html.DisplayFor(modelitem => post.PostID)">@Html.DisplayFor(modelItem => post.Comments.Count) comments</a></p>
                    </header>
                    <div>
                        <p class="blogContent">@Html.DisplayFor(modelItem => post.PostText)</p>                  
                    </div>
                    @if (!post.PostImage.IsEmpty())
                    {                     
                            <img src="@Url.Content(post.PostImage)" alt="@post.PostAuthor" width="500" />                        
                    }
                    <br/>
                    @if (!post.PostVideo.IsEmpty())
                    {
                        <img src="@Url.Content(post.PostVideo)" alt="@post.PostVideo" width="500" />
                    }

                </article>
                <!----creating an anchor on the page to point to comments of the post -->
                <a name="@Html.DisplayFor(modelitem => post.PostID)"></a>
            </section>
        </div>

        //Change background of odds comments
        bool counter = true;
        foreach (var comment in post.Comments)
        {
            if (counter)
            {
                counter = false;
            }
            else
            {
                counter = true;
            }

            <section id="@(counter==true ? "commentstrue":"comments")">
                <!--Comments of bloggers-->
                <article class="commentswidth">
                    <header>
                        <h3>@Html.DisplayFor(modelComment => comment.CommentTitle)</h3>
                        <a target ="_new" href=@Html.DisplayFor(modelComment => comment.CommentWebSite)>@Html.DisplayFor(modelComment => comment.CommentAuthor)</a>
                    </header>
                    <p>@Html.DisplayFor(modelComment => comment.CommentText)</p>
                </article>
            </section>
        }
        <br />

        <!--Comments form-->

    }
    </div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

I want to "import" my htmlbeginform from the "create" action on my CommentsController

@model WebApplication1.Models.Comment

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Comment</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.PostID, "PostID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("PostID", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PostID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CommentTitle, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommentTitle, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommentTitle, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CommentAuthor, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommentAuthor, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommentAuthor, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CommentWebSite, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommentWebSite, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommentWebSite, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CommentText, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommentText, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommentText, "", new { @class = "text-danger" })
            </div>
        </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>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

This line work but i can see page inside page (including layout) and i dont want it. @Html.Action("Create","Comments")

And this line work without layout for about page: @Html.Partial("about") But it doesn't work for create comments page, and i can't pass Model.Comments

Answer 1

If you want to embed/import one form in another, then

1) You can use Partial Views

2) For partial views you don't use main/website layout/master, otherwise it looks website duplicated inside your main view and ugly! So you can set the layout to null as below within your partial view:

@{
   Layout = null;
}

3) Now to render the partial view you can specify the name of partial view to the html helper @Html.RenderPartial(...). One of the overloads of this helper accept the Model object also, if you need to pass in. For e.g. if you want to pass Comments list to partial view "_Comments.cshtml" then:

@{ Html.RenderPartial("_Comments.cshtml", Model.CommentsList)} 
//Assuming Model.CommentsList is of type: IEnumerable<Comment>

It is a general convention to prefix partial view names with underscore:"_"

4) Also make sure the model object you pass into partial view above and the model type the partial view accept are compatible.

e.g.

@model IEnumerable<Comment>

Note: All the objects/types and names in my answer are chosen to provide you some details and may not necessarily be your case.

Hope this helps...

Answer 2

Use this code on the view:

@Html.Action("View page name","Controller name")

Paste this on the view that you want to "import"

@{
    ViewBag.Title = "NameOfView";
    Layout = null;
}

Answer 3

@using (Html.BeginForm("Upload", "Upload", FormMethod.Post, 
                                      new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        Select a file <input type="file" name="file" />
        <input type="submit" value="Upload" />
    </fieldset>
}