Friday, December 13, 2024

MVC5 Page embeded by partial view

 using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AdminMES.Controllers
{
    public class CellController : Controller
    {
        // GET: Cell
        [AllowAnonymous]
        public ActionResult Index()
        {
            ViewBag.SubPage = "Content";
            return View();
            //return PartialView("Content");
            //return RedirectToAction("Content", "Cell");
        }

        [AllowAnonymous]
        [HttpPost]
        public ActionResult Index(string subPage)
        {
            ViewBag.SubPage = subPage;
            return View();
        }

        [AllowAnonymous]
        [HttpPost]
        public ActionResult Index2(string subPage)
        {
            return PartialView(subPage);
            //return View(subPage);
            //return RedirectToAction("Index", "Cell", subPage);
        }

        // GET: Cell
        [AllowAnonymous]
        public ActionResult Report()
        {
            ViewBag.SubPage3 = "a";
            return View();
        }
        
        [AllowAnonymous]
        [HttpPost]
        public ActionResult Report2(string subPage)
        {
             return PartialView(subPage);
        }
    }
}

Index.cshtml:

@using AdminMES.Models
@model UserIndexViewModel
@{
    ViewBag.Title = "生产单元";
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <title>生产单元</title>

    @Scripts.Render("~/bundles/jquery/js")
    @Styles.Render("~/bundles/PagedList/css")
    @Styles.Render("~/bundles/datatables/css")
    @Scripts.Render("~/bundles/datatables/js")
    @Styles.Render("~/bundles/bootstrap/css")
    @Styles.Render("~/bundles/AdminLTE/css")
    @Styles.Render("~/bundles/AdminLTE/skins/css")
    @Styles.Render("~/bundles/fakeLoader/css")


    @Scripts.Render("~/bundles/fakeLoader/js")

</head>
<body class="hold-transition">
    <div id="a" class="ui-toolbar btn-toolbar container-fluid" role="toolbar">
        <div style="float:left;">
            <button onclick="updatePage('Content')" class="btn btn-flat" style="background-color:lightgreen;height:4em;text-align:left;"><img src="../Icon.png" style="height:3em;">&nbsp;&nbsp;&nbsp;&nbsp;主页</button>
            <button onclick="updatePage('b')" class="btn btn-flat" style="background-color:lightgreen;height:4em">多功能</button>
            <button src="#" onclick="updatePage('b')" class="btn btn-flat" style="background-color:lightgreen;text-align:left;height:4em"><span>用户:三体<br />三体用户&nbsp;&nbsp;&nbsp;&nbsp;12:00:00</span></button>
            <button src="#" onclick="location.href='@Url.Action("index","CellController")'" class="btn btn-flat" style="background-color:lightgreen;height:4em">工具</button>
            <button src="#" onclick="getNewPage('b');" class="btn btn-flat" style="background-color:lightgreen;height:4em">帮助</button>
        </div>
        <div style="float:right;">
            <div class="row">
                <div class="col-xs" style="background-color:lightgreen"><label>用户:三体</label><img src="#" />图片</div>
            </div>
            <div class="row">
                <div class="col-xs" style="background-color:lightgreen"><label>三体用户</label></div>
            </div>
        </div>
    </div>
    <div id="content" style="border:solid 1px black">
        @Html.Partial((string)ViewBag.SubPage)
    </div>
    <script type="text/javascript">
        function updatePage(subPage) {
            $.ajax({
                type: "POST",
                async: true,
                data: { subPage: subPage },
                url: "@UrlHelper.GenerateContentUrl("~/cell/Index2", Context)",
                success: function (data) {
                    $("#content").html(data);
                },
                error: function (data, status, e) {
                    alert("更新内容时发生错误。\n" + data.status);
                }
            });
        }
    </script>
</body>
</html>

Content.cshtml:

@using AdminMES.Models
@model UserIndexViewModel
@{
    ViewBag.Title = "生产单元";
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <title>生产单元</title>

    @Scripts.Render("~/bundles/jquery/js")
    @Styles.Render("~/bundles/PagedList/css")
    @Styles.Render("~/bundles/datatables/css")
    @Scripts.Render("~/bundles/datatables/js")
    @Styles.Render("~/bundles/bootstrap/css")
    @Styles.Render("~/bundles/AdminLTE/css")
    @Styles.Render("~/bundles/AdminLTE/skins/css")
    @Styles.Render("~/bundles/fakeLoader/css")


    @Scripts.Render("~/bundles/fakeLoader/js")

</head>
<body class="hold-transition">
    <div id="buttons" float="left">
        <button onclick="updatePage2('a')" class="btn btn-flat">班次</button>
        <button onclick="updatePage2('b')" class="btn btn-flat">班组</button>
        <button src="#" onclick="updatePage2('a')" class="btn btn-flat">排产</button>
        <button src="#" onclick="updatePage2('b')" class="btn btn-flat">维护和安全</button>
        <button src="#" onclick="updatePage2('a');" class="btn btn-flat">消息</button>
        <button src="#" onclick="updatePage2('b');" class="btn btn-flat">单元设备</button>
        <button src="#" onclick="updatePage2('a');" class="btn btn-flat">暂停</button>
        <button src="#" onclick="updatePage2('b');" class="btn btn-flat">事件</button>
    </div>
    <div id="report" style="border:solid 1px black">
        @if (ViewBag.SubPage2 == null)
        {
            ViewBag.SubPage2 = "Report";
        }
        @Html.Partial((string)ViewBag.SubPage2)
    </div>
    <script type="text/javascript">
        function updatePage2(subPage) {
            $.ajax({
                type: "POST",
                async: true,
                data: { subPage: subPage },
                url: "@UrlHelper.GenerateContentUrl("~/cell/Index2", Context)",
                success: function (data) {
                    $("#content").html(data);
                },
                error: function (data, status, e) {
                    alert("更新内容时发生错误。\n" + data.status);
                }
            });
        }
    </script>
</body>
</html>

Report.cshtml:

@using AdminMES.Models
@model UserIndexViewModel
@{
    ViewBag.Title = "生产单元";
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <title>报表</title>

    @Scripts.Render("~/bundles/jquery/js")
    @Styles.Render("~/bundles/PagedList/css")
    @Styles.Render("~/bundles/datatables/css")
    @Scripts.Render("~/bundles/datatables/js")
    @Styles.Render("~/bundles/bootstrap/css")
    @Styles.Render("~/bundles/AdminLTE/css")
    @Styles.Render("~/bundles/AdminLTE/skins/css")
    @Styles.Render("~/bundles/fakeLoader/css")
    @Scripts.Render("~/bundles/fakeLoader/js")

</head>
<body class="hold-transition">   
    <div id="reporttext" style="border:solid 1px black">
 
    </div>
    <div id="buttons">
        <button src="#" onclick="updatePage3('a');" class="btn btn-flat">Report 1</button>
        <button src="#" onclick="updatePage3('b');" class="btn btn-flat">Report 2</button>
    </div>
    <script type="text/javascript">
        function updatePage3(subPage) {
            $.ajax({
                type: "POST",
                async: true,
                data: { subPage: subPage },
                url: "@UrlHelper.GenerateContentUrl("~/cell/Report2", Context)",
                success: function (data) {
                    $("#reporttext").html(data);
                },
                error: function (data, status, e) {
                    alert("更新内容时发生错误。\n" + data.status);
                }
            });
        }
        updatePage3('a');
    </script>
</body>
</html>

a.cshtml:

这是视图A

b.cshtml:

这是视图B

No comments:

Post a Comment