【问题标题】:Passing an object from cshtml view to JQuery [duplicate]将对象从cshtml视图传递到JQuery [重复]
【发布时间】:2017-03-09 15:46:03
【问题描述】:

我正在尝试将对象从 cshtml 视图传递给 JQuery,cshtml 代码:

 foreach (var item in Model)
            {               
                    <tr class="link" data-graduate="@item" data-url="@Url.Action("PopulateModal","CMIPGraduate")">
                        <td>@Html.DisplayFor(display => item.State)</td>
                        <td>@Html.DisplayFor(display => item.Name)</td>                           
                    </tr>               
            }

JQuery 代码:

$(document).ready(function () {    
    $(".link").click(function () {
        alert($(".link").data("graduate"))
        $.ajax({
            type: "get",
            url: $(".link").data("url"),               
            data:{graduate:$(".link").data("graduate")}
        })
        $("#myModal").modal("show");
    })
})

对象到达控制器时始终为空,我试图在我的JQuery 代码中使用alert 显示它,但我得到的只是这样的:MyProject.Viewmodels.MyClassVM,我一直在尝试使用alert(JSON.stringify($(".link").data("graduate"))),但我得到了相同的结果。我知道在我的 cshtml 视图中我可以做这样的事情:

 <tr class="link" data-graduate="@item.Name" data-url="@Url.Action("PopulateModal","CMIPGraduate")">

我会在JQuery 函数中轻松获得名称,但我不想在我的cshtml 视图中按字段创建data- 属性,如果我有500 个字段怎么办?我更愿意获取整个对象并将其发送到我的控制器操作。 以防万一这是我的控制器操作:

  public ActionResult PopulateModal(MyClassVM graduate)
        {
            return PartialView(graduate);
        }

【问题讨论】:

    标签: javascript jquery asp.net-mvc razor


    【解决方案1】:

    嗯,这很有帮助:ASP.NET MVC: How to convert View Model into Json object 但真正的诀窍是在我看来修改这段代码(添加@Json.Encode(item)):

          <tr class="link" data-graduate="@Json.Encode(item)" data-url="@Url.Action("PopulateModal","CMIPGraduate")">
    

    【讨论】:

    • 正确的应该是@Html.Raw(Json.Encode(item))。但是,您为什么要通过生成所有额外的 html 并将其原封不动地再次发送回去来降低性能。只需包含项目的ID 并发布该包(并根据ID 从存储库中获取对象)
    • @StephenMuecke 我正在使用模态,当单击一行时($(".link").click)我想专门显示该行对象的某些字段的模态,你认为更适合只需将 id 发布到控制器并搜索集合的性能?这比直接将完整的对象发布到控制器然后不进行搜索要好?
    • 这里有几个需要考虑的。首先,您说过 如果我有 500 个字段会怎样(原文如此)如果您显示 20 行包含这么多字段(甚至 50 个字段),那么您连接速度较慢的用户将会在您之后使用棒球蝙蝠:)
    • 其次,如果您将 html 中的所有数据作为data-* 属性包含在内,为什么您甚至需要进行 ajax 调用来再次获取相同的数据 - 您已经拥有它了视图(您可以从data-graduate 对象中读取值并在您的模式中更新适当的表单控件,然后显示它。)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-26
    • 2016-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多