MVC 页面表格,点击查看将一行的对象传入下一个页面

10 篇文章 0 订阅
6 篇文章 0 订阅

不使用强类型页面,在第一个页面上放表格,最后一列点击查看将本行对象传入。

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th title="任务名称">任务名称</th>
                    <th title="执行用户">执行用户</th>
                    <th title="起始时间">起始时间</th>
                    <th title="结束时间">结束时间</th>
                    <th title="任务描述">任务描述</th>
                    <th title="操作">操作</th>
                </tr>
            </thead>
            <tbody>
                {{each Lsts }}
                <tr>
                    <td title="{{$value.TaskName}}">{{$value.TaskName}}</td>
                    <td title="{{$value.UserName}}">{{$value.UserName}}</td>
                    <td title="{{$value.StartTime}}">{{$value.StartTime}}</td>
                    <td title="{{$value.EndTime}}">{{$value.EndTime}}</td>
                    <td title="{{$value.TaskDescription}}">{{$value.TaskDescription}}</td>
                    <td title="">
                        <a onclick="detailClick({{$value}})">查看</a>
                    </td>
                </tr>
                {{/each }}
            </tbody>
        </table>

detailClick方法,打开新页面,将此对象转为json字符串传入下一页面。:

function detailClick(trrObj) {
    var jsonStr = JSON.stringify(trrObj);
    window.open("/TaskManager/TaskDataRecord/DataRecord?TaskRunRecordData=" + jsonStr);
}

第二个页面的控制器中存入该json字符串。

        public ActionResult DataRecord()
        {
            if (!Request.Params.AllKeys.Contains("TaskRunRecordData"))
            {
                Response.Status = "404 TaskRunRecordData Lost!";
                return new EmptyResult();
            }
            string _taskRunRecordData = Request.Params["TaskRunRecordData"];

            if (!string.IsNullOrEmpty(_taskRunRecordData))
            {              
                    ViewBag.TrrDataJsonStr = _taskRunRecordData;
                    return View();
            }
            else
            {
                Response.Status = "404 TaskRunRecordData Error!";
                return new EmptyResult();
            }
        }

第二个页面前端将此json字符串保存为去掉html标记的对象:

    <script type="text/javascript">
        var trrDataObj = @Html.Raw(@ViewBag.TrrDataJsonStr);
    </script>

页面中拿到了此对象,js中对该对象数据进行相关处理。

    var trr = trrDataObj;
    $("#writeTaskName").html(trr.TaskName);
    $("#writeUserName").html(trr.UserName);
    $("#writeStartTime").html(trr.StartTime);

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Vue.js、MVC和Layui创建一个数据表格页面,你可以按照以下步骤进行操作: 1. 引入Vue.js和Layui的相关资源文件。在HTML文件中添加以下代码: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.js"></script> ``` 2. 创建一个包含数据表格的Vue实例。在JavaScript文件中添加以下代码: ```javascript new Vue({ el: '#app', data: { tableData: [] // 存放后端返回的数据 }, mounted() { // 发起Ajax请求获取后端数据,并将数据赋值给tableData this.getTableData(); }, methods: { getTableData() { // 使用Ajax请求获取后端数据,这里以示例直接赋值数据为例 this.tableData = [ { id: 1, name: 'John Doe', email: 'john@example.com' }, { id: 2, name: 'Jane Smith', email: 'jane@example.com' }, // 其他数据... ]; } } }); ``` 3. 在HTML文件中创建一个包含数据表格的容器,并使用Layui的表格组件展示数据。在HTML文件中添加以下代码: ```html <div id="app"> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>ID</th> <th>名称</th> <th>邮箱</th> </tr> </thead> <tbody> <tr v-for="item in tableData" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.email }}</td> </tr> </tbody> </table> </div> ``` 以上代码中,通过使用Vue的`v-for`指令将每条数据渲染为表格行。`v-for="item in tableData"`表示遍历`tableData`数组,将每个元素赋值给`item`,然后在表格中显示相应的属性值。 这样,你就可以通过Vue.js、MVC和Layui创建一个包含数据表格页面。你可以根据需要调整数据源、表格样式以及其他功能和交互的实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值