MVC中根据ajax返回数据,动态添加复杂html内容

问题描述

请教各位,如下代码,有id为abc的div,ajax返回一组数据,根据数据,动态添加一组复杂HTML内容到div中。具体下面代码里,需要添加一个视图my_view到div里,但是视图my_view是很复杂的Html内容,使用append方法,实际会报错,因为my_view转为html后,放进append方法,append的参数为字符串,但my_view有回车换行,js的字符串引号不能换行,除非把my_view全部内容缩为一行。有什么好办法实现我需要的功能吗?<divid="abc"></div><script>functiontest(){$.ajax({url:"test",type:"post",success:function(data){//这里操作返回数据for(vari=0;i<data.length;i++){$("#abc").append('@Html.Partial("my_view")',new{id=data[i].id});}}});}</script>

解决方案

本帖最后由 sunshuang1s 于 2015-09-25 13:59:58 编辑
解决方案二:
通过Get方式获取当你的my_view,然后直接添加到$('#abc')。url对应你my_view的路由$.get('url',function(view){$('#abc').html(view);});
解决方案三:
引用1楼xiaoguidangjiajia的回复:

通过Get方式获取当你的my_view,然后直接添加到$('#abc')。url对应你my_view的路由$.get('url',function(view){$('#abc').html(view);});

在后台把所有html循环做好,给回VIEW?这样如果很多的话,数据量很大啊。我的代码里用ajax就是因为ajax得到的data,可能只包括10个id号,最后循环生成10个my_view。如果10个my_view都靠后台做就太大了
解决方案四:
如果你这个很复杂的话,应该直接就是通过Action返回完整的View视图,ajax请求将得到的视图直接html也好,append也好到目标位置然后不可能一边执行js,一边执行后台代码的
解决方案五:
如果你是这样的问题的话,那你可以查下js模板,action返回json数据,然后直接将数据给模板就行了
解决方案六:
引用3楼starfd的回复:

如果你这个很复杂的话,应该直接就是通过Action返回完整的View视图,ajax请求将得到的视图直接html也好,append也好到目标位置然后不可能一边执行js,一边执行后台代码的

因为页面有点复杂,做这个是因为界面上有菜单,点每个菜单,对应添加出来的my_view个数不同,有的5个,有的10个,还会对每个my_view有js操作,操作好说,根据my_view的id写js操作。问题就是点菜单不想刷新整个页面,只能当点击菜单的时候,用ajax从后台获取菜单对应的ID组,每个ID生成一个my_view放进div。
解决方案七:
引用4楼starfd的回复:

如果你是这样的问题的话,那你可以查下js模板,action返回json数据,然后直接将数据给模板就行了

js模版是吧?我去看一下。
解决方案八:
我觉得楼上说的对。你不可能一边执行js,一边执行后台代码。要不就用action返回整体的view,要不就用楼上的方法返回json数据然后给模板。
解决方案九:
引用7楼xiaoguidangjiajia的回复:

我觉得楼上说的对。你不可能一边执行js,一边执行后台代码。


解决方案十:
引用7楼xiaoguidangjiajia的回复:

我觉得楼上说的对……

my_view里都是Html。
解决方案十一:
引用7楼xiaoguidangjiajia的回复:

我觉得楼上说的对。你不可能一边执行js,一边执行后台代码。要不就用action返回整体的view,要不就用楼上的方法返回json数据然后给模板。

都不知道怎么回你了,怎么发都说我有非法词组不让发。总之,my_view只是HTML,ajax哪一堆ID数组回来,一个ID添加一个my_view去div。没有一边执行js,一边执行后台。
解决方案十二:
JS太多就不要拼接了换行问题把它替换掉试试jquery.tmpl吧不过可能会引入新的问题比如你的JS事件不执行了
解决方案十三:
引用11楼tongxuejie的回复:

JS太多就不要拼接了换行问题把它替换掉试试jquery.tmpl吧不过可能会引入新的问题比如你的JS事件不执行了

就是想知道有没有什么合理一点的方案,现在这样怪怪的。
解决方案十四:
你可以试试一些mvvm框架我个人比较喜欢vue.js
解决方案十五:
引用2楼sunshuang1s的回复:

Quote: 引用1楼xiaoguidangjiajia的回复:
通过Get方式获取当你的my_view,然后直接添加到$('#abc')。url对应你my_view的路由$.get('url',function(view){$('#abc').html(view);});

在后台把所有html循环做好,给回VIEW?这样如果很多的话,数据量很大啊。我的代码里用ajax就是因为ajax得到的data,可能只包括10个id号,最后循环生成10个my_view。如果10个my_view都靠后台做就太大了

后台直接返回一个PartialView啊。

时间: 2024-09-21 09:05:45

MVC中根据ajax返回数据,动态添加复杂html内容的相关文章

.NET MVC 3 jquery ajax 返回数据捕获.

问题描述 publicActionResultIndex(){if(Request["id"]!=null){ViewData["test"]="ok";}else{ViewData["test"]="no";}returnView();} @{Layout=null;}<!DOCTYPEhtml><html><head><title>Index</ti

ASP.NET MVC中的AJAX应用_实用技巧

一.ASP.NET MVC中的AJAX应用 首先,在ASP.NET MVC中使用自带的ajax功能,必须要导入2个js文件(顺序不能颠倒): ASP.NET MVC提供了2个常用的ajax辅助方法. Ajax.ActionLink 该辅助方法用于在页面上生成具有ajax功能的超链接. 在该辅助方法中有一个AjaxOptions类型的参数,它包括如下属性: Confirm:在发送ajax请求前,弹出确认对话框,该属性就是设置对话框中的提示消息HttpMethod:用于设置请求的类型:Get|Pos

MVC中基于Ajax和HTML5实现文件上传功能_AJAX相关

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读

MVC中基于Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读

ajax 返回值自动添加pre标签的解决方法_AJAX相关

ajax返回,自动添加pre标签 ajax返回的内容,居然自动添加了<pre>标签 在FF,ie,谷歌浏览器中,每个返回的都不一样:ff小写,ie大写,谷歌加style 查了一下,原来是返回的类型不对. 最终解决结果,修改一般处理程序的返回类型 把 context.Response.ContentType = "text/plain"; 修改为 context.Response.ContentType = "text/html";

Ajax返回数据之前的loading等待效果

首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>) 调用下面方法:

ajax 返回值自动添加pre标签的解决方法

ajax返回,自动添加pre标签 ajax返回的内容,居然自动添加了<pre>标签 在FF,ie,谷歌浏览器中,每个返回的都不一样:ff小写,ie大写,谷歌加style 查了一下,原来是返回的类型不对. 最终解决结果,修改一般处理程序的返回类型 把 context.Response.ContentType = "text/plain"; 修改为 context.Response.ContentType = "text/html";

text-Android中怎样获取动态添加EditText的内容

问题描述 Android中怎样获取动态添加EditText的内容 RT,在Android中如何获得动态添加EditText的输入文本内容? 解决方案 search是一个TextView,类似于这样处理就行了: search.addTextChangedListener(new TextWatcher() { //输入后的串 qr 0 1 2 @Override public void onTextChanged(CharSequence s, int start, int before, int

请求参数返回数据成功-android开发,网络中可以请求返回数据

问题描述 android开发,网络中可以请求返回数据 android开发,在一个网络中可以请求参数返回数据成功,在另一个网络下请求不成功!这是什么原因啊? 解决方案 首先分析这两个网络环境的差异,原因肯定就在这个差异当中.然后分析是发送不成功还是服务器没有收到还是服务器的返回没有收到还是返回的数据是有问题,找到问题在哪里. 解决方案二: 这个网络的差异就是进不去的网络被禁用了一些端口,只是有些接口不可访问,有些接口可以访问.