CODEWITHSUNDEEP
htmlasp.net-mvc-3iframe
pfeds
pfeds

Reputation: 2273

Displaying a child webpage in a div / MVC3

I'm not sure if this is a common scenario but I couldn't find anything on Google on how to do this.

In my Model I have a string property that contains the entire html for an external website. I want to display this html on my page to display the webpage as a whole, along with a few other controls at the top of the page.

For example, consider I have a div at the top of the page with a search box. I want to enter a url into that box and display it in a div below. My code behind retrieves the webpage markup as a string.

Note: There seem to be solutions using an iFrame, but I don't wish to pass a URL. I want to retrieve the html as a string and display it that way.

Thanks.

Upvotes: 2

Views: 1081

Answers (2)

m.t.bennett
m.t.bennett

Reputation: 1320

I think your going to have to use an iFrame - however it's not all bad! you can still display your string.

Controller will look like this:

public class HomeController : Controller
{
    //
    // GET: /Home/
    //Initial landing page
    public ActionResult Index()
    {
        return View("");
    }
    //for full postbacks, sets the iframes src on the index view
    public ActionResult Page(String url)
    {
        String myurl = "/Home/Search?url=" + url;
        return View("Index", model: myurl);
    }
    //for the iframes src attribute
    public ActionResult Search(String url)
    {
        //replace pageContent with your html string
        String pageContent = "<html><head><title>this is the title</title></head><body>this is the body</body></html>";
        return Content(pageContent);
    }
}

Index will be your landing or "Search" page, Page will be where your form posts to if javascript isn't supported, Search will be where you will point your iFrame at.

Action:

@model String
@{
    ViewBag.Title = "URLer";
}
<script type="text/javascript">
    $(document).ready(function () {
        $('#searchForm').submit(function (e) {
            e.preventDefault();
            $('#page').attr('src', '/Home/Search?url=' + $('#url').val());
            return false;
        });
    });
</script>
<div>
@using (Html.BeginForm("Page", "Home", FormMethod.Get, new { id = "searchForm" }))
{
    <input id="url" name="url" type="text" />
    <input id="Search" type="submit" value="Search" />
}
</div>
<iframe id="page" src="@Model" width="100%" height="500">
</iframe>

this shows a search box and submit button, using jQuery the form submit sets the src attribute of the iframe to the search action, i.e. "/Home/Search" and add the value of the url textbox as part of the query string, this will then trigger the iFrame to navigate to the url being set (/Home/Search?url=http://google.com as an example), WHERE you are returning your own raw html page/string instead of the actual website.

The form is a safety net and is probably not needed, however if for whatever reason javascript is disabled, the form will post to /Home/Page?url=http://google.com where the returned view will have the iframe set, and thus will get the url from our Search action.

Upvotes: 2

basarat
basarat

Reputation: 276393

Get the string (via something like jquery's $.get). Set it as innerHTML of the div you want to display the page in, Something like 

$("#divFoo")[0].innerHTML = "<div>Your <strong>HTML</strong> string</div>";

Upvotes: 2

Related Questions