将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

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

这个任务可能会有所帮助： Explanation of <script type = "text/template"> ... </script>

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

Answer 2

我设法用一点蛮力来解决这个问题。 我已经研究过使用partialViews将html添加到cshtml中。

这很好地涵盖了它： using-partial-views-in-asp-net-mvc-4

在发布问题之前，我已经仔细查看了这些内容，但无法正常工作。我没有意识到ActionResult方法名称必须与使用-_-的视图相同。