MVC Ajax Helper or jquery asynchronous load partial view _jquery

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.