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.
Related
I am new to Razor pages and hope there is a simple answer.
Using this sketch as an example:
Name | Page Chooser
|-----------------
Chooser | Page Content
|
In a Razor page, I want to click on a name in the "Name Chooser" section, and have the "Page Content" populate based on the ID of that selection. Then, if the user clicks a button in the "Page Chooser" section, have the "Page Content" section update using the same ID chosen in the name choose, but with the new page's controls.
In web forms, I would probably use nested Master Pages for this where the main page is the site navigation, header, and footer and the nested master page would have the Name Chooser and the Page Chooser. The child pages would be the "Page Content" section.
How would this be accomplished using Razor?
Is there a faster way of doing this? I really need to only render out the "Page Content" section and not everything else.
Note: The "Page Content" could be inputs, tables, forms, etc.
I found the answer. First, I used nested layouts to get the layout I wanted. Then, I put in a <div> to hold the place the page will inject.
<button id="btnTest" class="btn">Test</button>
<div id="content">This shows the area that will change</div>
Then, in JavaScript:
$('#btnTest').click(function () { $('#content').load('/Test');});
It works with Razor pages which is what I wanted. I can now replace the single test button with a button bar or something similar and just add more jQuery to change the loaded file in JavaScript.
I have a Razor View which has a section where the user can add new rows for ad-hoc opening/closing times on specific dates. It consists of three controls - a DatePicker, two Select lists and a "delete row" button. Existing saved rows are rendered on page-load through Razor, and any new rows are added via an OnClick event and JavaScript appending largely fixed html to the DOM element. All rows are then saved (or removed as required) on HTTPPost.
I have a new requirement which requires implementation of a much more complicated data-set for these ad-hoc, "user-generated" rows. The HTML for each of these rows is extensive. Is there a more elegant way of injecting Razor within a View on a button click than appending hard-coded HTML in JavaScript?
This depends entirely on your use case, and you did not provide any code in your question, but there's something called Partial View. You can read a basic introduction here.
For your case, I'd do something like this:
Controller
public IActionResult GetNewRow()
{
return PartialView("_NewRow");
}
View
<button id="btnAddRow" class="btn btn-primary">Add new row</button>
<script type="application/javascript">
$(function() {
$("#btnAddRow").on("click", function () {
$.get("/GetNewRow", function success(data) {
$("#WHEREVERYOUAREADDINGROWS").append(data);
});
});
});
</script>
PartialView (_NewRow)
<tr>
<td>Add whatever you need here</td>
<tr>
Note: I didn't try this so the AJAX syntax might be a little off.
I have 3 different view(DetailView, CardView, Column) template/html pages to show in single-page. The user can switch between these 3 view.
I want to bind single view at a time in page, if user switch it will remove previous view and bind the new view. I have data in Model for bind the view so, I no need to call service to bind data. I want toggle between these three-view without refresh page and loading data.
Problem is, if bind three view it will conflict with div-id and there are lots of html-code for all view in DOM.
Please suggest me how to toggle between these different view without loading & refreshing page??
<body>
<div ng-include="'detailView.html'" ng-show="detailView"></div>
<div ng-include="'cardView.html'" ng-show="cardView"></div>
<div ng-include="'cardView.html'" ng-show="cardView"></div>
</body>
As i know Angular Apps are SPA (Single Page Application) so if you switch pages by routing its default behavior its the one that you are asking for. Its not reloading/refreshing the page. It remove the previous view and bind the new one.
Check this guide : https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
Also try to use $location service to switch routes. It does not reload the page.
$location.path("/your-route").
Angular has routing module. This way you can define a route (page) with it's own URL, HTML template and controller.
configuration example:
YOUR_MODULE.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
You can read more about it in angular's documentation:
https://docs.angularjs.org/tutorial/step_07
For bigger applications I would suggest you to use UI-ROUTER:
https://github.com/angular-ui/ui-router
Anyway, if you're looking for something simple without any routing, you should use NG-IF instead of NG-SHOW.
NG-SHOW just hiding the HTML by css (display none) which means there might be conflicts for elements with the same IDs.
NG-IF will remove the element from the DOM, so there won't be any conflicts.
Good luck!
From what i could understand, when the first time the page loads, you have certain flag up to show that view and corresponding call to a service to bind data to that view.
Next time, the model is updated and a new flag is set, a new view comes into play and a similar service binds data..
Initially set the model all to false and make one true for default.
Toggle through view as:
<body>
<div ng-include="'detailView.html'" ng-if="detailView"></div>
<div ng-include="'cardView.html'" ng-if="cardView"></div>
</body>
Through this, at a particular time only one div is active and id would not conflict.
In the controller:
If($scope.detailView == true){
//Call to service for data..
}
Similarly, when the new model is updated , set all previous to false.
Please update your query to more clarify your objective.
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.
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.