Как передать список объектов из кода java-скрипта в View в метод действия в контроллере

Question

У меня нет большого опыта в программировании на JavaScript. Я хочу передать список объектов из кода JavaScript в «View» в метод действия в MVC «Controller». Вот что я пытаюсь достичь -

Модель и контроллер MVC:

 Public Class Student
    {
        Public int Id {get; set;}
        Public string Name {get; set;}
        Public string Address {get; set;}
    }

    Public class StudentController : Controller
     {
        Public ActionResult Index()
        {
            // Read the data from database, create a list of “Student”
            return View(“Display”, StudentList);
        }

        [HttpPost]
        Public ActionResult OrderStudentList(List<Student> StudentList)
        {
            // Code to ascend/descend list
        }
     }

Display.cshtml

    @model IEnumerable<Student>
    // Code that displays student list
    <button onclick="myFunction()">Student Name</button>
    <script>
        function myFunction()
            {
                var studentL = @Model.ToList();
                $.ajax({
                url: "@Url.Action("OrderStudentList ", "Student")",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ StudentList: studentL }),
                success: function (response) {
                response ? alert("It worked!") : alert("It didn't work.");
                }
            });    
    </script>

Как видите, я прохожусписок «Студент» для представления под названием «Дисплей». В этом представлении есть кнопка «Имя студента». Когда эта кнопка нажата, я хочу передать список «Student» методу действия «OrderStudentList» в «StudentController», который упорядочит список в порядке возрастания / убывания. Но когда я запускаю код, я никогда не получаю никакого значения для списка в методе «OrderStudentList».

Вот то, что я пытался до сих пор для назначения значения данных в приведенном выше коде

    data:’@Html.Raw(Model.ToList())’

    data: @Html.Raw(Json.Encode(Model.ToList()));

 Converted a list to an array and tried to copy each element of a list 
   individually to an element of javascript array as follows

        var arrayJs = [];
        for(var i=0; i<= @Model.Count(); i++)
        {
            arrayJs.push(@Model.ElementAt(i));
        }

   But it gives the syntax error with the “i does not exist in 
   the current context”.
 Created a ViewModel with Student list as a property

        Class StudentList
        {
            Public List<Student> StudentList {get; set;}
        }

   Tried passing an instance of a viewModel as a JSON object to action  
   method “OrderStudentList”.

Ничего не помогло. Я буду очень признателен, если кто-нибудь поможет. Спасибо

Answer 1

Я не совсем уверен, что вы ожидали от этой строки:

var studentL = @Model.ToList();

но в любом случае вам нужно сразу преобразовать вашу модель в JSON, ваша функция Javascript должна выглядеть примерно так:

function myFunction() {
    $.ajax({
        url: "@Url.Action("OrderStudentList", "Student")",
        type: "POST",
        contentType: "application/json",
        data: '@Html.Raw(JsonConvert.SerializeObject(Model.ToList()))',
        success: function (response) {
            response ? alert("It worked!") : alert("It didn't work.");
        }
    });
} 

и ваш метод действия должен иметь следующую подпись:

    [HttpPost]
    Public ActionResult OrderStudentList(List<Student> model)
    {
        // Code to ascend/descend list
    }

Answer 2

<button onclick="myFunction()">Student Name</button>

// Это jquery, который вы должны включить, чтобы использовать $ синтаксис. // он доступен в каталоге вашего проекта, вы только что проверили и обновили эту строку ниже.

 <script type="text/javascript">   
    function myFunction() {
        var studentL =  @Html.Raw(Json.Encode(Model));

        $.ajax({
            url: "@Url.Action("OrderStudentList", "Student")",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({ StudentList: studentL }),
            success: function (response) {
                response ? alert("It worked!") : alert("It didn't work.");
            }
        });
    }