Helper或Jquery异步加载部分视图,Helper或jQuery异步

作者: 关于计算机  发布:2019-09-03

废话相当的少说了,直接给大家贴代码了。

MVC Ajax Helper或jQuery异步格局加载部分视图,mvcjquery

Model:

namespace MvcApplication1.Models
{
    public class Team
    {
        public string Preletter { get; set; }
        public string Name { get; set; }
    }
}

因而jQuery异步加载部分视图

Home/Index.cshtml视图中:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div>
    <a href="#" id="a">通过jQuery异步</a> <br/>
</div>
<div id="result">

</div>
@section scripts
{
    <script type="text/javascript">
        $(function() {
            $('#a').click(function() {
                $.ajax({
                    url: '@Url.Action("Index","Home")',
                    data: { pre: 'B' },
                    type: 'POST',
                    success: function(data) {
                        $('#result').empty().append(data);
                    }
                });
                return false;
            });
        });
    </script>
}

HomeController调整器中:

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 = "通过jQuery异步方式到达这里~~";
            return PartialView("TeamY", result);
        }

        private List<Team> GetAllTeams()
        {
            return new List<Team>()
            {
                new Team(){Name = "巴西队", Preletter = "B"},
                new Team(){Name = "克罗地亚队", Preletter = "K"},
                new Team(){Name = "巴拉圭", Preletter = "B"},
                new Team(){Name = "韩国", Preletter = "K"}
            };
        }
    }
}

局地视图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)

通过MVC Ajax Helper异步加载部分视图

Home/Index.cshtml视图中供给援用jquery.unobtrusive-ajax.js文件,从调整器重临的强类型部分视图内容显示到UpdateTargetId钦命的div中。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div>
    @Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"})
</div>
<div id="result1">
</div>

HomeController调控器中:

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 = "通过MVC Ajax Helper到达这里~~";
            return PartialView("TeamY", result);
        }

        private List<Team> GetAllTeams()
        {
            return new List<Team>()
            {
                new Team(){Name = "巴西队", Preletter = "B"},
                new Team(){Name = "克罗地亚队", Preletter = "K"},
                new Team(){Name = "巴拉圭", Preletter = "B"},
                new Team(){Name = "韩国", Preletter = "K"}
            };
        }
    }
}

部分视图和上一种艺术一样。

 

页面刷新的诀要加载部分视图方法包括:
Html.RenderPartial()
Html.RenderAction()

 

 

 

Ajax Helper或jQuery异步方式加载部分视图,mvcjquery Model: namespace MvcApplication1.Models{ public class Team { public string Preletter { get ; set ; } public strin...

Model:

namespace MvcApplication1.Models
{
 public class Team
 {
  public string Preletter { get; set; }
  public string Name { get; set; }
 }
}

通过jQuery异步加载部分视图

Home/Index.cshtml视图中:

@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
 <a href="#" id="a">通过jQuery异步</a> <br/>
</div>
<div id="result">
</div>
@section scripts
{
 <script type="text/javascript">
  $(function() {
   $('#a').click(function() {
    $.ajax({
     url: '@Url.Action("Index","Home")',
     data: { pre: 'B' },
     type: 'POST',
     success: function(data) {
      $('#result').empty().append(data);
     }
    });
    return false;
   });
  });
 </script>
}

HomeController调整器中:

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 = "通过jQuery异步方式到达这里~~";
   return PartialView("TeamY", result);
  }
  private List<Team> GetAllTeams()
  {
   return new List<Team>()
   {
    new Team(){Name = "巴西队", Preletter = "B"},
    new Team(){Name = "克罗地亚队", Preletter = "K"},
    new Team(){Name = "巴拉圭", Preletter = "B"},
    new Team(){Name = "韩国", Preletter = "K"}
   };
  }
 }
}

部分视图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)

经过MVC Ajax Helper异步加载部分视图

Home/Index.cshtml视图中必要援引jquery.unobtrusive-ajax.js文件,从调整器再次来到的强类型部分视图内容呈现到UpdateTargetId钦点的div中。

@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
 @Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"})
</div>
<div id="result1">
</div>

HomeController调整器中:

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 = "通过MVC Ajax Helper到达这里~~";
   return PartialView("TeamY", result);
  }
  private List<Team> GetAllTeams()
  {
   return new List<Team>()
   {
    new Team(){Name = "巴西队", Preletter = "B"},
    new Team(){Name = "克罗地亚队", Preletter = "K"},
    new Team(){Name = "巴拉圭", Preletter = "B"},
    new Team(){Name = "韩国", Preletter = "K"}
   };
  }
 }
}

一部分视图和上一种情势同样。

页面刷新的艺术加载部分视图方法包罗:

Html.RenderPartial()
Html.RenderAction()

上面给大家介绍MVC中完成部分剧情异步加载

action中定义二个获取结果集的点子

public ActionResult GetItemTree(string title, int itemid, int? page)
  {
   pp = new PagingParam(page ?? 1, VConfig.WebConstConfig.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;
  }

    在主页面使用上面jquery代码异步调用上面的action

 $(function () {
  var id = '<%=itemid %>';
  $.ajax({
   type: "POST",
   url: "/Student/GetItemTree",
   data: { title: '<%=Model.Name %>', itemid: id, page: 1 },
   beforeSend: function (data) { //取回数据前
    $("#itemTree").html('数据加载中...');
   },
   error: function (data) { //发生错误时
//    debugger;
   },
   success: function (data) { //成功返回时
    $("#itemTree").html(data);
   }
  });

   最后在分公司视图GetItemTree.ascx中写上你要回来的数据结构就能够
   注意一点正是,假如涉嫌到分页,要用AJAX分页方式

<div style="float: left">
  <%=Html.AjaxPager(resItemResourceBefore, "itemTree", "GetItemTree", "Student")%>
 </div>

你或然感兴趣的文章:

  • jQuery Ajax 加载数据时异步显示加载动画
  • jQuery Ajax 异步加载显示等待效果代码分享
  • ajax异步加载图片实例分析
  • 用ajax动态加载供给的js文件
  • jQuery+AJAX达成无刷新下拉加载越来越多
  • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
  • php+ajax+jquery完毕点击加载越多内容
  • Jquery仿天猫京东多规格筛选可自行结合ajax加载示例
  • php+ajax完毕无刷新动态加载数据技能
  • Ajax 异步加载深入分析

本文由王中王开奖结果发布于关于计算机,转载请注明出处:Helper或Jquery异步加载部分视图,Helper或jQuery异步

关键词: