html - Render partial view upon menu selection -



html - Render partial view upon menu selection -

i've got tab menu want utilize show different partial views depending on menu item selection. how looks like:

something like: if selected item 1, render view "whatever"...

i want click on 1st menu item , render partial view tab1, 2nd menu item , render partial view tab2, etc...

edit - have been trying

the view:

<div class="tabs"> <ul> <li><a class="tab" id="tab1" href="#">personal data</a></li> <li><a class="tab" id="tab2" href="#">user image</a></li> <li><a class="tab" id="tab3" href="#">regional definitions</a></li> <li><a class="tab" id="tab4" href="#">colors , themes</a></li> <li><a class="tab" id="tab5" href='#'>personal area</a></li> </ul> </div> <div id="div-for-partial"> </div> ... <script type="text/javascript"> $(function () { $('.tab').click(function () { var id = this.id; $.ajax({ type: 'post', url: '@url.action("getpartialview", "configcontroller")', data: { 'id': id }, datatype: "html", success: function (data) { $('#div-for-partial').html(data); } }); }); }); </script>

the controller:

public actionresult index() { homecoming view(); } [httppost] public actionresult getpartialview(string id) { switch (id) { case "tab1": homecoming partialview("_personaldata"); case "tab2": homecoming partialview("_userimage"); } homecoming redirecttoaction("index"); }

implementing ajax not complicated. first assign each of tabs unique id , mutual class.

<div class="tabs"> <ul> <li><a href="#" class="tab" id="tab1">tab 1</a></li> <li><a href="#" class="tab" id="tab2>tab 2</a></li> <li><a href="#" class="tab" id="tab3>tab 3</a></li> </ul> </div>

then, create controller action post to.

public actionresult getpartialview(string id) { switch(id) { case "tab1": homecoming partialview("_partialfortab1"); case "tab2": homecoming partialview("_partialfortab2"); case "tab3": homecoming partialview("_partialfortab3"); } homecoming redirecttoaction("yourhomepage"); }

add click event handler tabs:

<script type="text/javascript"> $(function () { $('.tab').click(function() { var id = this.id; $.get('@url.content("getpartialview")', { 'id': id }, function (data) { $('#div-for-partial').html(data); }); }); }); </script>

html asp.net-mvc razor

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more