CODEWITHSUNDEEP
asp.net-mvc
Aman Rohilla
Aman Rohilla

Reputation: 622

how to refresh partial view without refreshing the complete page in mvc

I m using a Ajax Tab panel in my application. There are 4 tabs on Left hand side and a partial view on right hand side. In each of these tab I m displaying some data and there is a select link button on each tab. when I click on any of the select link button I m filling the partial view with some information. When this happens my view is completly loaded again. A B C D

eg these are the tabs. let us suppose that I m on tab B and now when I click on the select link button My view is completly loaded with information. but the tab loose the focus at this point. I comes back to the default value. so I want help on this 1) either I have to refresh only the partial view without loading the complete page 2) or I need to maintain active tab index value on click on select link button Please help me with this problem and provide me examples

Upvotes: 1

Views: 20479

Answers (3)

1Mayur
1Mayur

Reputation: 3485

This can be done using RjsResult class

if using mvc1 u can use RjsResult.cs

by this..you can update as many div you want in a page...

use this for implementation

public ActionResult Some_Method(){
RjsResult r = new RjsResult();
ViewData["SomeData"] = Some_Function();
r.update("DIV_id","PartialPagePath",ViewData,ControllerContext);
return r;
}

so when you click on somethink..this function will be implemnted and will refresh you div with tht partial

View part 

<div id="DIV_id"></div>

you can update as many dv as you want with a single click :)

Upvotes: 0

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

jQuery Tabs - Load contents only when clicked Here is the example which loading content of the tabs dynamically by Ajax. It is for PHP what you need to change is put controller/action instead of URL of the PHP page.

$.get("controller/action", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml");

or else instead of Ajax.ActionLink

use <a onclick="LoadTab(@item.ID)">Item @item.ID</a> and jquery function to change the tab and load data dyanamicaly

function LoadTab(id){
     //Change tab here Ex: $('#tabs').tabs('select', index);
      $.get('ajax/test.html', {Id, id},function(data) {
          $('#Partial_Controller_Name').html(data);

      });

}

Upvotes: 1

Tassadaque
Tassadaque

Reputation: 8199

Write an ajax call on click event of tab and load the partial view in the container of the tab

Upvotes: 0

Related Questions