MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(1)
2014-07-26 10:34
363 查看
需求:MVC4下我想实现弹出对话框的效果,是模态的效果。在弹出对话框里不仅仅实现填充编辑框的效果。而是分页效果。这个功能我差不多花了一个星期的时间。其实我没有CSHARP开发过代码,而且对最新的技术都不了解了。因为没有基础的知识点支撑,没有好好的处理基础知识,所以绕了这么大的圈子。
英文水平有限,翻译可能不准确。非常好的一篇文章,支撑我的项目:http://www.codeproject.com/Articles/565513/How-to-series-about-MVC-jQuery-JSON-paging-mapRout《"How to series" about MVC, jQuery, JSON, paging, mapRoute》---当然这篇文章并没有实现在对话框下分页功能,但是里面丰富的知识点足以举一反三。
介绍:因为系统大量的数据,客户端工作非常重要,在ASP.NET典型的后置代码下,很自然的方法将很多的工作用ASP.NET组件放在后置代码中,然而,通过ASP.NET组件和可视降低性能。通过MVC可以知道以前的设计结果模式。在ASP.NET之前很流行。高执行性能。JQUERY和JSON。
背景:在想读懂或实现这些功能,需要了解的知识点:
MVC for beginners : http://www.w3schools.com/aspnet/mvc_intro.asp
jQuery for beginners : http://www.w3schools.com/jquery/default.asp
jSon for beginners : http://www.w3schools.com/json/default.asp
那篇文章提出知识点和实现效果,我这里就不赘述了。我原来实现的思路是想用 UPDATAPENL+AJAXTOOLKIT来实现的。确实我在ASP普通网站实现了弹出对话框分页的可能,而MVC下完全没有实现,所有的动作被控制器收了。就是不更新。
学习了jquery+AJAX,很快爱上了。不知道为什么,国内国外网站上面对弹出的对话框分页效果实现都没有案例,难道不需要,还是太简单的。对于我这个跳跃的学习的人来讲,完全没有必要。我不能理解。
别人的代码拿过来我们也是不说可以直接用的:
自己手动创建MVC4项目,我们需要如何移植代码呢?
1、MVC4里的_LAYOUT页面里,需要加入保证我们运行的JS。需要把别人的JS拷贝响应目录下
jquery-1.5.1.min.js
jquery-ui-1.8.11.min.js
moderizr-1.7.min.js
jquery.unobtrusive-ajax.js
jquery.validate.min.js
myjs.js
jquery.validate.unobtrusive.min.js
2、VIEW里找到需要增加弹出窗口的页面,可以选择HOME控制器里面Index页面,增加如下代码:
@Html.ActionLink("New","New",new{DataModuleId=0},new{@class="newLink"})
这个是弹出对话框的代码。
New:代表链接的文字。
New:控制器的动作。(我们的就在HOME的控制器里加一个就可以了)
DataModuleId:因为我做的是新建和编辑功能,他们可以共用一个窗体。所以我们用它传递0和1,0就是新建,1是编辑。
newlink:是下文JQUERY使用的类名。
3、下面我们增加JQuery代码,在Index里面加。可能新学的同学不知道在哪里加加什么,就需要了解MVC的相关知识。
<div id="saveDialog" title="Person Information"></div>
<script type="text/javascript">
var linkObj;
//.....
$(document).ready(function () {
//...
$('#saveDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#savePersonForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//....
setLinks();
});
// ....
function setLinks()
{
$(".editLink, .newLink, uploadPicLink").unbind('click');
$(".editLink, .newLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#saveDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data)
{
dialogDiv.html(data);
//validation
var $form = $("#savePersonForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//...
} //end setLinks
</script>
4、创建控制器,控制器当然也是Home,在HOME里增加New动作。-这里的模型不一定是你要的模型
[HttpGet]
public ActionResult New(int personNo)
{
Person person= new Person();
person.BirthDate = DateTime.Today;
person.PersonNo = 0;
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
到这里可以实现了弹出对话框了。代码是加了,可是很多人会调不通,因为不懂基础原理。JQUERT有一点不对,都有可能调不通。
但是对话框里的数据要如何处理保存,如何变化。需要下一篇文章来表达。
英文水平有限,翻译可能不准确。非常好的一篇文章,支撑我的项目:http://www.codeproject.com/Articles/565513/How-to-series-about-MVC-jQuery-JSON-paging-mapRout《"How to series" about MVC, jQuery, JSON, paging, mapRoute》---当然这篇文章并没有实现在对话框下分页功能,但是里面丰富的知识点足以举一反三。
介绍:因为系统大量的数据,客户端工作非常重要,在ASP.NET典型的后置代码下,很自然的方法将很多的工作用ASP.NET组件放在后置代码中,然而,通过ASP.NET组件和可视降低性能。通过MVC可以知道以前的设计结果模式。在ASP.NET之前很流行。高执行性能。JQUERY和JSON。
背景:在想读懂或实现这些功能,需要了解的知识点:
MVC for beginners : http://www.w3schools.com/aspnet/mvc_intro.asp
jQuery for beginners : http://www.w3schools.com/jquery/default.asp
jSon for beginners : http://www.w3schools.com/json/default.asp
那篇文章提出知识点和实现效果,我这里就不赘述了。我原来实现的思路是想用 UPDATAPENL+AJAXTOOLKIT来实现的。确实我在ASP普通网站实现了弹出对话框分页的可能,而MVC下完全没有实现,所有的动作被控制器收了。就是不更新。
学习了jquery+AJAX,很快爱上了。不知道为什么,国内国外网站上面对弹出的对话框分页效果实现都没有案例,难道不需要,还是太简单的。对于我这个跳跃的学习的人来讲,完全没有必要。我不能理解。
别人的代码拿过来我们也是不说可以直接用的:
自己手动创建MVC4项目,我们需要如何移植代码呢?
1、MVC4里的_LAYOUT页面里,需要加入保证我们运行的JS。需要把别人的JS拷贝响应目录下
jquery-1.5.1.min.js
jquery-ui-1.8.11.min.js
moderizr-1.7.min.js
jquery.unobtrusive-ajax.js
jquery.validate.min.js
myjs.js
jquery.validate.unobtrusive.min.js
2、VIEW里找到需要增加弹出窗口的页面,可以选择HOME控制器里面Index页面,增加如下代码:
@Html.ActionLink("New","New",new{DataModuleId=0},new{@class="newLink"})
这个是弹出对话框的代码。
New:代表链接的文字。
New:控制器的动作。(我们的就在HOME的控制器里加一个就可以了)
DataModuleId:因为我做的是新建和编辑功能,他们可以共用一个窗体。所以我们用它传递0和1,0就是新建,1是编辑。
newlink:是下文JQUERY使用的类名。
3、下面我们增加JQuery代码,在Index里面加。可能新学的同学不知道在哪里加加什么,就需要了解MVC的相关知识。
<div id="saveDialog" title="Person Information"></div>
<script type="text/javascript">
var linkObj;
//.....
$(document).ready(function () {
//...
$('#saveDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#savePersonForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//....
setLinks();
});
// ....
function setLinks()
{
$(".editLink, .newLink, uploadPicLink").unbind('click');
$(".editLink, .newLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#saveDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data)
{
dialogDiv.html(data);
//validation
var $form = $("#savePersonForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//...
} //end setLinks
</script>
4、创建控制器,控制器当然也是Home,在HOME里增加New动作。-这里的模型不一定是你要的模型
[HttpGet]
public ActionResult New(int personNo)
{
Person person= new Person();
person.BirthDate = DateTime.Today;
person.PersonNo = 0;
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
到这里可以实现了弹出对话框了。代码是加了,可是很多人会调不通,因为不懂基础原理。JQUERT有一点不对,都有可能调不通。
但是对话框里的数据要如何处理保存,如何变化。需要下一篇文章来表达。
相关文章推荐
- MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(2)
- 如何弹出QQ临时对话框实现不添加好友在线交谈效果
- 如何弹出QQ临时对话框,实现不添加好友的在线交谈效果。
- 如何弹出QQ临时对话框实现不添加好友在线交谈效果
- 如何弹出QQ临时对话框实现不添加好友在线交谈效果
- 在Asp.net中如何实现弹出提示对话框
- popupwindow 如何实现弹出菜单效果_popupwindow 实现弹出窗口范例
- 在Asp.net中如何实现弹出提示对话框
- 用JavaScript弹出的alert对话框中如何实现显示信息的换行
- 在windows2008平台上穿透session0,实现服务也可以弹出对话框
- 如何实现vc菜单弹出对话框
- 在Asp.net中如何实现弹出提示对话框
- [cocos2d]如何实现模态对话框
- 如何实现web应用下载文件时不弹出文件保存对话框,而是直接保存到指定的文件中
- 在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
- Dom利用javascript实现模拟弹出对话框效果的代码,类似JQuery中的dialog!
- 如何用CSS实现翻页效果?
- 如何用CSS实现翻页效果?
- 在Asp.net中如何实现弹出提示对话框()
- winform中如何实现自动点击webbrowser弹出对话框中的确定按钮