.net mvc 利用分部视图局部刷新.
页面利用$.Ajax:
$(function(){
$("#btnpartview").click(function () {
var model = [];
model.push($("#txtAge").val(), $("#txtName").val());
$.ajax({
url: '/Home/Refresh',//控制器活动,返回一个分部视图,并且给分部视图传递数据.
data: JSON.stringify(model),//传给服务器的数据(即后台AddUsers()方法的参数,参数类型要一致才可以)
type: 'POST',
contentType: 'application/json;charset=utf-8',//数据类型必须有
async: true,//异步
success: function (data) //成功后的回调方法
{
$("#myDiv").html(data);//data--就是对应的分部视图页面内容.
//alert(data)//弹出框
},
error: function (data) {
alert("失败:"+data[0])//弹出框
} });
})
})
控制器中:
public ActionResult Refresh(string[] person)
{
string str = person[];
LinkedList<DemoData> datastest1 = new LinkedList<DemoData>();
//List<DemoData> datastest = new List<DemoData>();
DemoData dd = new DemoData(); dd.txtno = "";
dd.txtname = "李四";
dd.txtage = "";
datastest1.AddLast(dd); DemoData dd1 = new DemoData(); dd1.txtno = "";
dd1.txtname = "小王";
dd1.txtage = "";
datastest1.AddLast(dd1); DemoData dd2 = new DemoData(); dd2.txtno = "";
dd2.txtname = "张三";
dd2.txtage = "";
datastest1.AddLast(dd2); //return PartialView("/Views/Home/_PartialPage2.cshtml", datastest1);//要绝对路径
return PartialView("/Views/Shared/PartView1.cshtml", datastest1);//要绝对路径.datastest1--要传到分部视图中的数据.
}
页面:
<div id="myDiv">Ajax 内容显示
@*@Html.Partial("PartView1.cshtml", Model);*@
</div>
分部视图:
@model IEnumerable<MvcApp.Models.DemoData>
<div>
<div>
<select id="opselect">
<option value="opone">第一个值</option>
<option value="optwo">第二个值</option>
<option value="opthree">第三个值</option>
<option value="optfour">第四个值</option>
</select>
</div> <table>
@foreach (var item in Model)
{
var i = 0;
<tr style="background-color:#CCC;">
<td>
@item.txtno
</td>
<td style="width:30%">
@item.txtname
</td>
<td>
@item.txtage
</td>
</tr>
i++;
}
</table>
</div>
刷新之前的页面:
刷新后的页面:
.net mvc 利用分部视图局部刷新.的更多相关文章
- ASP.NET MVC之分部视图和ChildAction(三)
前言 上节我们已经非常清晰并且明确的讲了@Html.ActionLink的作用,这一节我们开始讲讲分部视图以及孩子Action. 话题 在C#中我们知道继承的目的是为了代码的复用,在Web应用程序同样 ...
- asp.net mvc4 使用分部视图来刷新数据库
前几天研究SSE,用浏览器做侦听后台数据库数据变化,如果有更新,就即时通过浏览器,使用SSE效果果然OK,侦听数据库有更新时马上会向浏览器通知有新数据,我还在浏览器里放了短音提示,但遇到一个问题,发出 ...
- MVC小系列(三)【MVC的分部视图】
MVC的分部视图: 分部视图在action中返回一定要用PartialView(),而不要偷懒使用View(),因为如果使用后者,系统会认为是一个标准视图,会为它加个默认的母版页(LayOut),除非 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- MVC采用Jquery实现局部刷新
该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- [转载].NET ASP.NET 中web窗体(.aspx)利用ajax实现局部刷新
之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...
- ASP.NET MVC 使用分部视图制作公共头部,尾部,并通过ViewBag传值
一:新建分部视图 二:布局页_Layout.cshtml上调用 不灵活,不能传递数据,引用静态公共部分 @Html.Partial("_Head") @Html.Partial(& ...
- Asp.net Mvc中分部视图获取后台数据并展示
方式一: 1.主页面中代码: @{Html.RenderAction("CreateLeftMenu");} 2.Controller中代码: public PartialView ...
随机推荐
- 进一步理解阿贾克斯(Ajax)
一.ajax简介 1.Asynchronous JavaScript and XML(异步的Javascript和XML) 2.是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 二.aja ...
- C#服务器端生成报告文档:使用帆软报表生成Word、Pdf报告
一.帆软报表简介 报表工具中,帆软报表相比Crystal Report(水晶报表).SQL Server Report Service(SSRS)等报表工具来说算是佼佼者,此外帆软报表在统计图表.数据 ...
- javaScript数组操作整理
一.js数组 1.创建数组: var arr = new Array();//创建没有元素空数组 var arr1 = new Array("value1","valeu ...
- npm包管理器相关知识
关于npm包安装命令的介绍,如下图:
- node nvm npm nrm 安装
http://cnodejs.org/topic/57f628098489e7ca69f4e839 //1.vim ~./bashrc 文件 把那两行配置代码加进入,然后按步骤执行 //console ...
- Kafka最佳实践
一.硬件考量 1.1.内存 不建议为kafka分配超过5g的heap,因为会消耗28-30g的文件系统缓存,而是考虑为kafka的读写预留充足的buffer.Buffer大小的快速计算方法是平均磁盘写 ...
- Flume搭建
[root@hadoop01 src]# mkdir flume [root@hadoop01 src]# ll 总用量 0 drwxr-xr-x. 2 root root 6 4月 7 201 ...
- [POJ 3764] The xor-longest Path
Description 多组数据 给你一颗树, 然后求一条最长异或路径, 异或路径长度定义为两点间简单路径上所有边权的异或和. Solution 首先 dfs 一遍,求出所有的点到根节点(随便选一个) ...
- 深度学习之TensorFlow构建神经网络层
深度学习之TensorFlow构建神经网络层 基本法 深度神经网络是一个多层次的网络模型,包含了:输入层,隐藏层和输出层,其中隐藏层是最重要也是深度最多的,通过TensorFlow,python代码可 ...
- 微信APP长按图片禁止保存到本地
项目遇到一个问题,在web页面中,禁止长按图片保存, 使用css属性: img { pointer-events: none; } 或者 img { -webkit-user-select: no ...