I have 3 different views and their respective controllers and action methods. On respective button clicks I am showing each view so far.
Now the client request is a new view, which contains the 1st view as half of the page and the remaining two views as the tabbed views. By default one of the tabbed view has to be loaded in next half of the page, the other view loads only on demand means on the respective tab click.
Note: Each view is from a service call.
Please give me some examples or references to work with. I am hoping for minimal changes in my code
Why don't you create it as partial view and you can load it in Tabbed div or any other div. This way you can have as many views you want on a page. Aslo you can load a view later on some event of that page. check this stack.
From what you've described above and the comments you made under one and free's post, it seems that you want to have a main page with several partial views rendered both inside and outside of a tabbed panel. Also, after changing the layout a bit you're having trouble resolving the models for (some of) those partial views.
If you are passing "coverageModel" to the main view, but the partial views required different models from different controllers, you should consider using something like the following (this is an example from Bootstrap, but may be applicable to your case):
<div class="tab-content">
<div id="tab1" class="tab-pane active">
#{ Html.RenderAction("Action", "Controller1");}
</div>
<div id="tab2" class="tab-pane">
#{ Html.RenderAction("Action", "Controller2");}
</div>
</div>
Again, your tab layout may be quite different from the above example, but the important thing is that RenderAction will be able to render a partial with a different model.
Related
My MVVM core 3.1 Index page displays database data nicely from it's model using this directive:
#model IndexModel
I launch a second page 'TOCPrintable" (for printing the exact same data but styled differently) with this:
<form method="post">
<input type="submit" value="Print TOC" asp-page="TOCPrintable" target="_blank"/>
</form>
The problem: I am unable to pass or reference the IndexModel of the Index page and consume it in the TOCPrintable page.
My reason for referencing/passing the model to the second page is I want to avoid coding the same database connections, calls, objects, etc.
IS my approach wrong?
Passing data between pages, or State Management as it is known can be done in a number of ways: https://www.learnrazorpages.com/razor-pages/state-management
In your example, since you are already posting a form, you may as well use hidden form fields.
I have following viewpage , Its form that contains text field, dropdowns and Rich text areas.
this is the cshtml code for that viewpage
I want to restrict Product_ID, ProductTypeID, ProductCategoryID, Subsidary_ID to first page and from Product title onward add to second page .
like this view
How can I do this ?
You would need to create 3 separate view models with 3 separate views and 3 actions methods. Then in the POST method for the 1st view, save the data and redirect to the 2nd view as so on. Assuming you want the visual effect of only displaying a limited number of form controls in the view, a better solution would be to keep one view and inside the form tags, rendered sections with 'next/back' buttons to display only one section at a time. A simple example would be
View
<section>
// first section controls
<button class="next">Next</button>
</section>
<section>
// second section controls
<button class="next">Next</button>
</section>
CSS
section:not(:first-of-type) {
display:none;
}
Script
$('.next').click(function () {
var container = $(this).closest('section');
container.next('section').show();
container.hide();
});
With the last section in the form containing a submit button to post the form back to the controller.
Refer also this answer for more detail on implementing client side validation to ensure the form controls in the current section are valid before moving to the next section.
I have a Model that loads the Sidebar for my webpage, along with a Model that loads the main content. The content Model will be different for each page whilst the Sidebar model will remain constant. The content Model will change by the user clicking links:
~/Home/About
~/Home/Contact
What I ideally want to to put a line of code in _Layout.cshtml that loads a Controller that returns a PartialView displaying the Sidebar Model. So we might have:
<div id="sidebar">
#Html.Render("~/SidebarController/GetSidebar");
</div>
<div id="content">
#RenderBody()
</div>
But I know this won't work. How do I achieve this?
What I would do is to use #Html.Action("GetSidebar") in the _Layout.cshtml file, then you can have an action in your controller
public ActionResult GetSidebar()
{
//do stuff, populate menu items from database? etc
// Pass the data to the partial view
return PartialView("_Sidebar");
}
You would need this in each of your controllers unless you put this in a base controller, which you can then inherit on all your other controllers and add [ChildActionOnly] to the top of your action so that it can not be called directly.
I do the same thing you are trying to do. I use:
#Html.Action("GetSidebar", "SidebarController")
to draw my side bar and it works fine. I use ajax calls when changing views though so as to save on loading the sidebar over and over again and I have the ajax target the "content" div replacing its content with the partial view that represents each page.
Imagine a simple page with a list of users. Selecting a user displays a JQuery modal dialog with various details that can be edited. Something like:
#model IEnumerable<UserRole>
#if (Model.Any())
{
foreach (var user in Model.Users)
{
Details
}
}
I'll have more specific examples through the post but what I'm looking for is a general 'experienced' opinion on what's the best way to load and display a Model bound Partial View as a JQuery dialog box.
I know how to do it code-wise but I think there must be a better way. I believe the common known ways to do it are not very efficient.
My rule and what I would like is for all code associated to a partial view popup to be kept in that partial view. I would like my popup to be structured something like the following UserDetails partial view:
#model User
<script src="#Url.Content("~/Scripts/UserScripts.js")" type="text/javascript"></script>
<div id="placeholder">
...The modal dialog content...
</div>
This way when another developer gets to look at it one will easily be able to piece it all together.
So as far as I know there are two ways to display a partial view as a Dialog and I have a problem with both of them:
1) Use the Partial view structure I displayed above, pre-load the div dialog from the master page by using #Html.Partial("UserDetails", new User) and then, when I need the dialog to be displayed populated with user data execute an Ajax call to an ActionMethod that will re-populate the partial view's model with needed data and re-render it with JQuery .html() method.
Once the partial view/dialog is loaded with data I simply display it with JQuery .dialog('open')
Great, this works but there are a few problems with this logic:
a) I'm loading the same partial view twice ( first blank , second loaded with data )
b) Content of the Placeholder DIV flashes on the screen when the master page is being loaded. Setting DIV to display:none won't work here before when .html() method triggers it will load the partial view with that display:none tag in it and the popup will be presented as a blank window.
c) When the page is requested, if large, it takes some time for the page to show
2) Instead of having in the partial View I can place a blank <div id="placeholder"></div> on the master page and then load the partial view content into that div with ajax or as I'm doing it now with JQuery :
var url = "/MyController/MyAction/" + Id;
$("#palceholder").load(url).dialog('open');
Again, it works but there are a few big problems I see with this way:
a) It breaks my "keeping it all together rule". When looking at , without some searching around another developer will have no idea what partial view will be loaded in this Div.
b) All Javascripts for the partial view popup will now need to be referenced in the master page, instead of a the partial view itself.
c) When the page is requested, if large, it takes some time for the page to show
The bottom line question is what do you think is the best way to display the model-bound populated partial view as a Modal Dialog while keeping the code organized ?
My perfect scenario would be to pre-load all partial view fields and then, when the request is made for the dialog to show populated with Data somehow a model bind pre-loaded partial view to the new JSon set of data, without loading/re-loading all partial view fields.
Is there a way ?
P.S. One of the things I tried is to pre-load my partial view fields with #Html.Partial("UserDetails", new User) and then use JQuery .replaceWith() method to replace Div contents but I couldn't get it to work unfortunately.
Any thoughts are appreciated. No ideas as are bad ideas.
Thanks.
Nothing wrong with having part of your code load in partial, and then just updating the partial container with a return from action.
<div id="ParitalContainer">
#Html.Partial("_PartialView", Model.PartialModel)
</div>
Or, you can consider a scenario to work with JSON data. Namely, have all your data loaded async by calling a $.ajax or $.getJSON. Your action result would return JsonResult and then you can just update the elements you want.
Furthermore, you could look into using Knockout.js if you want more robust solution. This is what I would do if I wanted "keeping it all together" approach.
I need to display a list of comments within a view. I have created an editor template for the Viewmodel type of my Comments. I call:
#Html.EditorFor(x => x.Comments)
To loop through and render the indiviudal comments.
Now, I also need to add a comment to the list. After adding to the DB i need to use jQuery to append the new comment view to the current list.
Should I create another partial view to mirror the EditorTemplate view...Or just call Html.RenderPartial on the new view within the editor template in the first place?
Hope that makes sense..
Each view (be it a partial or not) has its own html helper Property. Using this property You can and call partial views to arbitrary depth. In your Situation i would suggest creating Display Template for comments because you are displaying them not editing them. it will create no difference in terms of functionality whatsoever but it violates the convention. For example this is your display template for comments accepting IEnumerable
<%foreach(var x in Model){%>
<div> #x.CommentText</div>
<%} %>
Then you can have a partial view rendering the form to add new comment which you can place in another partial view called comment accepting Model of type Comment e.g
<%Html.BeginForm();%>
<div><%:Html.HiddenFor(x=>x.CommentID)%>
<%:Html.LabelFor(x=>x.CommentText)%>
</div>
<div>
<%:Html.TextAreaFor(x=>x.CommentText)%>
<input type='submit' value='save'/>
<%:Html.Endform();%>
i would personally call this view (rendering the form) from main view (from which i called Html.DisplayFor(x=>x.Comments)) because it is a concern separate from displaying list of comments.
I would just create a partial view with:
#model SomeModel
#Html.EditorForModel()
and use that if i needed to return PartialView() from an action method.
You can be lazy and use the same template by providing a model of an IEnumerable containing one comment.
jQuery provides a way to pick out a fragment from an AJAX response. See "Loading Page Fragments" here. Just add a selector for your one comment and add it to the list.