Razor html with JavaScript

Question

How can I better write the html between content: [ ] ? I have a of layout to go within, there must be a better way...

<script type="text/javascript">

function OnClickAdd() {
    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");

    panelBar.append(
        {
            text: "New Person",
            encoded: false,
            content: [

                         '<div id="cont6_container" class="container">',
                                '<span class="label label-primary">Age</span>',
                                '<br /><br />',
                                  '<div class="btn-group" id=ageID>',
                                     '<button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>',
                                     '@Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" })',
                                 '</div>',
                          '</div>'
                    ]

        }
           )
}

Answer 1

MVC Version

Move

<div id="cont6_container" class="container">
    <span class="label label-primary">Age</span>,
    <br /><br />,
    <div class="btn-group" id=ageID>
        ,
        <button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>,
        @Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" }),
    </div>,
</div>

to a partial view let's call it PartialView and then add it to you view

content: [@Html.Partial("PartialView",Model)]

JavaScript version

<div id="content-contairner" style="display:none;">
    <div id="cont6_container" class="container">,
            <span class="label label-primary">Age</span>,
            <br /><br />,
            <div class="btn-group" id=ageID>,
                <button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>,
                @Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" }),
            </div>,
    </div>
</div>
<script type="text/javascript">
function OnClickAdd() {
    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");
    var $element = $("#cont6_container").detach();
    panelBar.append(
        {
            text: "New Person",
            encoded: false,
            content: $element.get(0).outerHTML       
        }
     )
}
</script>