Loading a DIV with dynamic MvcHtmlString

Question

I've created a div inside a web page that needs to be filled through the jquery load function.

<div id="foo">
</div>

This is the call that should fill the div (the call is triggered by some other client side event):

$("#foo").load("/someControllerName/someActionName" + " #foo");

The someActionName method :

public MvcHtmlString someActionName()
{
    //some other irrelevant code
    MvcHtmlString returnString = new MvcHtmlString("@Html.ActionLink(" + someFileName + ", \"Download\", new { request = \"" + sameFileId + "\"})");
}

I'm having trouble at actually filling the foo div with the content of the MvcHtmlString returned by someActionName, at the point where the both someFileName and sameFileId have valid values. What am I doing wrong? Is what I'm trying to achieve even possible?

Thanks!

Faris Zacina · Accepted Answer · 2014-11-26T13:45:58.617

1

If you want to run the dynamic razor expression and embed the HTML into your DIV you are doing it wrong. MvcHtmlString will just encode the expression string and return it to the client.

That action will return a Razor expression that is not comprehensible by your jQuery code. Razor is a server-side language executable by a view engine, so the only way to return a usable HTML link from your action is to execute your dynamic expression contained in the MvcHtmlString using the view engine on the server and return back a string.

One very simple way to execute your dynamic razor expression it is to use Partial Views. Your action would return just a partial view:

public PartialViewResult someActionName()
{
    var url = "/Contact";
    return PartialView("UrlView", url);
}

Your view would render your dynamic URL:

@model String
@{
    Layout = null;
}

@Html.ActionLink("Some Link", Model)

And then you can easily embed that dynamic URL into your div using $("#foo").load()

If this is too much code for you, alternatively you can try to use an open source project called RazorEngine to execute your razor statements, but i found it pretty buggy.

http://razorengine.codeplex.com/

edited Nov 26 '14 at 13:45

answered Nov 26 '14 at 13:01

Faris Zacina

14,056
7
62
75

I tried with the Partial View; I've sent the content of the `MvcHtmlString` as the model and just called `@Model` to display the whole string. The partial view gets called, but the `div` inside the main view remains empty. I've also tried creating a model containing the two fields i need (filename and id) and adapting the partial view, but the div is still empty. From your answer I understand that the string generated by razor through interpreting the partial view should be rendered in the `div` in the main view. Is this correct? – Alex Barac Nov 26 '14 at 14:11
Yes exactly. The partial view will be rendered by razor as an HTML link and should be returned to your view. If you created a model containing filename and ID make sure the @model directive on top of the razor view is updated as well to use the correct type. What do you see when you access /someActionName directly in your web browser? – Faris Zacina Nov 26 '14 at 14:32
Then the problem is in the jQuery load expression.. :) do you see an error in Firebug or Chrome dev tools console ? – Faris Zacina Nov 26 '14 at 14:48
Strange stuff. I could make it work with my example above and using jQuery load. – Faris Zacina Nov 26 '14 at 15:38
I've fixed it. The issue was removing `+ " #foo")` from the javascript `load` function parameter. Thanks for the idea on using PartialView – Alex Barac Nov 26 '14 at 15:42

Loading a DIV with dynamic MvcHtmlString

1 Answers1