asp.net mvc - Ajax request to fetch partial view -

i have main view this:

<%@ page title="" language="c#" masterpagefile="~/views/shared/site.master" inherits="system.web.mvc.viewpage" %>

index

<script src="../../scripts/jquery-1.3.2.js" type="text/javascript"></script>  <script src="../../scripts/microsoftajax.js" type="text/javascript"></script>  <script src="../../scripts/microsoftmvcajax.js" type="text/javascript"></script>  <h2>     index</h2>  <script type="text/javascript">     $(function() {         $('#mylink').click(function() {             $('#resultpartial1').load(this.href);             return false;         });     });      $(function() {         $('#mysecondlink').click(function() {             $('#resultpartial1').load(this.href, { id: 123 });             return false;         });     }); </script>  <%= html.actionlink("click me","partial1","foo",new myviewmodel { foo = "123" , bar="456" },new { id = "mylink" }) %> <%= html.actionlink("click me second link","partial2", "foo", new { id = "123" }, new { id = "mysecondlink" } 

) %>

and controller this:

public class foocontroller : controller {     //     // get: /foo/      public actionresult index()     {         return view();     }      public actionresult partial1(string id)     {         // todo: use id fetch model somewhere         myviewmodel model = new myviewmodel { bar = "a", foo = "1" };         return view(model);     }      public actionresult partial2(string id)     {         // todo: use id fetch model somewhere         myviewmodel model = new myviewmodel { bar = "b", foo = "2" };         return view(model);     } } 

}

and partial views :

<%@ control language="c#" inherits="system.web.mvc.viewusercontrol" %>

foo: bar:

<%@ control language="c#" inherits="system.web.mvc.viewusercontrol" %>

foo: bar:

i getting values set controller actions. want set values in view , pass partial view. how can ?

assuming have view model

public class myviewmodel {     public string foo { get; set; }     public string bar { get; set; } } 

and controller:

public class foocontroller: controller {     public actionresult partial1(string id)     {         // todo: use id fetch model somewhere         myviewmodel model = ...         return view(model);     }      public actionresult partial2(string id)     {         // todo: use id fetch model somewhere         someotherviewmodel model = ...         return view(model);     }  } 

a corresponding partial view:

<%@ control      language="c#"      inherits="system.web.mvc.viewusercontrol<appname.models.myviewmodel>"  %> <div>foo: <%= html.displayfor(x => x.foo) %></div> <div>bar: <%= html.displayfor(x => x.bar) %></div> 

and in main view have link:

<%= html.actionlink(     "click me",      "partial1",      "foo",      new { id = "123" },      new { id = "mylink" } ) %> <div id="resultpartial1" /> 

which ajaxified:

$(function() {     $('#mylink').click(function() {         $('#resultpartial1').load(this.href);         return false;     }); }); 

now of course if id parameter known javascript this:

<%= html.actionlink(     "click me",      "partial1",      "foo",      null,      new { id = "mylink" } ) %> 

and then:

$(function() {     $('#mylink').click(function() {         $('#resultpartial1').load(this.href, { id: 123 });         return false;     }); }); 

---

update:

and second link:

<%= html.actionlink(     "click me second link",      "partial2",      "foo",      new { id = "123" },      new { id = "mysecondlink" } ) %> <div id="resultpartial2" /> 

and then:

$(function() {     $('#mysecondlink').click(function() {         $('#resultpartial2').load(this.href, { id: 123 });         return false;     }); });