通过 ASP.NET Core 3.1/5.0 MVC 中的脚本使用选定的 ''value='' 填充数据库

Posted 2023-04-13

【中文标题】通过 ASP.NET Core 3.1/5.0 MVC 中的脚本使用选定的 \'\'value=\'\' 填充数据库

【英文标题】：Populate a Datebase with the selected ''value='' through a Script in ASP.NET Core 3.1/5.0 MVC通过 ASP.NET Core 3.1/5.0 MVC 中的脚本使用选定的 ''value='' 填充数据库

【发布时间】：2021-03-20 10:17:13

【问题描述】：

在我的 View cshtml 文件中，我有一个类似这样的代码：

....
<div class="select">
<select name="slct" id="slct">
<option selected disabled>Select 1</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 4</option>
....
 </select>
 </div>
....
<div class="select">
<select name="slct" id="slct">
<option selected disabled>Select N</option>
<option value=100>Option 100</option>
<option value=101>Option 101</option>
<option value=102>Option 102</option>
....
 </select>
 </div>
....

基本上有 N 个选择，有 N 个可能的选择。

我想要实现的是，当我在视图中按下一个按钮时，在选择 N 个选项后，将 N 个表的数量插入到数据库中，我想通过一个脚本来做到这一点，这种东西在cshtml文件中Code的结尾：

<script src="~/assets/js/jquery.min.js"></script>
<script>
    $("something").on('something2', function (e) 
        var.........blablablah
    );
</script>

如何制作一个脚本来收集选择中选择的所有值，并通过按钮正确调用它？我应该在视图的控制器中实现什么代码，以便它接收这些数据并使用“_context”将其输入数据库？

发生的情况是，我创建了一个包含变量“选项”和“日期”的模型，在我的视图中，我生成了一个界面，允许为特定日期选择其中一个“选项”（每个日期都是一个选择），我想要的是，当我按下按钮时，它会插入到模型的数据库 X 表中，并带有我为相应日期选择的“选项”。

我希望我已经解释清楚，如果不是这样，我提前道歉。我是 ASP dot NET 编程的新手，我在理解视图代码如何真正与控制器通信时遇到问题，因为我正在使用 Visual Studio 2019 对我的应用程序进行编程，而且大部分代码都非常......可以说是自动化的，这让我很困惑。

我的应用程序的真实代码太大而且它是私有的，因为是为了公司所以我没有放它，所以我觉得以这种方式提出我的问题会更好。

编辑： 考虑模型的代码与此类似。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Appp.Models

    public class OptionDates
    
        [Key]
        public int Id  get; set; 
        [Required]
        public string Option  get; set; 
        public DateTime Date  get; set; 
    

【问题讨论】：

看起来像一个数据库问题。

我的主要问题是哪个 代码可以帮助我。

and what I want is that when I press the button, this insert into the database X tables of the Model, with the "Option" that I chose for the corresponding Date. 我对数据库要求有点困惑。您的模型设计是什么？您要选择一个日期并选择多个选项吗？然后将它们传递到后端并保存到数据库？

我的模型是这样的：``` using System;使用 System.Collections.Generic；使用 System.ComponentModel.DataAnnotations；使用 System.Linq；使用 System.Threading.Tasks；命名空间 Appp.Models public class OptionDates [Key] public int Id get;放; [必需] 公共字符串选项 get;放; 公共日期时间日期 获取；放; ``` OptionDate 在 AppApppDbContext 中定义（与数据库的连接）。所以我想插入多个表''OptionDate''，在多个选择中选择什么。

@DiegoErrázuriz 您可以使用 jQuery 将表单提交给控制器，然后使用通常的 C# 将其保存在数据库中，关于使用 jQuery 向控制器发送数据检查 ***.com/a/51621352/3559462

【参考方案1】：

我想要实现的是，当我在视图中按下一个按钮时，在选择了 N 个选项后

对于这个要求，不需要使用jquery，只需使用默认表单提交如下：

<form asp-action="Create">
    <div class="select">
        <select name="slct" id="slct">
            <option selected disabled>Select 1</option>
            <option value=1>Option 1</option>
            <option value=2>Option 2</option>
            <option value=3>Option 3</option>
        </select>
    </div>
    <div class="select">
        <select name="slct" id="slct">
            <option selected disabled>Select 2</option>
            <option value=4>Option 4</option>
            <option value=5>Option 5</option>
            <option value=6>Option 6</option>
        </select>
    </div>
    <div class="select">
        <select name="slct" id="slct">
            <option selected disabled>Select 3</option>
            <option value=7>Option 7</option>
            <option value=8>Option 8</option>
            <option value=9>Option 9</option>
        </select>
    </div>
    <input type="submit" value="post" />
</form>

控制器：

[HttpPost]
public IActionResult Create(List<int> slct)   


    return View("Privacy");

结果：

更新：

关于如何使用 jquery 将选定的值列表传递给后端，您可以关注：

 <script>
    $("input[type=button]").click(function () 
        var data = [];
        var elems = document.querySelectorAll('#slct');
        elems.forEach(function (el) 
            data.push(el.options[el.selectedIndex].value)
        )
        $.ajax(
            url: "/Home/Create",
            type: "Post",
            data:  slct: data 
        )
    );
    
</script>

【讨论】：

感谢您的回答！但是我不想通过使用

请检查我的更新代码，了解如何使用 jquery 传递选择列表值。对于插入数据库的要求，不确定您的真实视图是什么样的，您说您在模型中有日期和选项，但在您的视图中看不到任何日期。您的剃刀视图是否包含许多日期选择列表，并且每个日期选择列表有多个选项选择列表或有一个选项选择列表？从您的模型设计来看，似乎一个日期选择值与一个选项选择值匹配。