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>'
]
}
)
}
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>