asp.net core web应用前后台传参

于 2023-07-05 11:50:17 发布
阅读量257 收藏
点赞数
文章标签： javascript asp.net c# bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294859/article/details/131552351
版权

方式一：通过viewmodel绑值传递

modelview中：

using Microsoft.AspNetCore.Mvc.Rendering;

namespace WebApplication1.Models
{
    public class AlarmViewModel
    {
        public List<Alarm>? alarms { get; set; }
        public List<User>? users { get; set; }
        public SelectList? areaList { get; set; }
        public string? areaName { get; set; }
        public string? tagName { get; set; }
        public string? startTime { get; set; }
        public string? endTime { get; set; }

    }
}

html中：

@model WebApplication1.Models.AlarmViewModel
@{
    ViewData["Title"] = "Index";

}
<form asp-controller="Alarm" asp-action="Index">
    <div class="row">
        <div class='col-sm-12'>
            <div class='col-sm-2'>
                <label>开始时间：</label>
            </div>
            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepickerStart'>
                        <input type='text' class="form-control" name="startTime" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class='col-sm-2'>
                <label>结束时间：</label>
            </div>
            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepickerEnd'>
                        <input type='text' class="form-control" name="endTime" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class='col-sm-2'>
                <input type="submit" value="查询" />
            </div>
        </div>
    </div>
</form>
<table class="table table-striped">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.alarms![0].id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.alarms![0].fd_tagname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.alarms![0].fd_tagdesp)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.alarms![0].fd_firstalarmarea)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.alarms![0].fd_occurtime)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.alarms!)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_tagname)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_tagdesp)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_firstalarmarea)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_occurtime)
                </td>
            </tr>
        }
    </tbody>
</table>

controller中：


        [HttpPost]
        public string Index(string startTime, string endTime, string areaName, string tagName)
        {
            return "开始时间为：" + startTime + "结束时间为：" + endTime + "区域名称为：" + areaName + "变量名称为：" + tagName;
        }

方式二：通过BindProperty属性绑值

html中：

@model IEnumerable<WebApplication1.Models.Alarm>
@{
    ViewData["Title"] = "Index";

}
<form asp-controller="Alarm" asp-action="Index">
    <div class="row">
        <div class='col-sm-12'>
            <div class='col-sm-2'>
                <label>开始时间：</label>
            </div>
            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepickerStart'>
                        <input type='text' class="form-control" name="startTime" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class='col-sm-2'>
                <label>结束时间：</label>
            </div>
            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepickerEnd'>
                        <input type='text' class="form-control" name="endTime" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class='col-sm-2'>
                <input type="submit" value="查询" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class='col-sm-12'>
            <div class='col-sm-2'>
                <label>变量名称：</label>
            </div>
            <div class='col-sm-3'>
                <div class="form-group">
                    <input type='text' class="form-control" id="tagName" name="tagName" />
                </div>
            </div>
            <div class='col-sm-2'>
                <label>报警区域：</label>
            </div>
            <div class='col-sm-3'>
                <select class="form-control selectpicker" aria-label="Default select example" id="areaName" name="areaName"> 
                </select>
            </div>
        </div>
    </div>
</form>
<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table table-striped">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.fd_tagname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.fd_tagdesp)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.fd_firstalarmarea)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.fd_occurtime)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_tagname)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_tagdesp)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_firstalarmarea)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.fd_occurtime)
                </td>
            </tr>
        }
    </tbody>
</table>

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
    $('#datetimepickerStart').datetimepicker({
        format: 'YYYY-MM-DD hh:mm:ss',
        locale: moment.locale('zh-cn'),
    });
    $('#datetimepickerEnd').datetimepicker({
        format: 'YYYY-MM-DD hh:mm:ss',
        locale: moment.locale('zh-cn'),
    });

    loadAreaData();    //执行此函数，从后台获取数据，拼接成option标签，添加到select的里面

    function loadAreaData() {
        $.ajax({
            url: "/alarm/GetAreaList",
            type: 'GET',
            async: false,
            datatype: 'json',
            success: function(data) {
                if (data) {
                    var areanames = [];
                    for (var i = 0; i < data.datas.length; i++) {
                        //拼接成多个<option><option/>
                        areanames.push('<option value="' + data.datas[i].area + '">' + data.datas[i].area + '</option>')
                    }
                    $("#areaName").html(areanames.join(' '));
                }
            },
            error: function() {
                alert('报警区域查询错误');
            }
        });
    }
</script>

controller中：

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using WebApplication1.Data;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AlarmController : Controller
    {
        private readonly AlarmContext _context;
        private readonly UserContext _context_user;
        [BindProperty(SupportsGet = true)]
        public string? startTime { get; set; }
        [BindProperty(SupportsGet = true)]
        public string? endTime { get; set; }
        [BindProperty(SupportsGet = true)]
        public string? areaName { get; set; }
        [BindProperty(SupportsGet = true)]
        public string? tagName { get; set; }

        public AlarmController(AlarmContext context, UserContext context_user)
        {
            _context = context;
            _context_user = context_user;
        }


        public async Task<IActionResult> Index()
        {
            return View(await _context.alarms.ToListAsync());
        }

        /// <summary>
        /// 条件查询报警区域信息
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public string Index(string startTime, string endTime, string areaName, string tagName)
        {
            return "开始时间为：" + startTime + "结束时间为：" + endTime + "区域名称为：" + areaName + "变量名称为：" + tagName;
        }

        /// <summary>
        /// 获取报警区域信息
        /// </summary>
        /// <returns></returns>
        public IActionResult GetAreaList()
        {
            List<User> users = _context_user.users.OrderBy(m => m.area).ToList();
            return Json(new
            {
                datas = users.Select(s => new
                {
                    s.area
                }).Distinct()
            });
        }

    }
}

weixin_43294859
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从零开始的asp.net（三）MVC前后端传递数据
qq_45313933的博客
03-01 1086
MVC
Asp.net core前后台交互
pfxfly的博客
12-15 1369
当前台传参为Requset Payload时： 后台需要在参数列表中加[FromBody] [Route("/create"))] public string Create([FromBody] Model model) { } 或者用流来进行接收 using (var bufferStream = new MemoryStream()) { Request.Body.Co...
ASP.NET Core Web App 基于Layui的前后端实现1
wojiuxiangqigem的博客
02-07 3548
在VS2022中使用ASP.NET CORE APP(MVC)搭建一个拥有图表分析的学生页面，包含layui，后端以及sqlite部分。
两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
weixin_30607659的博客
09-30 1873
一个HTML页面只能显示HTML代码信息，不能与数据库进行数据的交互。asp.net方案提供了网页与数据库交互的方法，这里举出两种：①aspx文件 ②ashx文件+ajax技术 一、创建数据库 　　这里以SQL Server数据库为例，打开SSMS，创建一个数据库，注意数据库的保存路径，后面要将数据库复制到Visual Studio的工程项目中。 　　 　　打开Visual Stud...
ASP.NET的后台代码和前台JS代码相互调用
安大在线
03-06 478
在实际的Web开发中，我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。 后台代码调用前台JS代码 一、说到后台代码调用前台的JS代码很多人首先就会想到使用 ClientScript.RegisterStartupScript()方法，该方法主要是注册启动脚本文本，即在后台执行调用前台JS代码 该方法有
asp.net 前后台页面交互数据的四种方案，非ajax
乐逍遥wd的博客
02-16 8088
asp.net 前后台页面交互数据的四种方案 ，第五种方案通过aspx.cs中的静态方法+WebMethod进行处理已经介绍http://blog.csdn.net/qq_18551329/article/details/50673164 1. 前台直接输出后台传递的数据 后台代码：  public string value = "1"; 前台页面代码：    
asp.net 前后台数据交互方式
hbqjzx的专栏
12-03 1714
web前后台数据交互的几种方式_luckyrass的博客-CSDN博客一、前台直接输出后台传递的数据 后台代码： 前台代码： 也可以直接在js里获取 二、 前台传参,后台获取参数并返回值,前台可直接调用方法必须是静态方法 后台代码： 前台代码： 三、新建一个类,前台传参 类中方法获取参数并返回值，前台可直接调用方法必须是静态方法 后台代码： 前台代码： 四、ajax 和 WebMethod 传参 后台代码 ： 前台代码： 1.利用cookie对象 Cookie是服务器保存
.NET CORE 前端后台数据传递
菜鸟小灰灰的博客
03-30 1万+
.net core的数据提交有很多种方式。 (1)可以用form,Ajax提交到后台，Ajax还可以将数据返回前台。 例如 return Json(new { success = false, message = CommonConstant.S_SPACE }); Ajax传递数据时model与json的转换：JsonConvert.SerializeObject转json, JsonCo
Asp.net core mvc框架(.Net5) 页面传值的几种方式
ftfmatlab的博客
04-09 2063
前5种方式的页面获取值 对于方式四，需要在Startup类中注入Session，在ConfigureServices方法中添加services.AddSession()，在Configure方法中添加app.UseSession()，不然会报以下错误（System.InvalidOperationException:“Session has not been configured for this application or request.”） 添加完后的截图如下所示： ...
asp.net web程序实现在跳转页面时候，进行页面间传值
2301_76661653的博客
02-28 606
asp.net web程序实现在跳转页面时候，进行页面间传值
ASP.NET与Echarts实现前后端数据的交互
04-01
在帮公司做一个小项目用到的就分享一下，这个使用ASP.NET与Echart使用的，通过在后台获取sql的数据，然后转换成Json,运用前端的Ajax读取json文档。
ASPNETCore21教程前后端分离的后端接口vue教程的姊妹篇
08-15
ASP.NET Core 2.1 教程,，前后端分离的后端接口，vue教程的姊妹篇
Asp.Net Core Web应用程序入门源码
12-11
Asp.Net Core Web应用程序入门源码
Asp.Net Core Web应用程序入门.docx
12-11
Asp.Net Core Web应用程序入门
Asp.Net Core Web应用程序—探索
10-17
主要介绍了Asp.Net Core Web应用程序—探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【ASP.Net Core Web应用程序】 创建数据库
12-24
【ASP.Net Core Web应用程序】 创建数据库
基于ASP.NET Core的C# Web应用程序设计源码
最新发布
04-08
ASP.NET Core Web应用程序：基于C#开发，包含1467个文件，包括1330个WebP图像文件、52个JPG图像文件、20个C#类文件、15个C#HTML文件、15个PNG图像文件、10个CSS样式文件、9个JSON配置文件、8个JavaScript文件和4个....
asp.net MVC前台View页面向后台Controller控制器传递数据的几种方式
热门推荐
ydm东方旭日的专栏
03-17 2万+
上一篇文章讲解了后台控制器如何向前台页面传递数据，今天就接着为大家讲解前台View页面向后台Controller控制器传递数据的几种方式。在此声明，这几种方式是我在实际使用过程中遇到并总结的，如果那个地方说的不对或有不足之处，欢迎各位指出并给出建设性意见、共同学习。 1、异步方式 在实际项目开发中，我们经常需要异步获取一些信息，如用户是否登陆、用户状态、用户类型等内容。我们不可能再通过按钮之类
Websocket实现前后端通讯。asp.net core
easyboot的专栏
02-08 1287
1.visual studio 2019创建一个asp.net core 3.0 的项目。在nuget中添加Fleck 2.html端代码 @{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.mi...
asp.net core web应用与asp.net web应用一样吗？
05-13
ASP.NET Core Web 应用和 ASP.NET Web 应用有一些相似之处，但也有一些重要的区别。 相似之处： 1. ASP.NET Core Web 应用和 ASP.NET Web 应用都是用于创建 Web 应用程序的框架。 2. 它们都支持多种语言，包括 C#、VB.NET 和 F#。 3. 它们都可以使用 Visual Studio 进行开发。 区别： 1. ASP.NET Core Web 应用是跨平台的，可以在 Windows、Linux 和 macOS 上运行，而 ASP.NET Web 应用只能在 Windows 上运行。 2. ASP.NET Core Web 应用使用 .NET Core 运行时，而 ASP.NET Web 应用使用 .NET Framework 运行时。 3. ASP.NET Core Web 应用提供了更轻量级的框架，可以更快地启动和运行，而 ASP.NET Web 应用则更加重型。 4. ASP.NET Core Web 应用使用了新的中间件架构，可以更加灵活地配置和定制请求管道处理流程。 总之，ASP.NET Core Web 应用和 ASP.NET Web 应用都是用于创建 Web 应用程序的框架，它们有一些相似之处，但也有一些重要的区别。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值