Dividing the main view in MVC to multiple sub views - javascript

I want to create a view that that is divided internally into many sub views
that will be displayed beside each other, i.e
The view will contains something like steps that when user fill one of the sub views he should click next button on the sub view to show the next sub view which will be displayed directly beside the old sub view .
I am using c# , MVC5 , JavaScript , Jquery .
i am thinking about creating ViewModel that conatins all my data of all sub views from all required tables , then create a view that is strongly typed to that view model .
In the strongly typed view , i am thinking to create a main Div html element that will contain another sub div elements (will be displayed Horizontally beside each other) and there will be a horizontal scroll to scroll through these sub div elements, each of them have fixed width and contains also a part of the fields for a certain part of data ,
in the first load of the page , there will be only the first sub div which will be visible to the user and it contains a tabular data , when user click on one line of this data it should show only the second sub div and an editable fields to be filled or edited and a button with text continue , when user clicks on the butoon continue on the second sub div view , it should display the third div element that will also contain some editable fields and a next button , when user click on that button it should display the fourth div ...etc , and at the final step it should display a submit button to save the data in all this divs elements and at the same time firs the validations of the page.
i am trying to find another solution rather than using partial views , it this idea will gonna work , because i have no time to implement and test , i should give a quick decision ,
Or if there is a better solution , i would be happy to know it .
i also need the submit button at the end, to horizontally scroll automatically to the sub div if it contains a validation error.
i am Open for any suggestions regarding this but i don't want to use Angular or NodeJS.

Related

Change the first field of the first row of a grid with bootstrap

I have a one page html empty, one controller angular and one service angular.
In my service I have implemented a grid with bootstrap, with 8 columns. when i put in my data i create 8 rows with all the same fields each other.
i want to understand how change the html code of the first line in the first field.
an example could be:
i have a table 8x8 when i click on first field of first row it show me the string "Hello" and when i click on other first field it show me the string "Good".
Simply i want change the html code row of a table already implemented with bootstrap, the first row.

Angular display images when field set to 1

I have an angular app in this plunker
In the app.js I have a JavaScript array named $scope.degrees. This variable has fields like
{DegreeID:"1",DegreeCategoryID:"1",Degree:"Accounting AAS ",DegreeTypeID:"2",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""}
When the + next to the My academic course is clicked, it opens a new panel to get a list of courses to select from. Here when we click 'Academic' it shows a new panel with all its children and similarly even for the 'Applied Sciences'. When you click on one of the elements of the list, it gives another list with its subcategories.
I would like to know how to display images when we have fields like BHC,CVC, etc that are set to "1". ie. I have png files for the field named BHC, CVC etc.. and i want to display those images when their respective values are "1" (few fields are also "", in this case I do not want to display them).
You can use ng-show to archive this:
<!-- when $scope.degrees.BHC is truthy (element is visible) -->
<div ng-show="degrees.BHC">
<img src="your_image" />
</div>
Angular will treat "0" as false.

Adding Pair of Drop downs Dynamically using Jquery

Am working on a ASP.NET MVC4 project. In UI i need to bring a following kind of sequence/cascading dropdowns.![Cannot add image since less reputation][1]
When "Left Table" and "Right Table" drop downs changed-show the tables column(s) names of respective tables using ajax as 2 dropdowns Named MasterKeys and SlaveKeys (from respecte tableNames) .when add button pressed load same coumnNames to two more dropdowns below to previously added.
I need to know how to add pair of dropdowns each time when add clicked(adding Multile joinKeys to join tables).That too to the same div with new line but with same content as previous (above it) so that they fall below the previous.
I tried this using jquery/javascript-adding dynamic elements.

pass data from popup gridview to parent page

the explanation given here http://wiki.asp.net/404.aspx?aspxerrorpath=/themes/fan/pages/page.aspx/282/passing-value-from-popup-window-to-parent-form39s-textbox/
is exactly what I want , but Its not giving the output and parent page despite doing exactly as explained ,
can anyone please send sample website with northwind data base ? no need of mdf file ,just a tested demo I will attach Northwind .
The task s simple , In pop up window there is a grid with some databound column and one with button , my task is when buton is clicked it must return text from respective grd row to the parent page'control (any)
Maybe is not working to you because on the sample is hard code the button id, and this logically because on the popup window did not know how the button have been render.
getElementById("ctl00_ContentPlaceHolder1_TextBox2")
So ether correct this id to make it as its appear to your page, ether make the control id on TextBox2 static so is not change, and get it by name.

How to remember the previous sorting order in jQuery Table sorting

I'm using jQuery for sorting the tables.
I open a page and click a columns to sort in desc or asc order and in the same page I click on a sub link to view some related data. Then I click back and come back to my same page (page1). At that moment the sorting which i did before I click the sub link is not there. I want the sorting to be remembered when I click the back button.
Example:
Page1 has column names as : Id, Name, Total_Marks. (Here Total_Marks have a link which opens a page for detailed marks(page2). The page2 has a back button which will redirect to page1.)
Step 1 : I sort the Name column in descending order.
Step 2 : I click on the Total_Marks link and navigate to next page for detailed report.
Step 3 : Now Im coming back to page1 by clicking the back button link.
Now the table in the page1 should be sorted by Name in descending order. (As i did before leaving the page1 to page2)
Is there a solution for this?
One option is to display your page of related data in a jQuery UI .dialog() instead of on a separate page. Then the user, instead of clicking the back button, simply dismisses the jQ dialog. The underlying page has not changed. This may be much easier than setting up a structure to maintain state: obtain it in $(document).ready(), update it on every change in sort order, etc.

Categories

Resources