MVC Ajax Helper or jquery asynchronous load partial view _jquery

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>