在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

 更新时间:2018年11月13日 11:29:27   作者:小小妥妥大大  
这篇文章主要介绍了在layer弹出层中通过ajax返回html拼接字符串填充数据的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

1,在给一个layer弹出层做checkbox自动选中时,ViewBag传递的时object类型,用不了lambda表达式,代码如下,

 @foreach (var perm in ViewBag.allPerms)
 {
  <input type="checkbox" id="permissionIds_@perm.Id" 
   name="PermissionIds" value="@perm.Id" 
 checked="@(ViewBag.RolePerms.Select(r=>r.Id).Contains(perm.Id))"/>
   <label for="permissionIds_@perm.Id">@perm.Name</label>
 }

2,于是在弹出层就不写foreach循环遍历checkbox,直接在点击编辑事件时的弹出层中 ‘添加层弹出后的成功回调方法success' ,在里面通过ajax填充数据

Control中Edit方法获取数据

 //填充角色数据并显示
 public ActionResult Edit(long roleId = 0)
 {
  if (roleId == 0)
  {
   return Json(new JsonData { State = 0, ErrorMsg = "角色不存在!" });
   }
   var role = RoleService.GetById(roleId);
   if (role==null)
  {
   return Json(new JsonData { State = 0, ErrorMsg = "角色Id不存在!" });
   }
   var allPerms = PermissionService.GetAll();
   var rolePerms = PermissionService.GetByRoleId(roleId);
   RoleEditGetModel model = new RoleEditGetModel();
   model.RolePerms = rolePerms;
   model.AllPerms = allPerms;
   return Json(new JsonData { State = 1, Data = model });
 }

View中Layer弹出层success方法

success: function (layero, index) {
     //填充数据
     $.ajax({
      url: "/Role/Edit?roleId=" + id,
      type: "post",
      dataType: "json",
      success: function (res) {
       if (res.State == 1) {
        var html = "";
        var bool = false;
        for (var i = 0; i < res.Data.AllPerms.length; i++) {
         bool = false;
         for (var j = 0; j < res.Data.RolePerms.length; j++) {
          if (res.Data.RolePerms[j].Id == res.Data.AllPerms[i].Id) {
           bool = true;
           break;
          }
         }
         html += ' <input ' + (bool ? "checked" : "") + ' type="checkbox" id="permissionIds_' + res.Data.AllPerms[i].Id + '" name="PermissionIds" value="' + res.Data.AllPerms[i].Id + '" /> 
         <label for="permissionIds_' + res.Data.AllPerms[i].Id + '">' + res.Data.AllPerms[i].Name + '</label>'
        }
        $("#formValue").html(html);
       }
      },
      error: function () {
       layer.alert('网络请求失败!', {
        title: '提示框',
        icon: 0,
       });
      }
     });
    },

总结

以上所述是小编给大家介绍的在layer弹出层中通过ajax返回html拼接字符串填充数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • IE9下Ajax无法刷新数据的缓存问题解决方法

    IE9下Ajax无法刷新数据的缓存问题解决方法

    使用jQuery的getJSON从后台定时获取数据并刷新界面,在IE9下却无法刷新数据,原因就是缓存的问题,下面是解决方法
    2014-09-09
  • 天枫AJAX天气预报系统V1.0

    天枫AJAX天气预报系统V1.0

    天枫AJAX天气预报系统V1.0...
    2007-02-02
  • Django使用AJAX向服务器发起请求的操作方法

    Django使用AJAX向服务器发起请求的操作方法

    AJAX是一种用于创建交互式网页应用程序的技术,它允许在不重新加载整个页面的情况下向服务器发送和接收数据,本文给大家介绍Django使用AJAX向服务器发起请求的操作方法,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • 聊一聊Ajax的优缺点

    聊一聊Ajax的优缺点

    和大家一起聊一聊Ajax的优缺点,Ajax是一个动态的WEB应用的开发技术,它的出现丰富了用户的体验,今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Ajax表单异步上传文件实例代码(包括文件域)

    Ajax表单异步上传文件实例代码(包括文件域)

    这篇文章主要介绍了Ajax表单异步上传文件实例代码(包括文件域),非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-08-08
  • 关于Ajax的封装详解

    关于Ajax的封装详解

    这篇文章主要介绍了关于Ajax的封装详解,ajax用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新,本篇讲解ajax的封装,需要的朋友可以参考下
    2023-05-05
  • 如何创建ajax对象并兼容多个浏览器

    如何创建ajax对象并兼容多个浏览器

    这篇文章主要介绍了创建ajax对象并兼容多个浏览器方法简单记录,在某些情况下还是比较实用的,需要的朋友可以参考下
    2014-08-08
  • ajax局部刷新实例 (三种方法推荐)

    ajax局部刷新实例 (三种方法推荐)

    下面小编就为大家带来一篇ajax局部刷新实例 (三种方法推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 探讨Ajax中的一些小问题

    探讨Ajax中的一些小问题

    在ajax使用过程经常会遇到各种各样的问题,今天小编给大家分享ajax中的一些小问题,比较实用,感兴趣的朋友可以参考下
    2016-05-05
  • 用ajax实现读博客rss示例代码

    用ajax实现读博客rss示例代码

    这篇文章主要介绍了用ajax实现读博客rss的具体实现,需要的朋友可以参考下
    2014-05-05

最新评论