Populate a Datebase with the selected ''value='' through a Script in ASP.NET Core 3.1/5.0 MVC

Question

In my View cshtml file I have a code similar to this:

....
<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>
....

Basically an N amount of selects, with N possible choices.

What I want to achieve is that when I press a button in the View, after choosing N options, an amount of N tables is inserted into the Database, and I want to do this through a Script, something of this kind at the end of the Code in the cshtml file:

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

How can I make a Script that collects all the Values chosen in the selects, and call this via a button correctly? And what code should I implement in the view's Controller so it receives this data and enters it into the Database using a '_context'?

What happens is that I created a Model containing the variables "Option" and "Date", in my View I generate an interface that allows choosing one of those "Option" for a specific date (each date is a Select), 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.

I hope I have explained it well and I apologize in advance if it wasn't like that. I am new into programming on ASP dot NET and I am having problems understanding how the View Code really communicates with the Controllers, since I am programming my application using Visual Studio 2019, and much of the code is very...automated so to speak, and that confuses me.

The real code of my application is too big and it is private because is for Company that is why I didn't put it, so I felt that presenting my question in this way would be better.

EDIT: Consider that the Model's code is something similar to this.

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; }
    }

my main question is which <script></script> code, can help me. — Diego Errázuriz
– Diego Errázuriz, Commented Dec 9, 2020 at 4:52
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. I am a bit confused with the database requirement.What is your model design?Do you want to select a date together with selecting multiple options?Then pass them to the backend and save them to database? — Rena
– Rena, Commented Dec 9, 2020 at 8:21
My model is something like this: ``` 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; } } ``` OptionDate is defined in AppApppDbContext (connection with the database). So I want to insert multiple tables ''OptionDate'', with what is chosen in the multiple selects. — Diego Errázuriz
– Diego Errázuriz, Commented Dec 9, 2020 at 11:49
@DiegoErrázuriz You can submit form to controller using jQuery and then save it in database using usual C#, regarding sending data to controller using jQuery check stackoverflow.com/a/51621352/3559462 — Vikas Lalwani
– Vikas Lalwani, Commented Dec 9, 2020 at 11:59

Rena · Accepted Answer · 2020-12-10 07:41:02Z

0

What I want to achieve is that when I press a button in the View, after choosing N options

For this requirement,no need to use jquery,just using default form submit like below:

<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>

Controller:

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

    return View("Privacy");
}

Result:

Update:

For how to use jquery to pass selected value list to backend,you could follow:

 <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>

edited Dec 10, 2020 at 7:41

answered Dec 9, 2020 at 8:24

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Diego Errázuriz Over a year ago

Thanks for your answer! However I don't want to solve this by using a <form asp-action = "Create">, because if I use it, it ruins my entire application. Ok what happens is that my code generates an interface with For cycles in the view, and the selects are divided into a grid that forms something similar to a calendar, imagine a grid of selects. What I want to do is take the data for each select and enter it. So let's say N options are chosen in the selects, well that should insert N tables when I press the button.

Rena Over a year ago

Please check my updated code about how to pass select list value by using jquery.And for insert to database requirement,not sure what is your real view like,you said you have date and option in model,but do not see any date in your view.Did your razor view contains many date selectlists and each date selectlist have several option selectlists or have one option selectlist?From your model design,it seems one date selected value matches one option selected value.

Collectives™ on Stack Overflow

Populate a Datebase with the selected ''value='' through a Script in ASP.NET Core 3.1/5.0 MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related