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

Question

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

You should only refresh the partial view ,that is the advantage of MVC. — Jayantha Lal Sirisena, Jun 14 '11 at 05:06

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

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);

      });

}

edited May 23 '17 at 12:06

Community

1
1

answered Jun 14 '11 at 05:09

Jayantha Lal Sirisena

21,216
11
71
92

Let me give u the code as well <%= Ajax.ActionLink("Select", "Partial_Controller_Name", new { Id = item.ID }, new AjaxOptions { UpdateTargetId = "Partial_Controller_Name" })%>
<% Html.RenderPartial("Partial_Controller_Name"); %>
When I click on this button the it redirect me partial_Controller_Name without view – Aman Rohilla Jun 14 '11 at 05:45
Make sure you have added a reference to ajax javascript library – Jayantha Lal Sirisena Jun 14 '11 at 05:59
Try adding reference to Microsoft Ajax library – Jayantha Lal Sirisena Jun 14 '11 at 07:12

score 0 · Answer 2 · answered Jun 14 '11 at 05:07

0

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

answered Jun 14 '11 at 05:07

Tassadaque

8,129
13
57
89

See this answer http://stackoverflow.com/questions/1644350/asp-net-mvc-load-a-partial-view-using-ajax-from-a-jquery-ui-tab – Tassadaque Jun 14 '11 at 05:09
But I cannot load the partial view in Tab. – Aman Rohilla Jun 14 '11 at 05:11
write actionresult the return the partial view the other procedure is same as mentioned in above answer tabs are nothing but ul and li with some javascript – Tassadaque Jun 14 '11 at 05:16

1Mayur · Answer 3 · 2012-06-07T11:21:27.327

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 :)

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

3 Answers3

Linked