MVC передача идентификаторов элементов и входных значений в действие контроллера - PullRequest
Новая
       7

MVC передача идентификаторов элементов и входных значений в действие контроллера

0 голосов
/ 19 апреля 2020

Я бы хотел передать пару вещей из MVC в действие контроллера. Чтобы упростить его, допустим, у меня есть таблица и два ввода - дата и текст: 

<table border="1">
   <tr>
    <th></th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
   </tr>
   <tr>
     <td>Row 1</td>
     <td id="12" class="text-right bg-red"></td>
     <td id="13" class="text-right bg-red"></td>
     <td id="14" class="text-right bg-gray"></td>
     <td id="15" class="text-right bg-red"></td>
     <td id="16" class="text-right bg-gray"></td>
    </tr>         
</table>
<br/>
<input type="text" id="text1" />
<br/>
<input type="date" id="date1" />
<br/>
<button>Send</button>

И мне нужно перейти к дате действия контроллера из ввода "date1", текста из ввода "text1" и каждой ячейки id, где класс содержит "bg-red" , Любое решение, как это сделать? Спасибо

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Вот рабочая демонстрация:

Просмотр (Index.cs html): 

<table border="1">
    <tr>
        <th></th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td id="12" class="text-right bg-red"></td>
        <td id="13" class="text-right bg-red"></td>
        <td id="14" class="text-right bg-gray"></td>
        <td id="15" class="text-right bg-red"></td>
        <td id="16" class="text-right bg-gray"></td>
    </tr>
</table>
<br />
<input type="text" id="text1" />
<br />
<input type="date" id="date1" />
<br />
<button onclick="Test()">Send</button>
@section Scripts
{
<script>
    function Test() {
        var text = $("#text1").val();
        var date = $("#date1").val();
        var list = [];
        $("td.text-right.bg-red").each(function () {
            var id = $(this).attr("id");
                list.push(id);
            }
        );
        console.log(list);
        var data = {
            text: text,
            date: date,
            list: list
        };
        console.log(data);
        $.ajax({
            type: "POST",
            url: "/Home/Test",
            data: data,
            success: function () {
                //do your stuff...
            }, 
            dataType: "application/json" 
        });
    }
</script>
}

Контроллер: 

public IActionResult Index()
{
    return View();
}
[HttpPost]
public IActionResult Test(string text,DateTime date,List<string> list)
{
    return Json(text);
}

Результат: enter image description here

0 голосов
/ 20 апреля 2020

Если вы собираетесь отправлять эти данные с помощью AJax на контроллер WebAPI на вашем MVC, вы можете попробовать это. 

$(function(){


var data = (function(){
  // This is just a self-executing function that returns an object
  return {
    text : document.getElementById("text1").value,
    date : document.getElementById("date1").value,
    Id_List : (function(){
      var id_list = [];
      document.querySelectorAll(".text-right").forEach(function(td){
        if(td.classList.contains("bg-red")){
          id_list.push(td.getAttribute("id"));
        }
      });
      return id_list;
    })()
  }

})();

//this is the object you going to pass as your data on Ajax
console.log(data);

// Send your Data to Controller
$.ajax({
  type: "POST",
  url: "Your Controller URL",
  data: data,
  success: ()=>{}, // Your success Callback function
  dataType: "application/json" // Data-type
});

//this is the object you can pass as your Ajax Data.
console.log(data);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
   <tr>
    <th></th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
   </tr>
   <tr>
     <td>Row 1</td>
     <td id="12" class="text-right bg-red"></td>
     <td id="13" class="text-right bg-red"></td>
     <td id="14" class="text-right bg-gray"></td>
     <td id="15" class="text-right bg-red"></td>
     <td id="16" class="text-right bg-gray"></td>
    </tr>         
</table>
<br/>
<input type="text" id="text1" />
<br/>
<input type="date" id="date1" />
<br/>
<button>Send</button>
...