將HTML從一個單獨的文件加載到模式對話框中

Question

使用剃刀引擎從單獨的cshtml頁面加載某些html時出現問題。 我希望能夠在多個地方重復使用此彈出窗口，因此我希望將其與每個頁面分開。

到目前為止，我只能通過Javascript生成頁面來加載頁面，但是使用剃刀引擎的某些元素不起作用。

HTML：

JavaScript的：

function BuildDialog(){
    var demographicDialog = $(document.createElement('div'));
    demographicDialog.append().html('<div id="tabs"><ul><li><a href="#tabs-1">Edit Demographics</a></li><li><a href="#tabs-2">Special Conditions</a></li>' +
        '</ul><div id="tabs-1"><div class="demographicWrapper"><div class="demographicScroll"><table class="demographicDetailsTable DemographicControls"><thead>' +
        '<tr><th></th><th>Name</th><th>Value</th> </tr></thead><tbody class="demographicDetails"></tbody></table></div><img id="demographicsLoading" class="loader" ' +
        'src="@Url.Content(@"~\Content\themes\MySuite\jsTree\throbber.gif")" /> <div class="demographicControlsContainer"><input class="prometricButton DefaultSelectedDemographics ' +
        'DemographicControls" type="submit" name="Command" value="Default Selected" disabled="disabled" style="margin-left: 25px;" /><input class="prometricButton DefaultAllDemographics ' +
        'DemographicControls" type="submit" name="Command" value="Default All" style="margin-left: 25px;" /></div></div></div><div id="tabs-2"><div class="demographicWrapper">' +
        '<div class="demographicScroll"><table class="demographicDetailsTable SpecialConditionsControls"><thead><tr><th></th><th>Value</th><th>Description</th></tr></thead>' +
        '<tbody class="specialConditionsDetails"></tbody></table></div><img id="specialConditionsLoading" class="loader" src="@Url.Content(@"~\Content\themes\MySuite\jsTree\throbber.gif")" />' +
        '<div class="demographicControlsContainer"> <input class="prometricButton removeSelectedSpecialCondtions SpecialConditionsControls" type="submit" name="Command" value="Remove Selected" ' +
        'disabled="disabled" style="margin-left: 25px;" /></div></div><fieldset class="SpecialConditionsControls"><legend>Add Special Conditions</legend>Value: <input type="text" ' +
        'class="newSpecialConditionValue">Description: <input type="text" class="newSpecialConditionDescription"><input class="prometricButton addSpecialConditions" ' +
        'type="submit" name="Command" value="Add Special Conditions" /></fieldset></div></div>');

    $("#AddDemographicsDialog").wrapInner(demographicDialog);
    $("#AddDemographicsDialog").dialog("open");
}

這是JavaScript產生的：

呈現的頁面不顯示選項卡，也不會加載本應通過剃須刀加載的圖像（資源加載失敗）

我想我的問題是如何獲取JavaScript才能正常工作，或者我可以將此HTML放入自己的View並以其他方式加載？

所有這些背后都有很多代碼，因此請提出我可能會遺漏的所有內容以提供更完整的信息。 謝謝。

Answer 1

您可以使用模板，並將每個模板保存在單獨的文件中。

以下問題可能會有所幫助： <script type =“ text / template”> ... </ script>的說明

您還可以使用模板系統，如Handlebars ，Textjs， Emblem ...

Answer 2

我設法用一點蠻力弄清楚了。 我研究過使用partialViews將html添加到cshtml。

這很好地覆蓋了它： 在asp-net-mvc-4中使用partial-views

在發布問題之前，我已經對這些東西進行了很多檢查，並且無法正常工作。 我還沒有意識到ActionResult方法的名稱必須與它使用-_-的視圖相同。