loading html into MVC page with jQuery (?)

Question

Here's the thing.

I have a page in MVC. this page has a helper.

<% Html.RenderPartial("foldingHelpBox", ViewData["foldingHelpBox"]); %>

So the Action:

    public ActionResult Index(int? verbID, string schooljaarparam) {
        ......

        ViewData["foldingHelpBox"] = new InfoFlyout() { Title = "How does this work?", Message =  "foldinghelpbox.html" }; 

        return View();
    }

What is an InfoFlyout?

public partial class InfoFlyout {
    public string Title { get; set; }
    public string Message { get; set; }
}

What do I want?

I want an Accordeon like effect, a title and a message. the message is defaultly closed, and opens when you click the title. but I want just 1 item, not multiple like the accordeon has.

The jQuery:

$(document).ready(function () {
    $(".foldingHelpText").hide();
    $(".foldingHelp").click(function () {
        var helptext = $(this).siblings(".foldingHelpText");
        if (helptext.is(":hidden")) {
            alert(helptext.attr("data"));
            helptext.load(helptext.attr("data"));
        }
        $(this).siblings(".foldingHelpText").toggle("blind", { direction: "vertical" }, 1000);
        return false;
    });

    $(".closedialog").click(function () {
        $(this).parent().hide("blind", { direction: "vertical" }, 1000);
    });
});

The Partial

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MVC2_NASTEST.Models.InfoFlyout>" %>
<div class="foldingHelpBox">
    <a class="foldingHelp" href="#">
        <%= Model.Title %></a>
    <div class="foldingHelpText" data="<%= Model.Message %>">
        <span class="closedialog ui-icon ui-icon-closethick" title="Sluiten">&nbsp;</span>
    </div>

So tell me the problem!

Well, The Message can be 2 things. It can be a string which contains the message, or it could be a string with is actually the name of the HTML file which contains the actual html to put inside the message. This html can be fairly long, that's why i do not want to write it all in 1 string.

The problem is that I am using MVC and the HTML file is in my View folder. I can move it somewhere else though.

I'd like to have DRY code.

there are 2 questions:

How would you do it? I am now trying to use the jQuery load function to read the html into the foldinghelptext div but i cant get the URL right to the html file. So how would you do it? maybe put the HTML in a partial, name it. the whole lot doesn't look so clean to me.

How do i get the URL of this html file

If my way of doing it is fine, how do i get the URL to the html file, to let jQuery load it.

John Farrell · Accepted Answer · 2011-02-22 20:00:06Z

1

The DRYest thing to do would be to always load the message from either html or a string and not support both.

I'd go for html in this case.

answered Feb 22, 2011 at 20:00

John Farrell

24.7k10 gold badges82 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Coleman · Accepted Answer · 2011-02-22 20:09:09Z

1

How do i get the URL of this html file

To get the qualified path to the html file try to use Url.Content()

Converts a virtual (relative) path to an application absolute path.

<div class="foldingHelpText" data="<%=Url.Content("~/SomePathToHtmlFile/" +  Model.Message )%>">
  <span class="closedialog ui-icon ui-icon-closethick" title="Sluiten">&nbsp;</span>
</div>

edited Feb 22, 2011 at 20:09

answered Feb 22, 2011 at 20:00

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Comments

amit_g · Accepted Answer · 2011-02-22 20:03:40Z

0

Create an Action in a Controller and have the method return like

return base.File("~/WhateverPath/htmlPage.htm", "text/html");

Then yon can have any URL you want.

answered Feb 22, 2011 at 20:03

amit_g

31.3k8 gold badges67 silver badges124 bronze badges

Comments

Stefanvds · Accepted Answer · 2011-02-22 20:09:03Z

ok Why i love stackoverflow: when i finish to write my question I get a great idea which usually fixes the problem :D

What did i do?

i placed the html from the HTML file in a partial

then, in the Action

        ViewData["foldingHelpBox"] = new InfoFlyout() { Title = "Hoe werkt dit?", Message = "partialname" };

the main partial:

<div class="foldingHelpBox">
    <a class="foldingHelp" href="#">
        <%= Model.Title %></a>
    <div class="foldingHelpText">
        <span class="closedialog ui-icon ui-icon-closethick" title="Sluiten">&nbsp;</span>
        <% Html.RenderPartial(Model.Message); %>
    </div>
</div>

the jQuery for the sliding open and close

$(document).ready(function () {
    $(".foldingHelpText").hide();
    $(".foldingHelp").click(function () {
        $(this).siblings(".foldingHelpText").toggle("blind", { direction: "vertical" }, 1000);
        return false;
    });

    $(".closedialog").click(function () {
        $(this).parent().hide("blind", { direction: "vertical" }, 1000);
    });
});

so now I only have, as jfar suggested, html input which is very DRY

Collectives™ on Stack Overflow

loading html into MVC page with jQuery (?)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related