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

使用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");
}

函数BuildDialog（）{
变量demographicDialog=$（document.createElement（'div'）；
demographicalDialog.append（）.html（“
”+
“
”+
“名称值”+
“ValueDescription”+
'' +
'添加特殊条件值：说明：'）；
$（“#添加人口统计对话框”）.wrapInner（人口统计对话框）；
$（“添加人口统计对话框”）。对话框（“打开”）；
}

这就是JavaScript产生的结果：

呈现的页面不会显示选项卡，也不会显示要通过razor加载的图像（它附带了无法加载的资源）

我想我的问题是如何让javascript正常工作，或者我可以将这个html放到它自己的视图中，并以其他方式加载它

---

所有这些背后都有很多代码，所以请询问我可能缺少的任何东西，以提供更完整的图片。谢谢。

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

此问题可能有帮助：

---

你也可以使用模板系统，比如，Textjs，

我用一点蛮力就搞定了。 我曾研究过使用partialViews将html添加到cshtml中

这很好地涵盖了这一点：

---

在发布问题之前，我已经仔细检查了这些东西，但什么都做不到。我没有意识到ActionResult方法的名称必须与它使用的视图相同-。

谢谢你的回答。我研究过它，但我想避免使用插件。不过我已经弄明白了。