HTML.Partial in Javascript

Question

I'm trying to render a partial view within my javascript code. The partial view itself contains JS codes as well, it's a kendo window.

This is my code, with changes suggested in this post :

var win = "@Html.Partial("_GenericWindow").ToString().Replace(Environment.NewLine, "").Replace(" ", "")";

$(".body-content").append(win);

But this code renders string in my page:

<divid="7067ea1a-0425-44a6-99d3-aefb37f088ed"></div><script> jQuery(function(){jQuery("#7067ea1a-0425-44a6-99d3-aefb37f088ed").kendoWindow({"modal":false,"iframe":false,"draggable":true,"scrollable":true,"pinned":false,"title":null,"resizable":true,"content":null,"actions":["Close","Minimize","Refresh"]});});</script>

And finally, this is my partial view:

@{
    var winId = Guid.NewGuid().ToString();
}

@(Html.Kendo().Window()
    .Name(winId)
    .Draggable()
    .Resizable()
    .Actions(actions => actions.Close().Minimize().Refresh())
)

Answer 1

The issue is MVC is preventing you from injecting raw HTML to the response stream.

You can modify your code by introducing @Html.Raw() to tell MVC that you want it to inject the raw HTML

ex..

var win = "@Html.Raw(@Html.Partial("_GenericWindow").ToString().Replace(Environment.NewLine, "").Replace(" ", ""))";

$(".body-content").append(win);

Answer 2

Well, this line works fine:

$('.body-content').load('/Home/win?window='.concat(text));

And the win action will return the partial view.