电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

ASP.NET MVC視圖頁使用jQuery傳遞異步數據的幾種方式詳解

瀏覽:17日期:2022-06-08 18:25:17

在ASP.NET MVC的視圖頁向控制器傳遞異步數據,可能是數組,JavaScript對象,json,表單數據,等等。

關于數據,JavaScript對象有時候和json長得一模一樣,有么有?

var person = {Name: 'darren', Age: 21};
以上是一個JavaScript對象。不過也可以這樣表示:

var person = {"Name":"darren","Age":21};
以上JavaScript對象的另外一種表達方式,恰恰也符合json的表達方式。不過,JavaScript對象的寫法推薦使用第一種方式。

關于異步ajax發送;data屬性表示傳遞的數據;contentType樹形的默認值是application/x-www-form-urlencoded,表示客戶端請求類型;dataType表示從服務端返回的類型,可以是text, xml, json, script, html, jsonp。

而在服務端,通過Request.Form屬性可以獲得從客戶端傳遞來的異步數據。

傳遞JavaScript對象

在Home/Index.cshtml視圖中,使用jQuery發出一個異步請求,把返回的html內容加載到當前視圖中。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div id="result"></div>
@section scripts
{
    <script type="text/javascript">
$(function() {
    var person = {Name: "Darren", Age: 21};
    $.ajax({
type: "GET",
url: "@Url.Action("GetInfo","Home")",
data: person,
datatype: "html",
success:function(data) {
    $("#result").html(data);
}
    });
});
    </script>
}

HomeController中從Request.Form中獲取數據,并返回強類型部分視圖。

    public class HomeController : Controller
    {
public ActionResult Index()
{
    return View();
}
public ActionResult GetInfo()
{
    //從表單中獲取的數據
    var person = new Person();
    person.Name = Request["Name"];
    person.Age = int.Parse(Request["Age"]);
    return PartialView("_DisplayJavaScriptObject", person);
}
    }

Home/_DisplayJavaScriptObject.cshtml強類型視圖展示數據。

@model MvcApplication1.Models.Person
<div>
    <h3>從表單中讀出的數據</h3>
    <p><span>Name:</span><span>@Model.Name</span></p>
    <p><span>Age:</span><span>@Model.Age</span></p>
</div>

傳遞數組

傳遞數組的時候有幾點需注意:
1、需要把數組toString()后作為json數據傳遞,toString()后數組變成以逗號隔開的字符串
2、是以Query String的形式傳遞給服務端的
3、服務端為了獲取集合數據,需要split數組字符串

在Home/Index.cshtml視圖中,使用jQuery發送異步GET請求時,數組ids需要toString()轉換成"1,2,3"形式的字符串。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div id="result"></div>
@section scripts
{
    <script type="text/javascript">
$(function() {
    var ids = [1, 2, 3];
    $.ajax({
type: "GET",
url: "@Url.Action("GetInfo","Home")",
data: { myArr: ids.toString() },
datatype: "html",
success:function(data) {
    $("#result").html(data);
}
    });
});
    </script>
}

在HomeController中,通過Request.QueryString來獲取數組字符串,最后再split轉換成集合。

    public class HomeController : Controller
    {
public ActionResult Index()
{
    return View();
}
public ActionResult GetInfo()
{
    string temp = Request.QueryString["myArr"];
    List<int> result = new List<int>();
    string[] tempArr = temp.Split(",");
    foreach (var item in tempArr)
    {
result.Add(int.Parse(item));
    }
    ViewData["t"] = result;
    return PartialView("_DisplayJavaScriptObject");
}
    }

Home/_DisplayJavaScriptObject.cshtml從ViewData中取出數據遍歷集合展示數據。

@foreach (var item in ViewData["t"] as IEnumerable<int>)
{
    <span>@item.ToString()</span>
}

傳遞表單數據

傳遞表單數據的時候有幾點需注意:
1、通過$('#myForm').serialize()把表單數據封裝起來
2、控制器Action方法需要打上[HttpPost]
3、控制器Action方法,可以通過強類型參數來接收,也可通過Request["Name"]的方式獲取數據

在Home/Index.cshtml視圖中,使用jQuery發送異步POST請求時,使用$('#myForm').serialize()把表單數據封裝起來。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
    <form id="myForm">
<div>
    @Html.Label("Name","姓名")
    @Html.TextBox("Name","Darren")
</div>
<div>
    @Html.Label("Age","年齡")
    @Html.TextBox("Age","21")
</div>
    </form>
    <div>
<button id="btn">提交</button>
    </div>
</div>
<div id="result"></div>
@section scripts
{
    <script type="text/javascript">
$(function() {
    $("#btn").on("click", function() {
$.ajax({
    type: "POST",
    url: "@Url.Action("GetInfo","Home")",
    data: $("#myForm").serialize(),
    dataType: "html",
    success: function(data) {
$("#result").html(data);
    }
});
    });
});
    </script>
}

在HomeController中,需要在GetInfo方法上打上[HttpPost],用強類型參數來接收數據。

    public class HomeController : Controller
    {
public ActionResult Index()
{
    return View();
}
[HttpPost]
public ActionResult GetInfo(Person person)
{
    return PartialView("_DisplayJavaScriptObject", person);
}
    }

Home/_DisplayJavaScriptObject.cshtml強類型視圖展示數據。

@model MvcApplication1.Models.Person
<div>
    <h3>從表單中讀出的數據</h3>
    <p><span>Name:</span><span>@Model.Name</span></p>
    <p><span>Age:</span><span>@Model.Age</span></p>
</div>

傳遞json數據

傳遞json數據需注意的是:
1、json格式要寫對:{ "Name":"Darren","Age":21}
2、控制器Action方法中通過Request["Name"]的方式獲取數據

在Home/Index.cshtml視圖中,使用jQuery發送異步Get請求。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div id="result"></div>
@section scripts
{
    <script type="text/javascript">
$(function() {
    $.ajax({
type: "GET",
url: "@Url.Action("GetInfo","Home")",
data: { "Name":"Darren","Age":21},
datatype: "html",
success:function(data) {
    $("#result").html(data);
}
    });
});
    </script>
}

在HomeController中通過Request["Name"]的方式獲取數據。

   public class HomeController : Controller
    {
public ActionResult Index()
{
    return View();
}
public ActionResult GetInfo()
{
    //從表單中獲取的數據
    var person = new Person();
    person.Name = Request["Name"];
    person.Age = int.Parse(Request["Age"]);
    return PartialView("_DisplayJavaScriptObject", person);
}
    }

Home/_DisplayJavaScriptObject.cshtml強類型視圖展示數據。

@model MvcApplication1.Models.Person
<div>
    <h3>從表單中讀出的數據</h3>
    <p><span>Name:</span><span>@Model.Name</span></p>
    <p><span>Age:</span><span>@Model.Age</span></p>
</div>

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對的支持。如果你想了解更多相關內容請查看下面相關鏈接

標簽: ASP.NET
相關文章:
主站蜘蛛池模板: 鼓风干燥箱_真空烘箱_高温干燥箱_恒温培养箱-上海笃特科学仪器 | 伟秀电气有限公司-10kv高低压开关柜-高低压配电柜-中置柜-充气柜-欧式箱变-高压真空断路器厂家 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 安全,主动,被动,柔性,山体滑坡,sns,钢丝绳,边坡,防护网,护栏网,围栏,栏杆,栅栏,厂家 - 护栏网防护网生产厂家 | TPU薄膜_TPU薄膜生产厂家_TPU热熔胶膜厂家定制_鑫亘环保科技(深圳)有限公司 | 诺冠气动元件,诺冠电磁阀,海隆防爆阀,norgren气缸-山东锦隆自动化科技有限公司 | 真空包装机-诸城市坤泰食品机械有限公司 | 洗地机-全自动/手推式洗地机-扫地车厂家_扬子清洁设备 | 众品地板网-地板品牌招商_地板装修设计_地板门户的首选网络媒体。 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 自动记录数据电子台秤,记忆储存重量电子桌称,设定时间记录电子秤-昆山巨天 | 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 建筑消防设施检测系统检测箱-电梯**检测仪器箱-北京宇成伟业科技有限责任公司 | 首页_中夏易经起名网 | 章丘丰源机械有限公司 - 三叶罗茨风机,罗茨鼓风机,罗茨风机 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 钢骨架轻型板_膨石轻型板_钢骨架轻型板价格_恒道新材料 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 罗茨真空机组,立式无油往复真空泵,2BV水环真空泵-力侨真空科技 | 土壤养分检测仪_肥料养分检测仪_土壤水分检测仪-山东莱恩德仪器 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 数控车床-立式加工中心-多功能机床-小型车床-山东临沂金星机床有限公司 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 新型游乐设备,360大摆锤游乐设备「诚信厂家」-山东方鑫游乐设备 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | CPSE安博会| 全自动面膜机_面膜折叠机价格_面膜灌装机定制_高速折棉机厂家-深圳市益豪科技有限公司 | 低温等离子清洗机(双气路进口)-嘉润万丰| 深圳成考网-深圳成人高考报名网| 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 真空冷冻干燥机_国产冻干机_冷冻干燥机_北京四环冻干 | 四川成都干燥设备_回转筒干燥机_脉冲除尘器_输送设备_热风炉_成都川工星科机电设备有限公司 | 滑板场地施工_极限运动场地设计_滑板公园建造_盐城天人极限运动场地建设有限公司 | 五轴加工中心_数控加工中心_铝型材加工中心-罗威斯 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 苏州伊诺尔拆除公司_专业酒店厂房拆除_商场学校拆除_办公楼房屋拆除_家工装拆除拆旧 | 学生作文网_中小学生作文大全与写作指导 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 沈飞防静电地板__机房地板-深圳市沈飞防静电设备有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。 | 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 |