I would like to render the "scripts" section of the .cshtml view inside the controller as a string. Is this possible?
What I actually want to do is get the scripts with a separate ajax call and then run eval on the script after loading the html of the view also with ajax.
I've tried looking for related topics but haven't come up with anything relevant. Some related answers fool around with HtmlHelper.ViewContext.HttpContext.Items[""] but I'm unsure how to use it.
What I want is something like this: string scripts = GetScriptsForView(action, controller); which returns the section used in the view like this: #section Scripts {
To clarify (edit):
I'm trying to replace the "RenderBody()" of the layout page with ajax calls, so that I don't have to load the layout containing the static header every time.
I have managed to replace all <a>-tags with ajax calls replacing the <div> containing the view, but am unable to get the javascripts working.
I could remove the #section scripts { from the cshtml-files and let the script tag get loaded with the html view. The problem with this is that if I reload the page it calls the scripts for that view before calling the scripts of the layout page, resulting in errors. Therefore I wish to load the scripts separately.
TL;DR
While you can load sections and contents in separate requests (see example 1), but you don't need to do that. Instead:
You can have different Layout pages for different purposes and dynamically decide which layout to use for the view. For example a full layout page for normal requests and a simple layout page without headers and footers for ajax requests (see example 2).
You can decide dynamically about the layout page in _ViewStart.cstml or in the controller, based on different request parameters, like Request.Headers, Request.QueryString, Request.IsAjaxRequest, etc.
Long Answer
Here are some useful notes about the layout, section, view and partial view which may help you to handle the case:
Specify Layout in return View() - When returning a View you can specify the layout for the view. For example return View("Index", masterName: "_SomeLaypout"). You can have some logic to dynamically decide about the layout name.
Specify Layout in _LayoutStart.cshtml - When returning a View, you can specify the Layout in _ViewStart.cshtml file, for example #{ Layout = "_Layout"; }. You can have some logic to dynamically decide about the layout name.
Render content without Layout - When return a view using PartialView() method, it will render the whole content of the view without any layout or without rendering any section. It's equivalent to using return View and setting Layout to null, in _ViewStart.cshtml)
Render Section without any Content - You can have a layout having just a RenderSection method. Then if you return a view using that layout, it just renders the specified section of that view and will ignore the contents.
Scripts with/without Section - Considering above options, when you put scripts in the script tag without putting in a Section, you guarantee they will be returned as part of the result, regardless of calling return View or return PartialView or having or not having Layout. So in some cases you may want to put scripts without sections. In this case, when you load the partial view using ajax call, it contains the content as well as scripts of the partial view.
In some cases you may want to have some common content/scripts even for partial views, in such cases you can use Section, also have a Layout page which renders the section and contains common things that you want to have in all partial view. In this case you need to return the partial view using return View and specify that specific layout page.
Example 1 - Return just scripts or just content in an ajax request
The following example shows how you can send an ajax request to get content and send an ajax request to get scripts section.
Please note, I don't recommend using different requests for getting
content or getting scripts separately and this example is just for
learning purpose to show you what you can do with Layout pages and
_ViewStart.
To do so, follow these steps:
Change the _ViewStart.cshtml content to:
#{
if(Request.QueryString["Layout"]=="_Body")
{
//Just content of the page, without layout or any section
Layout = null;
}
else if (Request.QueryString["Layout"] == "_Script")
{
//Just script section
Layout = "~/Views/Shared/_Script.cshtml";
}
else
{
//Everything, layout, content, section
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
Note: Instead of a Request.QueryString, you can easily rely on a Request.Header or Request.IsAjaxRequest() or ... base on your requirement.
Then just for _Script, add a new layout page named _script.cshtml having the following content:
#RenderSection("scripts", required: false)
Then:
To get the script section, send a normal ajax request and add the following query string: Layout=_Script.
To get the content without script section, send a normal ajax request and add the following query string: Layout=_Body.
To get the whole content, send a normal ajax request without specifying any Layout query string.
For example, assuming you have a Sample action in Home controller:
[HttpGet]
public ActionResult Sample()
{
return View();
}
Which returns the following Sample.cshtml view:
<div id="div1" style="border:1px solid #000000;">
some content
</div>
#section scripts {
<script>
$(function () {
alert('Hi');
});
</script>
}
In client side, to get the script section:
<button id="button1">Get Sample Content</button>
<script>
$(function () {
$('#button1').click(function () {
$.ajax({
url: '/home/sample',
data: { Layout: '_Script' },
type: 'GET',
cache: false,
success: function (data) { alert(data); },
error: function () { alert('error'); }
});
});
});
<script>
Example 2 - Return Content Without Layout Using Ajax requests
In this example, you can see how easily you can return content and scripts of the views without layout for ajax requests.
To do so, follow these steps:
Change the _ViewStart.cshtml content to:
#{
if(Request.IsAjaxRequest())
{
Layout = "~/Views/Shared/_Partial.cshtml";
}
else
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
Add a new layout page named _PartialView.cshtml having the following content:
#RenderBody()
#RenderSection("scripts", required: false)
Get the view using ajax. For example, assuming you have a Sample action in Home controller:
[HttpGet]
public ActionResult Sample()
{
return View();
}
Which returns the following Sample.cshtml view:
<div id="div1" style="border:1px solid #000000;">
some content
</div>
#section scripts {
<script>
$(function () {
alert('Hi');
});
</script>
}
Get the result using ajax:
<button id="button1">Get Sample Content</button>
<script>
$(function () {
$('#button1').click(function () {
$.ajax({
url: '/home/sample',
type: 'GET',
cache: false,
success: function (data) { alert(data); },
error: function () { alert('error'); }
});
});
});
<script>
As per my understanding I guess you are looking for load the page via Ajax without reloading the entire page.
Did you check the Kool Swap Jquery plugin? Hope this will match your requirement.
Related
I've this ActionResult:
[EncryptedActionParameter]
[CheckExternalUserRegisterSigned]
public ActionResult ExpedienteIIT(int idExpediente)
{
ExpedienteContainerVM model = this.GetExpedienteVMByIdExpediente(idExpediente);
return View("ExpedienteIIT", model);
}
ExpedientIIT View:
https://jsfiddle.net/pq16Lr4q/
_Layout.cshtml:
https://jsfiddle.net/1ksvav43/
So when I return the view I got this error:
I tried to put console.logs to see if the view is rendered but is not rendered...
Ok the error is here:
#model PortalSOCI.WEB.ViewModels.IIT.ExpedienteContainerVM
#{
ViewBag.Title = String.Format(PortalSOCI.WEB.Resources.ExpedienteIIT.TituloExpedienteIIT, Model.Expediente.NumeroExpediente);
}
#section JavaScript /// <-------------------- ERROR
{
#Html.Raw(ViewBag.message)
#
Can you please help me.
edit:
After reading your code, i feel like
#RenderSection("scripts", required: false)
should be
#RenderSection("JavaScript", required: false)
an other thing that I think will give you trouble is the fact that you define your "JavaScript" section in the body. This means that if any of your views you forget to add that
#section JavaScript
{
#Html.Raw(ViewBag.message)
}
you'll get a Section JavaScript not defined error. In your case, feels like the section's definition should be in the _layout.cshtml.
This error most likely means that you have defined the JavaScript section but have not rendered it anywhere.
You need to call #RenderSection("JavaScript") somewhere in your layout.cshtml
the
#section JavaScript
{
}
will let you create a section called "JavaScript", but to actually "print" the content of this section to the output HTML file (that will be sent to the client) you need to call #RenderSection("JavaScript"). The content of the section will be printed where the call to RenderSection is located.
You need to put the missing section inside your ExpedienteIIT view. According to the error message, that missing section is JavaScript.
Code sample, put this at the bottom of your view:
#section JavaScript
{
// put javascript here
}
EDIT:
Thank you for providing a code sample of your views. There is a mismatch between how the JavaScript section in your layout page is defined and how it is being included in your view.
To fix this, do either one of the following:
In your _Layout page, change #RenderSection("scripts", required: false) to #RenderSection("JavaScript", required: false), OR
In your ExpedienteIIT view, change #section JavaScript to #section scripts
The important thing is that the two should match.
Setting up ngRoute throughout my application creates a problem. The controllers used in many views are dependant on script taken from the database in the ASP.NET controllers. Here's an example:
Angular App
var app = angular.module("app", ["ngRoute"])
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider
.when("/Template/:id", {
templateUrl: function(arg) { return "/User/Template/Details/" + arg.id },
controller: "FormController"
});
$locationProvider.html5Mode(false).hashPrefix("!");
}]);
Razor view Details.cshtml:
#{
Layout = null;
}
<head>
<script type="text/javascript">
alert('triggered');
angular.module("app").controller("FormController", ["$scope", function ($scope) {
alert("not triggered");
$scope.xyz = 1;
}]);
</script>
</head>
<div id="template-details" class="col-xs-12" ng-controller="FormController" ng-cloak>
<span>{{xyz}}</span>
</div>
It loads the view just fine, except it doesn't initiate the controller (with the ViewBag code). The script block executes just fine (tested with the first alert()).
Couple of things to keep in mind, when you get controller is undefined:
Make sure your Angular App is loaded before you call the FormController script
Make sure your FormController div is inside ng-app="app" div.
Make sure you are loading ng-route after angular.
I have created a JsFiddle from what you have provided and it works fine.
So the design ideal is to have one page with a couple different 'widgets' in this MVC app. Each 'widget' should be able to submit information back to itself and reload only itself. Simple in web forms, not so much with MVC it seems
First, we have our main page controller, nothing special
public ActionResult Index()
{
return View();
}
Next, we have our main page View. Note that I have tried both Action and RenderAction and there is no change in behavior
#Html.Action("Index", "Monitor", new { area = "Statistics" });
<div id="messages">
#Html.Action("Index", "Messages", new { area = "Data"});
</div>
#section Script {
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$('#filter').click(function () {
$.ajax({
method: 'POST',
url: '#Url.Action("Index", "Messages", new { area = "Data"})',
success: function(data){
$('#messages').html(data);
}
});
return false;
});
</script>
The Index ActionResult in the Messages Controller:
public ActionResult Index()
{
var model = GetMessages();
return PartialView(model);
}
For the sake of brevity, going to skip the whole of Monitor Index View, and only give a brief version of Messages Index View
#using (Html.BeginForm("Index", "Messages", FormMethod.Post))
{
//Some fields to limit results are here, with style classes
<button type="submit" id="filter">Filter</button>
}
#foreach(var item in Model)
{
//Display results
}
Upon loading the main page, all looks good. The fields to limit results are displayed, as well as messages. I can enter something into the fields, click Filter, and am returned to the main page but! ...the fields have lost their style classes and the messages are unfiltered.
Strange, but more strange is if I again enter information in the fields and click Filter, this time I am not taken to the main page, but get only the Partial View of the Messages Index displayed and the messages are not filtered.
I can't say that the filtering not working is related to this issue or not, but the non-consistent behavior of clicking Filter is the part that bothers me. Anyone like to point out what I am doing wrong in here?
You probably should be using Ajax.BeginForm rather than Html.BeginForm in your widgets. That will let the widgets manage their own posts:
<div id="messages">
#using (Ajax.BeginForm("Index", "Messages", new AjaxOptions { UpdateTargetId = "messages" }))
{
// fields content
}
// other widget content
</div>
The "bizarre" behavior you're seeing is happening because on page load the submit event for your #filter button is being hijacked using jQuery, but after the first replacement of the widget content the #filter submit event is no longer being hijacked so when you click it the whole page is submitted. If you don't want to use Ajax.BeginForm you'll need to use $.on rather than $.click to sign up events, as it will handle events for matching elements which are created after the event sign up script has run.
I am using MVC C# along with Jquery.
I have a partial view in a rather large page that has a number of tabs.
On a click of a checkbox, I like to update the partial view WITHIN the form.
What I am getting instead is just the partial view
Here is my code in Jquery:
$('#activelist,#inactivelist').change(function () {
var status = 'inactive';
window.location.href = '#Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status;
});
Any idea on how I could update the partial view within a form in terms of how I would make a call to it?
Here is the code for the PartialView
return PartialView(Kits);
As mentioned, what I see is just the partial view displayed and not the whole form.
window.location.href will reload the entire page. You need to reload some part of your page without a complete reload. We can use jQuery ajax to do this. Let's Find out what jQuery selector you can use to get the Partialview.
For example , Assume your HTML markup is like this in the main form ( view)
<div>
<p>Some content</p>
<div id="myPartialViewContainer">
#Html.Partial("_FeaturedProduct")
</div>
<div>Some other content</div>
</div>
And here the DIV with ID myPartialViewContainer is the Container div which holds the content of the partial view.So we will simply reload the content of that div using jQuery load method
$(function(){
$('#activelist,#inactivelist').change(function () {
var id="someval";
var status = 'inactive';
$("#myPartialViewContainer").load('#Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status)
});
});
You are redirecting the user, via the window.location.href property, to the URL of your partial, hence only displaying that partial.
You should instead do an AJAX call to the partial to retrieve it's HTML and then use something like the .append method to add it to whatever container element you want it to be added to.
EDIT: The .load() jQuery ajax method is actually better for this specific situation.
Here's the situation (using MVC 2.0):
I'm trying to build a feature to allow a user to preview changes they make to their bio/profile without actually committing their changes first. User fills out a form, clicks a "Preview" button and see what their changes look like. One difficulty is the front-end has a different master-page, so we need to render the whole view, not just a control.
Here's the approach I took:
Asynch post the serialized form to a controller action
Manipulate the model to flesh out the collections, etc. that don't get posted
Return the front-end view, passing it this modified model
Catch the response to the asynch method, wrap it in an iframe and write that to a lightboxed div on the page
Code I'm using... Controller action (the BuildPreview method just alters the model slightly)
[HttpPost]
[Authorize]
public ActionResult PreviewProfile(PersonModel model)
{
return View("Person", PeopleService.BuildPreview(model));;
}
HTML/Jquery stuff:
<script type="text/javascript">
$(document).ready(function () {
$("#previewButton").click(function (e) {
$.post("/PreviewProfile", $("#bioForm").serialize(), function (response) {
$("#previewFrame").html(response);
$("#holdMyPreview").modal({
overlayClose: true,
escClose: true,
autoResize: true,
}, "html");
});
});
});
The modal method is just a basic lightbox-esque thing.
Running into two problems:
EDIT - removed this, I was accidentally pulling a child control
The iframe isn't rendering the html (perhaps because it's not valid b/c it's missing html/body/head tags?). If I just drop the response direcltly into the div, without the iframe, it works... albiet with the wrong stylesheet. If I try to insert it into iframe it just treats it as an empty page, just the html, head and body tags show up.
Any thoughts?
Sam
PS: Tried this over at MSDN forums (http://forums.asp.net/t/1675995.aspx/1?Rendering+a+view+into+a+string+) and it didn't get anywhere, figured I'd see if SO has any brilliance.
so, just massage the response when you get it back, add the missing html/body/head
$.post("/PreviewProfile", $("#bioForm").serialize(), function (response) {
response = "<html><body>"+response+"</body></html>";
$("#previewFrame").html(response);
$("#holdMyPreview").modal({
overlayClose: true,
escClose: true,
autoResize: true,
}, "html");
});