您的位置：首页 > 编程语言 > ASP

bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

2018-07-04 11:19 921 查看

bootstrap-data-target触发模态弹出窗元素的data使用

时间：2017-05-27 14:22:34 阅读：4479 评论：0 收藏：0 [点我收藏+]

标签：bootstrap-data-target触发模态弹出窗元素的data使用

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>data-target触发模态弹出窗元素</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <!-- data-target触发模态弹出窗元素 -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" 
    type="button">通过data-target触发</button>
    <!-- 模态弹出窗内容 -->
    <div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" 
    aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">
                    Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗主体内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

3.说明

本文出自 “素颜” 博客，请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1930093

bootstrap-data-target触发模态弹出窗元素的data使用

标签：bootstrap-data-target触发模态弹出窗元素的data使用

原文地址：http://suyanzhu.blog.51cto.com/8050189/1930093

data-toggle与data-target的作用

2017年06月22日 21:51:53 阅读数：14906

<a href="login.html" data-toggle="modal" data-target="#signin-signup-tab" id="signin-button" class="pull-right">Sign In</a>

：因为Bootstrap为这些元素都绑定上了事件，而终止了链接默认行为，你可以看看Bootstrap的文档，data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标,你这段代码的意思就是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。

深入ASP.NET MVC之九:Ajax支持

2013年10月23日 05:39:04 阅读数：2478

目前前端页面和服务端进行Ajax交互大多采用的都是jQuery, ASP.NET MVC提供了一些方法使得这个过程变得更加容易。常见的Ajax应用场景有两种，一个是点击一个链接，然后局部加载一些内容，可以是html片段，也可能是json数据，然后通过前端js处理之后显示；另一个是异步提交表单。这些帮助方法都是位于AjaxExtensions种的扩展方法。先看第一类场景，这是通过ActionLink来生成一个点击之后可以异步加载数据的链接。

1. Ajax Action Link

先看下如何使用这些方法,首先保证页面加载了依赖的js库：

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>

假如有如下的Controller:

public class AjaxController : Controller
{
public ActionResult Index()
{
return View();
}

public string Result(string name)
{
System.Threading.Thread.Sleep(2000);
return "This is " + name;
}
}

View文件如下:

@{
ViewBag.Title = "Index";
string[] data = new string[] { "Jack", "Tom", "Kathy" };
}
<style type="text/css">
a {
margin:10px;
}
#loading {
display:none;
color:red;
}
</style>
<div>
@foreach (var n in data)
{
@Ajax.ActionLink(n, "Result", new { name = n }, new AjaxOptions{
UpdateTargetId = "tabledata",
LoadingElementId = "loading"
});
}
</div>
<div id="loading">
Loading Data...
</div>
<div id="tabledata">

</div>

这样的效果便是点击超链接，从Result这个action方法就会被插入到id为tabledata的div中，在加载的过程中，id为loading的div会显示。应该说，这是一种非常常见的操作场景。在asp.net mvc的帮助下，我们不需要多写任何js代码就可以实现这一效果。下面来看下这是如何实现的。先看ActionLink生成了什么html代码:

<a data-ajax="true" data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#tabledata" href="/Ajax/Result?name=Jack">Jack</a>

ActionLink的源代码没有太多复杂的地方，只是按规则生成这个标签而已，唯一复杂的地方是href的生成，但这个不是本文讨论的重点，这和routing模块关系更加紧密一些，有机会另文分析。真正实现功能的地方都是在jquery.unobtrusive-ajax.js这个文件中，这是一个jquery的插件，首先在插件被加载的时候，执行了如下代码:

$("a[data-ajax=true]").live("click", function (evt) {
evt.preventDefault();
asyncRequest(this, {
url: this.href,
type: "GET",
data: []
});
});

利用jQuery的live方法设置了click事件设置为asyncRequest方法:

function asyncRequest(element, options) {
var confirm, loading, method, duration;

confirm = element.getAttribute("data-ajax-confirm");
if (confirm && !window.confirm(confirm)) {
return;
}

loading = $(element.getAttribute("data-ajax-loading"));
duration = element.getAttribute("data-ajax-loading-duration") || 0;

$.extend(options, {
type: element.getAttribute("data-ajax-method") || undefined,
url: element.getAttribute("data-ajax-url") || undefined,
beforeSend: function (xhr) {
var result;
asyncOnBeforeSend(xhr, method);
result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments);
if (result !== false) {
loading.show(duration);
}
return result;
},
complete: function () {
loading.hide(duration);
getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(this, arguments);
},
success: function (data, status, xhr) {
asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(this, arguments);
},
error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
});

options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

method = options.type.toUpperCase();
if (!isMethodProxySafe(method)) {
options.type = "POST";
options.data.push({ name: "X-HTTP-Method-Override", value: method });
}

$.ajax(options);
}

这个方法还是比较清晰的。首先根据options确定是否弹出一个确认框，然后是设置加载等待的元素和显示时间。接下来就是给options添加几个回调函数，这个options其实最终就是给jquery的ajax方法的参数。下面简单看下在设置回调函数的时候主要调用的getFunction方法:

function getFunction(code, argNames) {
var fn = window, parts = (code || "").split(".");
while (fn && parts.length) {
fn = fn[parts.shift()];
}
if (typeof (fn) === "function") {
return fn;
}
argNames.push(code);
return Function.constructor.apply(null, argNames);
}

这个方法接受两个参数，第一个code，就是在AjaxOptions中OnXXX属性上设置的值，第二个是argNames,表示的是这个回调函数的参数名字。首先它是从window对象开始查找是否有名字为code的函数，如果有，就直接返回那个函数；否则，code就是代码而不是函数名称，利用Function的构造函数创建一个新的函数。因此，OnBegin的值用如下的两种形式都是可以的:

@Ajax.ActionLink(n, "Result", new { name = n }, new AjaxOptions{
UpdateTargetId = "tabledata",
LoadingElementId = "loading",OnBegin="  alert(\"on begin\");return false;"
});

或者

<script type="text/javascript">
function Begin() {
alert("on begin");
}
</script>
@Ajax.ActionLink(n, "Result", new { name = n }, new AjaxOptions
{
UpdateTargetId = "tabledata",
LoadingElementId = "loading",
OnBegin = " Begin"
});

用第一种方式仍然可以使用参数。参数的名字见源代码。这里的JavaScript技巧值得学习下。ActionLink的原理就是这样，把原来使用jquery要做的一些准备工作包装的更加简单。

等到调用结束之后，在OnSuccess的时候，会默认执行如下方法:

function asyncOnSuccess(element, data, contentType) {
var mode;

if (contentType.indexOf("application/x-javascript") !== -1) {  // jQuery already executes JavaScript for us
return;
}

mode = (element.getAttribute("data-ajax-mode") || "").toUpperCase();
$(element.getAttribute("data-ajax-update")).each(function (i, update) {
var top;
switch (mode) {
case "BEFORE":
top = update.firstChild;
$("<div />").html(data).contents().each(function () {
update.insertBefore(this, top);
});
break;
case "AFTER":
$("<div />").html(data).contents().each(function () {
update.appendChild(this);
});
break;
default:
$(update).html(data);
break;
}
});
}

注意这里，UpdateTargetId如果不填或者没有找到元素，那么就不会发生任何事。这种情况适合服务器端返回的是json，xml等类型的数据而不是html，当我们拿到数据之后，需要通过JavaScript来生成要显示的html。

2. Ajax Form

Ajax Form的原理和ActionLink很像，唯一不同的是提交表单到一个地址，然后得到获得的数据:

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" , Url=Url.Action("Result")}))
{
@Html.EditorFor(m => m)
<input type="submit" value="submit" />

}
<div id="result">
</div>

Action代码如下:

public string Result(Course course)
{
System.Web.Script.Serialization.JavaScriptSerializer s = new System.Web.Script.Serialization.JavaScriptSerializer();
return s.Serialize(course);
}

本章将开始介绍MVC中Ajax的使用

以一个非Ajax版本开始

Controller

Model

View

测试：

验证请求类型

在IE中打开F12->Network ，我们可以看到请求的发起者是click操作，因为不是xmlHttpRequest，因而不是ajax请求

使用Ajax重构代码

配置Unobstrusiveajax

打开web.config

确保这一行在appconfig节点中：

打开App_Start/BundleConfig.cs，确保已添加（默认已添加）：

原因：我们需要的是jquery.1.7.1.js 和jquery.unobstrucsive-ajax.min.js,这两个包已经包含了，在layout中render就可以了。

打开_layout.cshtml

在中render 这两个包：

注意：在View确保没有把@{layout=null}，否则layout没有应用导致没有renderbundle，以致于无法render需要的script。

Controller 添加Action：

添加PartialViewPeoplePartialList.cshtml ：

添加View: AjaxList.cshtml ：

运行：

F12->Network 查看请求

可以看到，initiator 为XMLHttpRequest ,验证了请求确实是Ajax。

分析Obstrusivejavascript 工作原理

这是MVC Framework生成的form tag，对于unobsrutive javascript 来说，他关心的是data-ajax=”true”和data-ajax开头的attribute，首先找到所有data-ajax=”true”的form，然后根据data-ajax-mode找到data-ajax-update的id（注意，unobstrusivejs 基于Jquery，需要加#）完成局部刷新。

Ajax Options

以下列出一些常用的AjaxOptions ：

Confirm	发起请求前弹出确认框，指定确认框的文字
HttpMethod	请求类型：POST,GET,PUT,DELETE等等
InsertionMode	Replace,Before,After, 默认为Replace
LoadingElementId	请求发出后，收到Server回应前弹出一个loading的p，这里指定p id
LoadingElementDuration	设置loading Div最多显示多少秒
UpdateTargetId	要局部更新的container id
Url	发请求的url

Loading 和Confirmation

现在稍作改动，给例子加一个Confirmation和loading

准备loading的p和css

Css：

仅作为演示，我hard-code了loading p的位置，实际项目中需要调整

Html：

在AjaxOption中指定Id

在Controller中模拟一个长时间的任务

Sleep 3秒

在partialview中调用一下

运行，查看效果：

Ajax链接

Ajax链接的生成很简单。

稍作改动，看一下ajax链接的使用方法，在View(AjaxList.cshtml)中添加：

这样就可以了，其实就是调用Ajax.ActionLink函数，设置链接的文字，Action，以及参数，最后一个是AjaxOption，我们用的是前面一个demo的。

添加对Json的支持

改动Controller

和前面的步骤一样，添加两个Action，一个是服务第一次加载页面的请求，我们返回View，一个是Ajax过来的，我们需要返回JsonResult：

添加View：

JsonList.cshtml

为了简便演示，仅仅展示Json部分，笔者拿掉了Loading和Confirm的部分。

代码分析

代码的核心在于OnSuccess = "processData" 。

当Ajax请求成功时，指向processData函数，在这个函数里面，我们拿到id（JqueryId）为#tableBody的表单，清空，手动拼html，并用jquery添加到这个html control中。这部分可以优化，可以选择handlebar.js,knockout.js 等js template。

在table body中调用了@Html.Action("GetPeoplePartial",new {selectedRole = Model })，和前面的原因一样，为了第一次加载时显示出所有人员列表。

另外，AjaxOptions中还有其他Callback类型；

OnBegin : 发请求前

OnFailure ：请求失败

OnSuccess ：请求成功

OnComplete ：请求完毕

https://www.2cto.com/kf/201404/293702.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

bootstrap-data-target触发模态弹出窗元素的data使用

1.运行效果如图所示

2.实现代码如下

3.说明

data-toggle与data-target的作用

深入ASP.NET MVC之九:Ajax支持

1. Ajax Action Link

2. Ajax Form

本章将开始介绍MVC中Ajax的使用

以一个非Ajax版本开始

Controller

Model

View

测试：

验证请求类型

使用Ajax重构代码

配置Unobstrusiveajax

打开web.config

打开App_Start/BundleConfig.cs，确保已添加（默认已添加）：

打开_layout.cshtml

Controller 添加Action：

添加PartialViewPeoplePartialList.cshtml ：

添加View: AjaxList.cshtml ：

运行：

F12->Network 查看请求

分析Obstrusivejavascript 工作原理

Ajax Options

Loading 和Confirmation

准备loading的p和css

Css：

Html：

在AjaxOption中指定Id

在Controller中模拟一个长时间的任务

运行，查看效果：

Ajax链接

添加对Json的支持

改动Controller

添加View：

代码分析

bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX