[ASP.NET][MVC]Multiple Models(三)Partial View、AJAX

2016-11-19

11472
0
MVC Model
2016-11-20

前兩篇使用了ASP.NET MVC 內常用的資料容器，這一篇改變方向，不變動後端太多，改從前端這邊下手，(1)組合Partial View (2)使用Jquery AJAX分次呼叫組合。

三部曲之The End:

Partial View

1.首先在F1Controller.cs新增一個Action PartialViewIndex

public ActionResult PartialViewIndex()
{
    return View();
}

2.繼續在F1Controller.cs中新增兩個PartialView Action(RenderTeam及RenderDriver)

public PartialViewResult RenderTeam()
{
    return PartialView(repository.GetTeams());
}

public PartialViewResult RenderDriver()
{
    return PartialView(repository.GetDrivers());
}

3.新增兩個Partial View檢視及一個PartialViewIndex檢視(使用Html.RenderAction分別取得前兩個View內容)

RenderTeam.cshtml

@using MultiModel.Models;
@model IEnumerable<F1Team>
<h3>車隊</h3>
<table id="Teamlist" class="table table-hover">
    <thead>
        <tr>
            <td>車隊名稱</td>
            <td>年度世界冠軍次數</td>
            <td>國籍</td>
        </tr>
    </thead>
    <tbody>
        @foreach (F1Team items in Model)
            {
            <tr>
                <td>@items.Name</td>
                <td>@items.ChampionshipTitles</td>
                <td>@items.Country</td>
            </tr>
        }
    </tbody>
</table>

RenderDriver.cshtml

@using MultiModel.Models;
@model IEnumerable<F1Driver>


<h3>車手</h3>
<table id="Teamlist" class="table table-hover">
    <thead>
        <tr>
            <td>車手姓名</td>
            <td>車隊</td>
            <td>國籍</td>
            <td>年度世界冠軍次數</td>
        </tr>
    </thead>
    <tbody>
        @foreach (F1Driver items in Model)
            {
            <tr>
                <td>@items.Name</td>
                <td>@items.Team</td>
                <td>@items.Country</td>
                <td>@items.WDCs</td>
            </tr>
        }
    </tbody>
</table>

PartialViewIndex.cshtml

<h2>Partial View</h2>
<div>
    @{
        Html.RenderAction("RenderTeam");
        Html.RenderAction("RenderDriver");
    }
</div>

測試結果:傳遞成功!

AJAX

1.首先在F1Controller.cs新增一個Action AjaxIndex

public ActionResult AjaxIndex()
{
    return View();
}

2.繼續在F1Controller.cs程式中準備兩個Json result回傳(給前端call)

public JsonResult AjaxGetTeams()
{
    return Json(repository.GetTeams(), JsonRequestBehavior.AllowGet);
}

public JsonResult AjaxGetDrivers()
{
    return Json(repository.GetDrivers(), JsonRequestBehavior.AllowGet);
}

3.新增一個檢視ajaxIndex.cshtml

程式碼利用jquery ajax call Controller取得剛剛兩個json result(teams + drivers)，然後迴圈把資料組成tbody輸出。


@using MultiModel.Models;
@model dynamic
<html>
<head>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            getTeams();
            getDrives();
        });

        function getTeams() {
            $.ajax({
                type: 'POST',
                url: '/F1/AjaxGetTeams',
                success: function (data) {
                    for (var j = 0; j < data.length; j++) {
                        $("#tbTeams").append("<tr>"
                                + "<td>" + data[j].Name + "</td>"
                                + "<td>" + data[j].ChampionshipTitles + "</td>"
                                + "<td>" + data[j].Country + "</td>"
                                + "</tr>");
                    }
                }
            })
        };

        function getDrives() {
            $.ajax({
                type: 'POST',
                url: '/F1/AjaxGetDrivers',
                success: function (data) {
                    for (var j = 0; j < data.length; j++) {
                        $("#tbDrivers").append("<tr>"
                                + "<td>" + data[j].Name + "</td>"
                                + "<td>" + data[j].Team + "</td>"
                                + "<td>" + data[j].Country + "</td>"
                                + "<td>" + data[j].WDCs + "</td>"
                                + "</tr>");
                    }
                }
            })
        };
    </script>
</head>
<body>
    <h2>Ajax post(json)</h2>
    <h3>車隊</h3>
    <input type="hidden" id="hTeams" value="" />
    <table id="Teamlist" class="table table-hover">
        <thead>
            <tr>
                <td>車隊名稱</td>
                <td>年度世界冠軍次數</td>
                <td>國籍</td>
            </tr>
        </thead>
        <tbody id="tbTeams">
        </tbody>
    </table>
    <h3>車手</h3>
    <table id="Driverlist" class="table table-hover">
        <thead>
            <tr>
                <td>車手姓名</td>
                <td>車隊</td>
                <td>國籍</td>
                <td>年度世界冠軍次數</td>
            </tr>
        </thead>
        <tbody id="tbDrivers">
        </tbody>
    </table>

</body>
</html>

測試結果:傳遞成功!