AJax技术

ASP.NET MVC 使用Ajax更新PartialView视图中的数据(2)

字号+ 作者:H5之家 来源:H5之家 2015-10-16 10:07 我要评论( )

script type=text/javascript$(function () {$(#linkType).change(function () {var typevalue = $(#linkType).val();alert(typevalue);$.ajax({type: GET,url: /Admin/LinkManage/Index,data: { linktype: typeval

<script type="text/javascript"> $(function () { $("#linkType").change(function () { var typevalue = $("#linkType").val(); alert(typevalue); $.ajax({ type: "GET", url: "/Admin/LinkManage/Index", data: { linktype: typevalue } }); }); }); </script>

有一点需要注意的是$.ajax中URL参数最好是全路径的要不然VS会提示你找不到相应的视图。如果没有/Admin 它会去~/View/LinkManage里面找你的LinkList.cshtml。

当传入linktype值后后台的Controller会做相应的处理得到不同的数据集合,然后判断是不是Ajax的请求,如果是则执行LinkList分布视图数据绑定的操作,但是这样在页面上并没有显示对应的数据,因为你没有将这些数据显示在页面上,所以还需要在$.ajax执行完成之后将dvLink的html替换。

完整的Javascript代码如下:

<script type="text/javascript"> $(function () { $("#linkType").change(function () { var typevalue = $("#linkType").val(); alert(typevalue); $.ajax({ type: "GET", url: "/Admin/LinkManage/Index", data: { linktype: typevalue }, dataType:"html",//格式是html success: function (evt) { $('#dvLink').html(evt);//替换成新的数据 } }); }); }); </script>

这样一个根据DropDownList值改变更新数据列表功能就完成了,像编辑、删除这样的操作也可以这样实现。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评