javascript - 将 html 从单独的文件加载到模式对话框中

Question

使用 razor 引擎从单独的 cshtml 页面加载某些 html 时出现问题。我希望能够在多个地方重复使用此弹出窗口，因此我希望将其与每个页面分开。

到目前为止，我只能通过 Javascript 生成页面来加载页面，但某些使用 Razor 引擎的元素不起作用。

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 产生的结果:

呈现的页面不显示选项卡，并且本应通过 razor 加载的图像也未加载(它带有加载资源失败)

我想我的问题是如何让 javascript 正常工作，或者我可以获取此 html 并将其放置在自己的 View 中并以其他方式加载它吗？

这一切背后有很多代码，所以请询问我可能缺少的任何内容，以填充更完整的图片。谢谢。

Answer 1

您可以使用模板，并将每个模板保存在单独的文件中。

这个问题可能会有所帮助: Explanation of <script type = "text/template"> ... </script>

您还可以使用模板系统，例如 Handlebars ,Textjs,Emblem ...