Question

在我的View（asp.net）代码中，我只是显示了一堆复选框。只要单击其中一个，就会调用以下java脚本代码（我在另一个stackoverflow问题中找到）：

var RatingClicked = function (rate) {
    //some initial work goes here

    $.ajax({
        url: '@Url.Action("SetRate","Home")',
        data: { SelectedRate: rate},
        success: function (data) {
            //call is successfully completed and we got result in data

        },
        error: function (xhr, ajaxOptions, thrownError) {
            //some errror, some show err msg to user and log the error
            alert(xhr.responseText);

        }
    });
}

到目前为止一切顺利。代码按预期工作，我的SetRate操作方法被调用传递正确的数据（即速率，这是复选框的值）。问题是除了“rate”之外我需要传递一些其他数据，这是我视图的模型信息。但是，只要我将代码行更改为以下内容，javascript就会完全停止工作：

        data: { SelectedRate: rate, SomeOtherData:@Model.MyData},

我知道javascript运行在客户端vs razor的服务器端运行。但是解决方法是什么？如何调用我的SetRate操作方法传递正确的值？

编辑：这是我在视图中的所有内容（除了其他一些javascript函数）

@using Impoware.Models
@model HomeViewModel

<input type="checkbox" value="1" id="Rating1" onclick="RatingClicked(1)" onmouseover="MouseOverRating(1)" onmouseout="MouseOutRating(1)" />
<input type="checkbox" value="2" id="Rating2" onclick="RatingClicked(2)" onmouseover="MouseOverRating(2)" onmouseout="MouseOutRating(2)" />
<input type="checkbox" value="3" id="Rating3" onclick="RatingClicked(3)" onmouseover="MouseOverRating(3)" onmouseout="MouseOutRating(3)" />
<input type="checkbox" value="4" id="Rating4" onclick="RatingClicked(4)" onmouseover="MouseOverRating(4)" onmouseout="MouseOutRating(4)" />
<input type="checkbox" value="5" id="Rating5" onclick="RatingClicked(5)" onmouseover="MouseOverRating(5)" onmouseout="MouseOutRating(5)" />

编辑2：我改变了Shyju在下面建议的代码，它适用于主要数据类型（int，bool等）但是，当我尝试传入我的整个数据模型时，我收到以下错误：< / p>

Newtonsoft.Json.dll中发生了'Newtonsoft.Json.JsonSerializationException'类型的异常，但未在用户代码中处理

附加信息：使用类型'System.Data.Entity.DynamicProxies.UserParticipation_D381F3E084EC9A0B56FA60725061B956AEF865280516092D8BDE683C9A32725B'检测到自引用循环。路径'userParticipation.AspNetUser.UserParticipations'。

UserParticipation是一个具有连接到AspNetUser的外键的类（多对1关系）。该模型是使用EntityFramework创建的。为什么会有回到UserParticipation的循环？哦，最后，我传回整个模型数据，以便再次保存一些到数据库的行程，重新检索相同数据，返回同一个视图（如果有意义的话）。

Answer 1

您可以使用JsonConvert.SerializeObject方法获取C＃Model / Model属性的序列化字符串版本。

这应该有用。

var myData = { SelectedRate: rate, 
     SomeOtherData: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.MyData)) };
console.log(myData);

 //Use myData variable for the ajax call now.

此外，由于它是一个复杂的js对象，你应该对这个js对象进行字符串化并在你的ajax调用中发送它。确保明确指定"application/json"为contentType，以便模型绑定不会失败。你也可以考虑做一个HttpPost ajax调用，因为GET使用查询字符串来发送数据，而querystring对你可以发送多少数据有限制（在浏览器中有所不同）

$.ajax({
        url: '@Url.Action("SetRate","Home")',
        type:'POST',
        data: JSON.stringify(myData),
        contentType : "application/json",        
        success: function (data) {
            //call is successfully completed and we got result in data

        },
        error: function (xhr, ajaxOptions, thrownError) {
            //some errror, some show err msg to user and log the error
            alert(xhr.responseText);

        }
});

虽然这回答了您的问题，但您应该仔细检查为什么要将整个数据发回来？可以发送一个唯一的Id，您的服务器方法可以根据需要重建模型/特定数据

Answer 2

你想要一些像这样更有活力的东西吗？

<% foreach( var item in Model.Items )     { %>

<input type="checkbox" value="@item.value" onclick="RatingClicked(@item.value,@item.value2)   /> 

<% } %>



var RatingClicked = function (rate,otherValue) {
......

如何在javascript代码中使用模型数据？

2 个答案: