MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(2)

其实上文只是对如何加代码的顺序方法的表述,这里面的代码每个函数是什么意思,要如何理解?需要我们深思。

我们先大框子去理解:我们上文在控制器里只是去HTTPGET了,HTTPget理解其实就是请求。那么我么要保存,要插入的时候要怎么做。

上文在控制器里增加了NEW的动作,当然我们要增加NEW的视图(New.cshtml),视图里面会有一个代码。

using(Ajax.BeginForm("New","DataModule",new AjaxOptions{

InsertionMode=InsertionMode.Replace,

HttpMethod="POST"

OnSuccess="saveSuccess"

},new{@id="savePersonForm"}

这个里面告诉我们:

New:控制器方法(和上文的HTTPGET是没有联系的,需要重新建立一个【httppost】的NEW用来接受模型并保存数据)

DataModule:控制器名字

OnSuccess:它是INDEX的JQ的方法,作用可以及时更改主页面的View数据。看上去就像保存了后立刻无刷新更新一样。很漂亮。

就是实现到这里我在想我如何按下DIALOG的按钮,不关闭窗口,而更新窗口的数据,实现了在对话框下分页到效果。

那么分页功能那篇国外文章写的也比较全,后期我可以对分页部分增加代码的要点来写篇文章。对于基础高的大师没有必要了,留给刚入门的菜鸟看看的。

我只是提出如何在DIALOG按钮下如何实现AJAX变化的效果。

1、我们在对话框的页面下增加一段话

<div id="content555"></div>主要的作用是让这部分的文字发生变化。

2、然后我们在INDEX的JS中的 dialog下的SAVE:fuction里增加我们想要用的东西 ,是什么。其实就是一个JQ的函数:(这个函数需要自己去了解它的功能)

$.ajax({
            type: "POST",
            url: "@Url.Action("GetAddressList", "Address")",
            data: { personNo: parPersonNo, pageNo: parPageNo },
            cache: false,
            dataType: "json",
            success: function (data)
            {                                 
                if (data.Html)
                {                      
                    $("#content555").html(data.Html);
                   
                    buttonizeALL();
                    setLinkAbilites();
                   
                    setPagingSummary(parPageNo);
                }
                else
                {
                    alert(‘opps!‘);
                }
            },
            error: function(exp)       
            {
                     alert(‘Error address : ‘ + exp.responseText);
            }               
        }); //end ajax call
当然到这里只是实现了对话框里面可以改变文字和数据变化功能,很多的学习需要举一反三。有时间我继续完善,但是给出思路,大家去实现了解非常重要。

MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(2)

时间: 2024-10-10 17:48:22

MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(2)的相关文章

VC点击按键弹出文件路径选择对话框

void CServerDlg::OnBnClickedButtonSavePath() { CString str; BROWSEINFO bi; ZeroMemory(&bi, sizeof(BROWSEINFO));     //作用为给所有参数都设为0,即NULL bi.hwndOwner = GetSafeHwnd();   //bi.hwndOwner = m_hWnd; bi.pidlRoot = NULL;    //设置开始搜索位置,为NULL默认从the desktop fo

如何弹出QQ临时对话框实现不添加好友在线交谈效果

如何不添加好友弹出QQ临时对话框实现在线交谈效果,这样的一个需求,我们真的是太需要了,实现起来也很简单,一行代码即可搞定,需要的朋友可以参考下 其实这个很简单,在img我们加入一个a标签,然后 <a href='tencent://message/?uin=QQ号码&Site=网站地址&Menu=yes'></a> 例子: <a target="_blank" href="http://wpa.qq.com/msgrd?v=1&a

Bootstarp学习(二十三)模态弹出框(Modals)

这一小节我们先来讲解一个"模态弹出框",插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的"modal.js"文件. 样式代码: ? LESS版本:modals.less ? Sass版本:_modals.scss ? 编译后的Bootstrap:对应bootstrap.css文件第5375行-第5496行 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中

Bootstrap模态弹出框

前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.本文将详细介绍Bootstrap模态弹出框 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ? 

Android 如何监听返回键,弹出一个退出对话框

Android 如何监听返回键,弹出一个退出对话框 分类: 初级android2012-10-21 00:46 48472人阅读 评论(9) 收藏 举报 androiddialogbuttonclass Android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用程序不小心点击退出键而直接退出.自己记录下这个简单的demo,备用. 注:如下代码当时是从网上copy过来的,现在忘了它出自哪个原作者了,在此说声抱歉. 源码如下: [html] view plaincopy <EM

JS弹出框、对话框、提示框,JS关闭窗口、关闭页面和JS控制页面跳转

一.JS弹出框.对话框.提示框 //====================== JS最常用三种弹出对话框 ======================== //1弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //2弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { a

javaScript 删除事件 弹出确认 取消对话框

1 javaScript 删除事件 弹出确认 取消对话框 2 1. 3 4 <a href="javascript:if(confirm('确实要删除?'))location='http://www.baidu.com'">删除</a> 5 6 2. 7 8 <script language="JavaScript"> 9 function delete_confirm(e) 10 { 11 if (event.srcElemen

20151124001 关闭C#主窗体弹出是否关闭对话框

关闭C#主窗体弹出是否关闭对话框 private void Frm_Main_FormClosing(object sender, FormClosingEventArgs e)        {            DialogResult TS = MessageBox.Show("确定要关闭并退出程序?", "退出提示", MessageBoxButtons.YesNo, MessageBoxIcon.Question);            if (TS

BootStrap学习笔记JS插件(一)--模态弹出框

一.弹出框基础 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss=&quo