Razor HTML與JavaScript

Question

如何更好地編寫內容之間的HTML：[]？我有一個佈局內去，必須有一個更好的辦法...

<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版本

移動

<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> 

的局部視圖讓我們叫它PartialView然後將其添加到您的視圖

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

JavaScript版本

<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>