Template rendering with custome form inject inside Template

Question

0.00/5 (No votes)

See more:

XML

Hi,

I have 100's of HTML template(Basically HTML file from 3rd party with header, footer and body with many branding elements and a div called "container") and this is stored in a physical location in a Some server.

My requirement is to render this template by finding the div "container" inside the template and inject my form content into this div.

Sample template.

<html>
<head>
//logo and some content
</head>
<Body>
<div id ="MainContent">
</div>
<div id ="MyContent">
</div>
<div id ="Footer">
</Body>
<html>

And below is my form

 <form name="form1" method="post" action="1.aspx" id="form1"  autocomplete="off">
<div>
<input type="sumbit" value="submit">
</div>

This form should go inside the div MyContent and render.

I don't have control on template and it will not be part of my solution and it is dynamic it can change any time, but always have div called MyContent

Thanks,

Posted 9-Sep-13 21:22pm

charan49

Updated 17-Oct-13 23:33pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jameel VM · Answer 1 · 2013-09-09T22:13:00

Method 1

You can read html as string by using normal File.ReadAllText Method

C#

public static string GetHtml(string path)
        {
            string html = File.ReadAllText(path);
            return html;
        }

and then Create an ActionResult for returning the html as json string like below

C#

[HttpGet]
public ActionResult LoadHtml(int id)
{
var html=GetHtml("you html file path");
var result = new { Value = html };
return Json(result, JsonRequestBehavior.AllowGet);
}

Call the action by using jQuery from the client and insert the html in to a container you want

JavaScript

jQuery(document).ready(function(){
$("#buttonClick").click(function() {
var ServiceUrl ="/YourController/LoadHtml;
var content = '';
$.support.cors = true;
$.ajax({
type: 'GET',
url: ServiceUrl,
async: true,
cache: false,
crossDomain: true,
contentType: "application/json; charset=utf-8",
dataType: 'json',
error: function (xhr, err) {
},
success: function (result, status) {
$('#yourdivId').html(result.Value);
}
});
});
});

Method2
By using Render js also you can load template in to html
for more http://www.jsviews.com/#jsrender[^]
Hope this helps