用户投稿今天在IT回答一个问题
MVC 使用 Ajax.BeginForm 的问题? - iT 邦帮忙::一起帮忙解决难题，拯救 IT 人的一天
想分享这个简单小程式给入门需要的邦友
效果图:
线上测试连结
MVC放成各一个处理，JS使用CDN
所以很方便测试跟移植。
逻辑:
1.把生成的button绑定click方法
2.点击变更button text
3.因为使用ajax beginform所以要注意点击时要去改变type为非submit
要不然缩小会没有效果
4.QueryHead方法为甚么要拼接ajax beginform
原因是.Net Fiddle不支援多CSHTML (也可以看一下beginform的原貌)
Models:
using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Web;namespace AjaxBeginForm_ITMan.Models{ public class Test { public static List<ITAccountModel> TestDatas = new List<ITAccountModel>(); static Test() { TestDatas.Add( new ITAccountModel { Account = "IT01", Name = "阿翰", Favorite = "C#、Java、Oracle...", Age = 24 } ); TestDatas.Add( new ITAccountModel { Account = "IT02", Name = "小明", Favorite = "Java、MYSQL...", Age = 25 } ); TestDatas.Add( new ITAccountModel { Account = "IT03", Name = "小朱", Favorite = "JS、PHP...", Age = 55 } ); } } public class ITAccountModel { [DisplayName("帐号")] public string Account { get; set; } [DisplayName("名称")] public string Name { get; set; } [DisplayName("喜好")] public string Favorite { get; set; } [DisplayName("年纪")] public int Age { get; set; } }}View:
@{ Layout = null;}@model AjaxBeginForm_ITMan.Models.ITAccountModel<!DOCTYPE html><html><head> <meta charset='utf-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>IT AjaxBeginForm</title> <link href='https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css' /></head><body> <div class='container body-content'> <br /> <h3>查询:</h3> @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "ajaxTargetHeaderDiv", Url = Url.Action("QueryHead") })) { <select name="Account"> <option value="null">null</option> <option value="IT" selected>IT</option> <option value="IT01">IT01</option> <option value="IT02">IT02</option> </select> <button type='submit' class='btn'>查询</button> } <hr /> <h3>资料:</h3> <div id='ajaxTargetHeaderDiv'></div> <div id='ajaxTargetBodyDiv'></div> </div> <script> function clickQuery(e) { var btn = $(e); if (btn.text() == '展开') { //先把所有按钮回复原状 var allbtns = $("#ajaxTargetHeaderDiv button") allbtns.text('展开'); allbtns.attr('type', 'submit'); console.log(allbtns); //处理个别按钮 btn.attr('type', 'submit'); btn.text('缩小'); } else { btn.text('展开'); btn.attr('type', 'button'); $("#ajaxTargetBodyDiv").html('') return; } } </script> <script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js'></script> <script src='https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js'></script> <script src='https://ajax.aspnetcdn.com/ajax/jquery.unobtrusive-ajax/3.2.5/jquery.unobtrusive-ajax.min.js'></script></body></html>Control
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Web.Mvc.Ajax;namespace AjaxBeginForm_ITMan.Controllers{ public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public ActionResult QueryHead(string Account) { var datas = AjaxBeginForm_ITMan.Models.Test.TestDatas .Where(w => w.Account.Contains(Account)).ToList(); if (datas.Count == 0) return Content("没有资料"); else return Content( string.Join("<br>", datas.Select(data => @" <form action='~/Home/Index' data-ajax='true' data-ajax-mode='replace' data-ajax-update='#ajaxTargetBodyDiv' data-ajax-url='"+Url.Action("QueryBody")+@"' id='form1' method='post'> 帐号 : "+data.Account+" , 名称 : "+data.Name+@" <input type='hidden' name='Account' value='"+data.Account+@"' /> <button type='submit' class='btn' onclick='clickQuery(this)'>展开</button> </form> ")) ); } public ActionResult QueryBody(string Account) { var data = AjaxBeginForm_ITMan.Models.Test.TestDatas .Where(w => w.Account == Account).SingleOrDefault(); if (data == null) return Content(@" <hr /> <h3>明细:</h3> 没有资料" ); else return Content(@" <hr /> <h3>明细:</h3> 喜好 : "+data.Favorite+" , 年纪 : "+data.Age+@" "); } }}
微信扫一扫打赏
支付宝扫一扫打赏
