How to use Partial View?

Question

I haven't often used partial views but I do understand the basics but I have a problem.

I have a master page with a Modal form on. In this modal form I would like to use a partial view to render both an image and a footer. However, I need to manually write in a header and the body content. So basically it would look like this:

Partial View:

-Image- -Content I want to write- -Footer-

However, whenever I try to do this and include things such as render Body or render section, it does not work. Does anybody have any ideas on how I can do this?

Modal:

  <div id="helpModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    @Html.Partial("ModalLayoutPartial")           
                    <h1 style="text-align:center"> HELP </h1>
                    <div class="modal-body">
                        <p>Help help helperton</p>
                    </div>
                </div>
            </div>
        </div>

Partial View:

<div class="modal-header">
    <img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<body>

</body>
<div class="modal-footer">
    <a href="#">Need more help? Contact us here.</a>
</div>

I am sorry but can you please expand on your question. I do not understand what the problem is? — Jamie Rees
– Jamie Rees, Commented Jul 9, 2015 at 8:45
The problem is that I cannot use RenderBody or RenderSection, I get the following error: The file "~/Views/Shared/ModalLayoutPartial.cshtml" cannot be requested directly because it calls the "RenderSection" method. — Andrew Kilburn
– Andrew Kilburn, Commented Jul 9, 2015 at 8:47
I believe this is because I am using @section on a master page and then trying to render a section on a partial view — Andrew Kilburn
– Andrew Kilburn, Commented Jul 9, 2015 at 8:48

Pete · Accepted Answer · 2015-07-09 09:06:53Z

1

You can pass a model into the partial so in your case make the model a string:

@Html.Partial("ModalLayoutPartial", "text to show")

Then in your partial declare the model (and use it):

@model string

<div class="modal-header">
    <img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<body>
    @Html.Raw(Model)
</body>
<div class="modal-footer">
    <a href="#">Need more help? Contact us here.</a>
</div>

Please note you shouldn't use body tag in the above - a html document should only have one body tag

Or you could pass in a class:

public class ModalInfo
{
    public string Title { get; set; }
    public string Body { get; set; }
}

Then call your partial:

@Html.Partial("ModalLayoutPartial", new ModalInfo() { Title = "HELP", Body = "Help help helperton" })

Show your partial

@model ModalInfo

<div class="modal-header">
    <img src="~/Content/Images/Logo/ap_tick_green.png" />
</div>
<div class="body">
    <h1 style="text-align:center">@Model.Title</h1>
    <div class="modal-body">
       <p>@Model.Body</p>
    </div>
</div>
<div class="modal-footer">
    <a href="#">Need more help? Contact us here.</a>
</div>

edited Jul 9, 2015 at 9:06

answered Jul 9, 2015 at 8:57

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Kilburn Over a year ago

Nice answer, however I would now how to use my model on every single View I have now or it fails. I think I'm just going to hard code the modal forms. There arent too many. Thanks though

Collectives™ on Stack Overflow

How to use Partial View?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related