【ASP.NET MVC】簡單做個Ajax雙層資料表身跟明細展開、縮小。

asp.net aps.net mvc

暐翰 2018-07-04 14:23:41 ‧ 4606 瀏覽

分享至

今天在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+@"
                ");
        }
    }
}