Is there a way that I can pass data to a partial view after it has been rendered. I have a partial view in my _Layout which is rendered. It needs isHeaderShown. However this isHeaderShown can only be set after the #RenderBody is called because only the body controller has this info.
I have in my layout.
#{Html.RenderAction("Index","_Menu", new { area = ""});}
#RenderBody()
Is there a way that I can pass data to a partial view after it has been rendered.
Not using server side. You could always make an AJAX request to the server using javascript and then update some portions of the DOM with the results received from the server. This will obviously happen at a later stage after the view has already been rendered in the browser. Another common technique different than AJAX is the server to push some data to the client using HTML5 WebSockets. You can take a look at SignalR. In both cases you will need to write javascript.
Related
I am new to Vue and I am trying to understand some concepts. So I have a website that is a mix of server-side and front-end rendering. When the index is first loaded it will return the first 10 products which are rendered by the server-side. Then the user will use a search filter to search for specific products or just scroll down so more products are loaded. This searching and loading will be done by Vue. Now the question is how to bind the data that is rendered initially by the server with the current data object of Vue?
The documentation says
v-model will ignore the initial value, checked or selected attributes
found on any form elements. It will always treat the current active
instance data as the source of truth. You should declare the initial
value on the JavaScript side, inside the data option of your
component.
So one can load the index without any data, then fire a second request to load the initial data but why waste one HTTP request on that?
The following code snippet can illustrate the issue present in Blazor applications which are rendered on the server side:
App.Client/Pages/Test.razor
#page "/test"
<p>#text</p>
#code
{
private string text;
protected override async Task OnInitializedAsync()
{
await Task.Delay(1000); // wait 1000 milliseconds
text = "foo";
}
}
When the component is first initailized on the server, the text variable is set to foo and a HTML document containing the string is sent over to the client. However, the client Blazor app isn't aware of the value that the server has assigned to the variable, which becomes null again. OnInitializedAsync is called again on the client and text is set back to foo, but only after a one second period during which there's nothing on the screen - a situation server-side rendering aims to avoid in the first place.
Do you know of any way to send components already populated with data?
Ok -- just being a bit picky -- this is a Blazor page....it isn't a component.
Yes, the pre-render they use isn't great, but assuming you're using Blazor for a SPA it should only happen once. Be careful to avoid a hard reload if you use the Microsoft.AspNetCore.Components.NavigationManager NavigateTo method. A hard re-load triggers pre-rendering because you refresh the SPA.
To avoid the whiplash, you want to avoid needing 1 second to load the text value. So you could use a singleton controller and inject it into the page. On the pre-render pass the value isn't yet known so we need 1 second to load it. Then on the client side pass the data could be accessed via the controller immediately.
Granted this isn't perfect if there is a ton of data to display. But in cases like that I generally show a 'loading' spinner and it gives the customer a feeling of controlled motion.
With the replacement of partial views in ASP.NET 5 with view components, how does one access the view components via URL?
I know you call them like...
#Component.Invoke("SomeList", 1)
...but what if you need to have like ajax paging, where you need a callback url to request the next set to be displayed in a partial view? So, a user can click "Load More" and it loads more from a 'partial view'.
You cannot access a view component from a URL directly. A view component is just a component of a view and that view could be a regular or partial view.
Based on your question, I believe you are trying to show the first page by default when the view (having the view component) is rendered? I have tried to put some scenarios here.
Example scenario:
Show a snippet on layout page which shows list of available job positions.
Usage cases:
Render the html related to a job list at the server side :
Layout page would have something like #Html.Partial("JobsListPartial").
This "JobsListPartial" would have something like await #Component.InvokeAsync("JobsListViewComponent", pageNumber). This partial view also sends ajax script to the client for users to navigate through the pages.
At the client when user tries to navigate to a different page, the ajax script makes a call to a JobsController having an api like IActionResult GetJobs(int pageNumber) and this action returns a PartialViewResult by doing something like return PartialView("JobsListPartial", pageNumber).
Render all pages at the client side only :
Create a partial view (having your ajax scripts) and render to the client.
Create a controller exposing api for navigation through pages of available job positions.
Call this api(returns json) from the ajax script.
Use the json data to dynamically change the UI at the client.
I have an ASP.net MVC 4 (Razor) application. We are using Dojo's 1.9 Gridx to display data.
My controller returns my model to the view. To work with the model on the client side, I usually will assign it to javascript variable as so:
var _model = #Html.Raw(Json.Encode(Model));
I can then pass the _model to Dojo's Gridx control. What I don't like is if you view the source in a browser, the data in _model is visible on the page. Is seeing the _model data in the browser by design? or is there a better way to do this?
Another way to do it (not sure if it's better), is to send your model to your view via the standard #model MyModel, serialize it to JSON and set it as a value of an input element, and then grab the value of the input via Javascript. Then you can destroy/remove the input element, and that data won't be visible in the browser source anymore.
Example:
In Razor View
#model MyModel
<input type="hidden" id="myViewModel" value="#Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />
In Your Javascrip File
$(function(){
var _model = JSON.parse($('#myViewModel').val());
$('#myViewModel').remove();
});
Doing it your way or this way, the entirety of the model's data will still be in the page's source (and hence visible to anyone looking) - even if it's for a short amount of time. Always remember that when considering security for your application.
I'm converting my site from using jQueryUI to jQuery Mobile, and I'm having some trouble.
I have a page that lets users add new timesheet entries. They click the "Add" button and it retrieves a Partial View from the server right onto the page.
The problem is that jQuery Mobile is not applying to any of the elements in the Partial View.
How can I force jQuery Mobile to process my elements after they've been inserted into the page?
The short answer is that you can just trigger the create method on the parent element of where you inserting your partial view.
For example $('#container').trigger( "create" );
Alternatively most widgets can be manually initialized by calling them on the element, for example for a listview: $('#myListview').listview(). This can be useful if you have only a few elements that need to be enhaced and you don't want to traverse all the child elements of the container. You should also know that for many widgets there is also a refresh method which you can call if you add elements to it after it has already been initialized for example $('#myListview').listview('refresh).
Also have a look at the following Q & A from the JQM docs which deals with this issue and for an explanation as to why it is necessary to call these methods.
Question: Content injected into a page is not enhanced.
Answer:
jQuery Mobile has no way to know when you have injected content into a
page. To let jQuery Mobile know you have injected content that must be
enhanced, you need to either make sure the plugins are called to
enhance the new elements or trigger("create") on the parent container
so you don't have to call each plugin manually.