如何将视图中的 javascript 代码中的对象列表传递给控制器​​中的操作方法

Posted 2023-02-22

【中文标题】如何将视图中的 javascript 代码中的对象列表传递给控制器​​中的操作方法

【英文标题】：How to pass a list of objects from a java script code in a View to an action method in a controller

【发布时间】：2020-02-13 07:39:11

【问题描述】：

我在 javascript 编程方面没有太多经验。我想将“视图”中的 javascript 代码中的对象列表传递给 MVC“控制器”中的操作方法。 这是我想要实现的目标——

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
        
     

显示.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”列表传递给“StudentController”中的“OrderStudentList”操作方法，它将按升序/降序排列列表。但是当我运行代码时，我从来没有在“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”.

没有任何效果。如果有人提供帮助，我将不胜感激。 谢谢

【问题讨论】：

你试过用字符串引号包裹你的data 对象吗？ data: 'JSON.stringify( StudentList: studentL )',

如果我这样做，点击按钮后什么都不会发生。

【参考方案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.");
        
    );
 

并且您的 Action 方法需要具有以下签名：

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

【讨论】：

非常感谢John M先生。这解决了我的问题。

【参考方案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.");
            
        );
       

【讨论】：

我用列表和数组试过这个。在运行时， var studentArr = @Model.ToArray() 行变为： var studentArr = Student[];并抛出错误，“Javascript 严重错误，语法错误”