Jquery 在Telerik MVC Grid-Custom命令中序列化类型的对象时检测到循环引用

我面临的可能只是一个小小的疏忽，但我正试图在我看来序列化一个复杂的类。运行此代码时，我不断得到循环引用

控制器：

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {category = cat}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var category = e.response.category;
        $("#PriceDetails")
            .find("h2")
            .text(category.Name);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Grid(Model)
    .Name("CategoryList")
    .Localizable("is-IS")
    .Columns(columns =>
    {
        columns.Bound(o => o.Name).Width("20%");
        columns.Bound(o => o.Id).Template(o => Html.Label(o.SuperCategory())).Title("Yfirflokkur").Width("15%");
        columns.Bound(o => o.Description).Width("35%");
        columns.Command(command =>
        {
            command.Custom("EditCategory").Text("Edit").Action("Edit", "Category").DataRouteValues(r => r.Add(k => k.Id));
            command.Custom("PriceCategory").Text("Price").Action("EditPrice", "Category").DataRouteValues(r => r.Add(k => k.Id).RouteKey("Id")).Ajax(true);
            command.Custom("DeleteCategory").Text("Delete").Action("Delete", "Category").DataRouteValues(r => r.Add(k => k.Id));
        }).Width("30%").Title("Actions");
    })
    .ClientEvents(events => events.OnComplete("PriceChange"))
    .Sortable()
    .Footer(false)
)
</div>
<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Price")
        .Modal(true)
        .Width(500)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                        </div>
                        <div>
                            <button>Submit</button>
                        </div>
                    </div>
            </text>)
    )
</div>

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {Id = cat.Id, Name = cat.Name}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var id = e.response.Id;
        var name = e.response.Name;
        $("#PriceDetails")
            .find("h2")
            .text(name)
            .end()
            .find("#CategoryIdHidden")
            .attr("value", id);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Verð")
        .Modal(true)
        .Width(300)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                            <input id="CategoryIdHidden" type="hidden"/>
                        </div>
                        <div>
                            <span class="art-button-wrapper"onmouseover="className='art-button-wrapper hover'"
                                    onmouseout="className='art-button-wrapper'">
                                <span class="art-button-l"></span><span class="art-button-r "></span>
                                <button class="art-button">Breyta verði</button>
                            </span>
                        </div>
                    </div>
            </text>)
    )
</div>

Jquery:

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {category = cat}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var category = e.response.category;
        $("#PriceDetails")
            .find("h2")
            .text(category.Name);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Grid(Model)
    .Name("CategoryList")
    .Localizable("is-IS")
    .Columns(columns =>
    {
        columns.Bound(o => o.Name).Width("20%");
        columns.Bound(o => o.Id).Template(o => Html.Label(o.SuperCategory())).Title("Yfirflokkur").Width("15%");
        columns.Bound(o => o.Description).Width("35%");
        columns.Command(command =>
        {
            command.Custom("EditCategory").Text("Edit").Action("Edit", "Category").DataRouteValues(r => r.Add(k => k.Id));
            command.Custom("PriceCategory").Text("Price").Action("EditPrice", "Category").DataRouteValues(r => r.Add(k => k.Id).RouteKey("Id")).Ajax(true);
            command.Custom("DeleteCategory").Text("Delete").Action("Delete", "Category").DataRouteValues(r => r.Add(k => k.Id));
        }).Width("30%").Title("Actions");
    })
    .ClientEvents(events => events.OnComplete("PriceChange"))
    .Sortable()
    .Footer(false)
)
</div>
<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Price")
        .Modal(true)
        .Width(500)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                        </div>
                        <div>
                            <button>Submit</button>
                        </div>
                    </div>
            </text>)
    )
</div>

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {Id = cat.Id, Name = cat.Name}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var id = e.response.Id;
        var name = e.response.Name;
        $("#PriceDetails")
            .find("h2")
            .text(name)
            .end()
            .find("#CategoryIdHidden")
            .attr("value", id);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Verð")
        .Modal(true)
        .Width(300)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                            <input id="CategoryIdHidden" type="hidden"/>
                        </div>
                        <div>
                            <span class="art-button-wrapper"onmouseover="className='art-button-wrapper hover'"
                                    onmouseout="className='art-button-wrapper'">
                                <span class="art-button-l"></span><span class="art-button-r "></span>
                                <button class="art-button">Breyta verði</button>
                            </span>
                        </div>
                    </div>
            </text>)
    )
</div>

功能价格变化（e）{
如果（例如名称=“价格类别”）{
var priceWindow=$（“#priceWindow”）.数据（“tWindow”）；
var类别=e.response.category；
$（“价格详情”）
.查找（“h2”）
.文本（类别、名称）；
priceWindow.center（）.open（）；
}
}

View+Telerik:

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {category = cat}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var category = e.response.category;
        $("#PriceDetails")
            .find("h2")
            .text(category.Name);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Grid(Model)
    .Name("CategoryList")
    .Localizable("is-IS")
    .Columns(columns =>
    {
        columns.Bound(o => o.Name).Width("20%");
        columns.Bound(o => o.Id).Template(o => Html.Label(o.SuperCategory())).Title("Yfirflokkur").Width("15%");
        columns.Bound(o => o.Description).Width("35%");
        columns.Command(command =>
        {
            command.Custom("EditCategory").Text("Edit").Action("Edit", "Category").DataRouteValues(r => r.Add(k => k.Id));
            command.Custom("PriceCategory").Text("Price").Action("EditPrice", "Category").DataRouteValues(r => r.Add(k => k.Id).RouteKey("Id")).Ajax(true);
            command.Custom("DeleteCategory").Text("Delete").Action("Delete", "Category").DataRouteValues(r => r.Add(k => k.Id));
        }).Width("30%").Title("Actions");
    })
    .ClientEvents(events => events.OnComplete("PriceChange"))
    .Sortable()
    .Footer(false)
)
</div>
<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Price")
        .Modal(true)
        .Width(500)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                        </div>
                        <div>
                            <button>Submit</button>
                        </div>
                    </div>
            </text>)
    )
</div>

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {Id = cat.Id, Name = cat.Name}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var id = e.response.Id;
        var name = e.response.Name;
        $("#PriceDetails")
            .find("h2")
            .text(name)
            .end()
            .find("#CategoryIdHidden")
            .attr("value", id);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Verð")
        .Modal(true)
        .Width(300)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                            <input id="CategoryIdHidden" type="hidden"/>
                        </div>
                        <div>
                            <span class="art-button-wrapper"onmouseover="className='art-button-wrapper hover'"
                                    onmouseout="className='art-button-wrapper'">
                                <span class="art-button-l"></span><span class="art-button-r "></span>
                                <button class="art-button">Breyta verði</button>
                            </span>
                        </div>
                    </div>
            </text>)
    )
</div>

@（Html.Telerik（）.Grid（模型）
.名称（“分类列表”）
.Localizable（“is”）
.列（列=>
{
columns.Bound（o=>o.Name）.Width（“20%”）；
columns.Bound（o=>o.Id）.Template（o=>Html.Label（o.SuperCategory（））.Title（“Yfirflokkur”）.Width（“15%”）；
columns.Bound（o=>o.Description）.Width（“35%”）；
columns.Command（Command=>
{
command.Custom（“EditCategory”）.Text（“Edit”）.Action（“Edit”、“Category”）.datarouteValue（r=>r.Add（k=>k.Id））；
command.Custom（“PriceCategory”）.Text（“Price”）.Action（“EditPrice”、“Category”）.DataRouteValues（r=>r.Add（k=>k.Id）.RouteKey（“Id”）.Ajax（true）；
command.Custom（“DeleteCategory”）.Text（“Delete”）.Action（“Delete”、“Category”）.DataRouteValue（r=>r.Add（k=>k.Id））；
}).宽度（“30%”。标题（“行动”）；
})
.ClientEvents（events=>events.OnComplete（“价格变化”））
.Sortable（）
.Footer（假）
)
@（Html.Telerik（）.Window（））
.名称（“价格窗口”）
.可见（假）
.标题（“价格”）
.模态（真）
.宽度（500）
.身高（200）
.内容(@
提交
)
)

我的目标是能够按下网格中的“价格”按钮，并弹出一个窗口，允许我更改价格。问题是，我已经能够使用这段代码并向视图发送一个简单的字符串，这非常有效，例如从我的控制器发送“cat.Name”，而不是仅发送“cat”，因此基本上，当我发送复杂类型“Category”时，我会得到循环引用。

---

有人能看出我的失败吗？：）

我相信我会回答我自己的问题。在我发布问题后不久，我尝试了其他方法，效果很好，如下所示：

控制器：

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {category = cat}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var category = e.response.category;
        $("#PriceDetails")
            .find("h2")
            .text(category.Name);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Grid(Model)
    .Name("CategoryList")
    .Localizable("is-IS")
    .Columns(columns =>
    {
        columns.Bound(o => o.Name).Width("20%");
        columns.Bound(o => o.Id).Template(o => Html.Label(o.SuperCategory())).Title("Yfirflokkur").Width("15%");
        columns.Bound(o => o.Description).Width("35%");
        columns.Command(command =>
        {
            command.Custom("EditCategory").Text("Edit").Action("Edit", "Category").DataRouteValues(r => r.Add(k => k.Id));
            command.Custom("PriceCategory").Text("Price").Action("EditPrice", "Category").DataRouteValues(r => r.Add(k => k.Id).RouteKey("Id")).Ajax(true);
            command.Custom("DeleteCategory").Text("Delete").Action("Delete", "Category").DataRouteValues(r => r.Add(k => k.Id));
        }).Width("30%").Title("Actions");
    })
    .ClientEvents(events => events.OnComplete("PriceChange"))
    .Sortable()
    .Footer(false)
)
</div>
<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Price")
        .Modal(true)
        .Width(500)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                        </div>
                        <div>
                            <button>Submit</button>
                        </div>
                    </div>
            </text>)
    )
</div>

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {Id = cat.Id, Name = cat.Name}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var id = e.response.Id;
        var name = e.response.Name;
        $("#PriceDetails")
            .find("h2")
            .text(name)
            .end()
            .find("#CategoryIdHidden")
            .attr("value", id);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Verð")
        .Modal(true)
        .Width(300)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                            <input id="CategoryIdHidden" type="hidden"/>
                        </div>
                        <div>
                            <span class="art-button-wrapper"onmouseover="className='art-button-wrapper hover'"
                                    onmouseout="className='art-button-wrapper'">
                                <span class="art-button-l"></span><span class="art-button-r "></span>
                                <button class="art-button">Breyta verði</button>
                            </span>
                        </div>
                    </div>
            </text>)
    )
</div>

Jquery:

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {category = cat}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var category = e.response.category;
        $("#PriceDetails")
            .find("h2")
            .text(category.Name);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Grid(Model)
    .Name("CategoryList")
    .Localizable("is-IS")
    .Columns(columns =>
    {
        columns.Bound(o => o.Name).Width("20%");
        columns.Bound(o => o.Id).Template(o => Html.Label(o.SuperCategory())).Title("Yfirflokkur").Width("15%");
        columns.Bound(o => o.Description).Width("35%");
        columns.Command(command =>
        {
            command.Custom("EditCategory").Text("Edit").Action("Edit", "Category").DataRouteValues(r => r.Add(k => k.Id));
            command.Custom("PriceCategory").Text("Price").Action("EditPrice", "Category").DataRouteValues(r => r.Add(k => k.Id).RouteKey("Id")).Ajax(true);
            command.Custom("DeleteCategory").Text("Delete").Action("Delete", "Category").DataRouteValues(r => r.Add(k => k.Id));
        }).Width("30%").Title("Actions");
    })
    .ClientEvents(events => events.OnComplete("PriceChange"))
    .Sortable()
    .Footer(false)
)
</div>
<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Price")
        .Modal(true)
        .Width(500)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                        </div>
                        <div>
                            <button>Submit</button>
                        </div>
                    </div>
            </text>)
    )
</div>

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {Id = cat.Id, Name = cat.Name}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var id = e.response.Id;
        var name = e.response.Name;
        $("#PriceDetails")
            .find("h2")
            .text(name)
            .end()
            .find("#CategoryIdHidden")
            .attr("value", id);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Verð")
        .Modal(true)
        .Width(300)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                            <input id="CategoryIdHidden" type="hidden"/>
                        </div>
                        <div>
                            <span class="art-button-wrapper"onmouseover="className='art-button-wrapper hover'"
                                    onmouseout="className='art-button-wrapper'">
                                <span class="art-button-l"></span><span class="art-button-r "></span>
                                <button class="art-button">Breyta verði</button>
                            </span>
                        </div>
                    </div>
            </text>)
    )
</div>

功能价格变化（e）{
如果（例如名称=“价格类别”）{
var priceWindow=$（“#priceWindow”）.数据（“tWindow”）；
var id=e.response.id；
var name=e.response.name；
$（“价格详情”）
.查找（“h2”）
.文本（名称）
(完)
.find（#CategoryIdHidden）
.attr（“值”，id）；
priceWindow.center（）.open（）；
}
}

Telerik窗口：

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {category = cat}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var category = e.response.category;
        $("#PriceDetails")
            .find("h2")
            .text(category.Name);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Grid(Model)
    .Name("CategoryList")
    .Localizable("is-IS")
    .Columns(columns =>
    {
        columns.Bound(o => o.Name).Width("20%");
        columns.Bound(o => o.Id).Template(o => Html.Label(o.SuperCategory())).Title("Yfirflokkur").Width("15%");
        columns.Bound(o => o.Description).Width("35%");
        columns.Command(command =>
        {
            command.Custom("EditCategory").Text("Edit").Action("Edit", "Category").DataRouteValues(r => r.Add(k => k.Id));
            command.Custom("PriceCategory").Text("Price").Action("EditPrice", "Category").DataRouteValues(r => r.Add(k => k.Id).RouteKey("Id")).Ajax(true);
            command.Custom("DeleteCategory").Text("Delete").Action("Delete", "Category").DataRouteValues(r => r.Add(k => k.Id));
        }).Width("30%").Title("Actions");
    })
    .ClientEvents(events => events.OnComplete("PriceChange"))
    .Sortable()
    .Footer(false)
)
</div>
<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Price")
        .Modal(true)
        .Width(500)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                        </div>
                        <div>
                            <button>Submit</button>
                        </div>
                    </div>
            </text>)
    )
</div>

public JsonResult EditPrice(int id)
{
    Category cat = _categoryDataGateway.GetCategory(id);
    return Json(new {Id = cat.Id, Name = cat.Name}, JsonRequestBehavior.AllowGet);
}

<script type="text/javascript">
function PriceChange(e) {
    if (e.name == "PriceCategory") {
        var priceWindow = $("#PriceWindow").data("tWindow");
        var id = e.response.Id;
        var name = e.response.Name;
        $("#PriceDetails")
            .find("h2")
            .text(name)
            .end()
            .find("#CategoryIdHidden")
            .attr("value", id);
        priceWindow.center().open();
    }
}
</script>

<div>
    @(Html.Telerik().Window()
        .Name("PriceWindow")
        .Visible(false)
        .Title("Verð")
        .Modal(true)
        .Width(300)
        .Height(200)
        .Content(@<text>
                    <div id="PriceDetails">
                        <h2></h2>
                        <div>
                            <input id="CategoryPrice" type="text"/>
                            <input id="CategoryIdHidden" type="hidden"/>
                        </div>
                        <div>
                            <span class="art-button-wrapper"onmouseover="className='art-button-wrapper hover'"
                                    onmouseout="className='art-button-wrapper'">
                                <span class="art-button-l"></span><span class="art-button-r "></span>
                                <button class="art-button">Breyta verði</button>
                            </span>
                        </div>
                    </div>
            </text>)
    )
</div>

@（Html.Telerik（）.Window（））
.名称（“价格窗口”）
.可见（假）
.标题（“版本”）
.模态（真）
.宽度（300）
.身高（200）
.内容(@
布雷塔·弗雷伊
)
)

问题是，我只需要从复杂类型中提取位，并将其单独发送到要在那里序列化的视图。无论如何，谢谢你：）