No more nonsense to say, directly to everyone paste code.
Model:
Namespace Mvcapplication1.models
{public
class team
{public
string Preletter {get; set;}
public string Name {get; set;}}}
Asynchronously loading partial views through jquery
In home/index.cshtml view:
@{
viewbag.title = "Index";
Layout = "~/views/shared/_layout.cshtml";
}
HomeController Controller:
Using System.Collections.Generic;
Using System.Linq;
Using SYSTEM.WEB.MVC;
Using Mvcapplication1.models;
Namespace Mvcapplication1.controllers
{public
class Homecontroller:controller
{
public ActionResult Index ()
{return
View ();
}
[HttpPost]
Public ActionResult Index (string pre)
{
var result = Getallteams (). Where (t => t.preletter = = pre). ToList ();
Viewbag.msg = "Get here via jquery asynchronous Way ~ ~";
Return Partialview ("Teamy", result);
}
Private list<team> Getallteams ()
{return
to new list<team> () {
New team () {Name = "Brazil"), Preletter = "B"},
new Team () {name = "Croatia", Preletter = "K"},
new Team () {name = "Paraguay", Preletter = "B"},
N EW team () {Name = "Korea", Preletter = "K"}}}
Partial view teamy.cshtml:
@model ienumerable<mvcapplication1.models.team>
@{
var result = string. Empty;
foreach (var item in Model)
{result
+ = Item. Name + ",";
}
}
@ViewBag. msg.tostring ()
<br/>
@result. Substring (0,result. LENGTH-1)
Asynchronous loading of partial views through MVC Ajax Helper
The home/index.cshtml view needs to refer to the Jquery.unobtrusive-ajax.js file, rendering the strongly-typed partial view content returned from the controller to the Updatetargetid-specified Div.
@{
viewbag.title = "Index";
Layout = "~/views/shared/_layout.cshtml";
}
HomeController Controller:
Using System.Collections.Generic;
Using System.Linq;
Using SYSTEM.WEB.MVC;
Using Mvcapplication1.models;
Namespace Mvcapplication1.controllers
{public
class Homecontroller:controller
{
public ActionResult Index ()
{return
View ();
}
Public ActionResult Load (string pre)
{
var result = Getallteams (). Where (t => t.preletter = = pre). ToList ();
Viewbag.msg = "Arrive here through MVC Ajax Helper";
Return Partialview ("Teamy", result);
}
Private list<team> Getallteams ()
{return
to new list<team> () {
New team () {Name = "Brazil"), Preletter = "B"},
new Team () {name = "Croatia", Preletter = "K"},
new Team () {name = "Paraguay", Preletter = "B"},
N EW team () {Name = "Korea", Preletter = "K"}}}
The partial view is the same as the previous one.
How page refreshes load a partial view method includes:
Html.renderpartial ()
Html.renderaction ()
Here to introduce some of the implementation of MVC asynchronous loading
Action to define a method to get the result set
Public ActionResult Getitemtree (string title, int itemid, int? page)
{
pp = new Pagingparam (page? 1, Vconfig.web constconfig.pagesize);
common.page.pagedlist<entity.res_item_resource_r> Res_item_resource_r = iresourceservice.getres_item_ Resource_rbyitemid (itemid, pp);
viewdata["Res_item_resource_r"] = Res_item_resource_r;
Res_item_resource_r.addparameters = new System.Collections.Specialized.NameValueCollection ();
Res_Item_Resource_R.AddParameters.Add ("title", title);
RES_ITEM_RESOURCE_R.ADDPARAMETERS.ADD ("Itemid", itemid. ToString ());
Viewresult VR = new Viewresult
{
ViewData = ViewData,
mastername = "",
};
return VR;
}
Use the following jquery code on the main page to invoke the above action asynchronously
$ (function () {
var id = ' <%=itemid%> ';
$.ajax ({
type: "POST",
URL: "/student/getitemtree",
data: {title: ' <%=model.name%> ', Itemid:id, Page:1},
beforesend:function (data) {//Fetch before
$ ("#itemTree"). html (' <span style= padding:5 ' > Data Loading ... </span> ');
error:function (data) {//// debugger;
},
success:function ( Data) {//////
("#itemTree") when successfully returned. HTML (data);
}
);
Finally, in the partial view Getitemtree.ascx write the data structure you want to return
Note that when it comes to paging, you need to page through Ajax
<div style= "Float:left" >
<%=html.ajaxpager (Resitemresourcebefore, "Itemtree", "Getitemtree", " Student ")%>
</div>