Loading html from a separate file into modal dialog

Question

Having an issue loading in some html from a separate cshtml page using the razor engine. I want to be able to reuse this popup in multiple places so I want it seperated from each page.

So far I have only managed to load in a page by generating it though Javascript but some of the elements that use the razor engine do not work.

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

This Is what the JavaScript produces:

The page rendered does not show the tabs and also the images that where meant to be loaded through razor do not load (It comes with a failed to load resource)

I guess my question is how can I get either the javascript to work correctly or can I take this html and place it in its own View and load it in some other way?

There is a lot of code behind all this so ask for anything I may be missing that fill give a fuller picture. Thanks.

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

You can work with templates, and save each template in a separate file.

This questinon may be helpfull: Explanation of <script type = "text/template"> ... </script>

You can also use templating systems like Handlebars,Textjs,Emblem...

edited May 23 '17 at 11:57

Community

1
1

answered Apr 08 '14 at 11:49

cor

3,041
20
42

Thanks for the answer. I had a look into it but I want to avoid having to use a plugin. I have figured it out though. – RichardMc Apr 09 '14 at 08:43

score 0 · Accepted Answer · answered Apr 09 '14 at 08:48

I managed To figure it out with a little brute force. I had looked into using partialViews to add the html into the cshtml.

This covers it pretty nicely: using-partial-views-in-asp-net-mvc-4

I had looked over this stuff a lot before posting a question and could not get anything to work. I had not realised the ActionResult method name had to be the same as the view it was using -_-.

Loading html from a separate file into modal dialog

2 Answers2