CODEWITHSUNDEEP
htmlasp.net-mvc
Andrew Kilburn
Andrew Kilburn

Reputation: 2251

How to use Partial View?

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>

Upvotes: 1

Views: 56

Answers (1)

Pete
Pete

Reputation: 58412

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>

Upvotes: 1

Related Questions