Question

I´m faced with what is probably just a small oversight on my behalf, but I´m trying to serialize a complex class in my View. I keep getting a circular reference when running this code.

Controller:

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

Jquery:

<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>

View + Telerik:

<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>

My goal is to be able to press the “Price” button in the grid and a window pops up that allows me to change the price. The thing is that I´ve already been able to use this code and send a simple string to the view and that works perfectly, for instance sending “cat.Name” from my controller instead of only “cat”, so basically when I send the complex type “Category” I get the circular reference.
Can any1 spot my failure? 🙂

Answer 1

I belive I will answer my own question. Shortly after I posted the question I tried something else and it worked, like this:

Controller:

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

Jquery:

<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>

Telerik Window:

<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>

The thing is that I just had to take the bits from my complex type and send it separately to the view to be serialized there. Thank you anyway 🙂