Using Data Annotations in ASP.NET MVC with AJAX jQuery Datatables

Question

I've implemented AJAX in my jQuery Datatables following a simple tutorial but I'm not sure how to use all the data annotations I created in my data viewmodel. How do I do this? Before Ajax, I would have something like this in my view (using razor):

 <tbody>
@foreach (CallableNoteViewModel vm in Model)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => vm.UnderlyingAsset) </td>
        <td>@Html.DisplayFor(modelItem => vm.PayoutCurrency)</td>
        <td>@Html.DisplayFor(modelItem => vm.Term)</td>
        <td>@Html.DisplayFor(modelItem => vm.AutoCallLevel)</td>
        <td>@Html.DisplayFor(modelItem => vm.Frequency)</td>
        <td>@Html.DisplayFor(modelItem => vm.Barrier)</td>
        <td>@Html.DisplayFor(modelItem => vm.CouponBarrier)</td>
        <td>@Html.DisplayFor(modelItem => vm.AutoCallableStart)</td>
        <td>@Html.DisplayFor(modelItem => vm.UpsideParticipation)</td>
        <td>@Html.DisplayFor(modelItem => vm.Fee)</td>
        <td>@Html.DisplayFor(modelItem => vm.Coupon)</td>
        <td>@Html.DisplayFor(modelItem => vm.AsOfDate)</td>
    </tr>
}
</tbody>

Now, naturally, my view looks like this, with an empty body. :

<table id="ajax_ci_table" class="table table-striped table-bordered table-responsive" style="white-space: nowrap">
<thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model.UnderlyingAsset)</th>
        <th>@Html.DisplayNameFor(model => model.PayoutCurrency)</th>
        <th>@Html.DisplayNameFor(model => model.Term)</th>
        <th>@Html.DisplayNameFor(model => model.AutoCallLevel)</th>
        <th>@Html.DisplayNameFor(model => model.Frequency)</th>
        <th>@Html.DisplayNameFor(model => model.Barrier)</th>
        <th>@Html.DisplayNameFor(model => model.CouponBarrier)</th>
        <th>@Html.DisplayNameFor(model => model.AutoCallableStart)</th>
        <th>@Html.DisplayNameFor(model => model.UpsideParticipation)</th>
        <th>@Html.DisplayNameFor(model => model.Fee)</th>
        <th>@Html.DisplayNameFor(model => model.Coupon)</th>
        <th>@Html.DisplayNameFor(model => model.AsOfDate)</th>
    </tr>
</thead>
<tbody>
</tbody>

This is populated by my AjaxController which returns JSON Data:

 IEnumerable<string[]> stringdata = from c in data
                select new[]
                {
                    c.UnderlyingAsset,
                    c.PayoutCurrency,
                    c.Term.ToString(),
                    c.AutoCallLevel.ToString(CultureInfo.InvariantCulture),
                    c.Frequency.ToString(),
                    c.Barrier.ToString(CultureInfo.InvariantCulture),
                    c.CouponBarrier.ToString(CultureInfo.InvariantCulture),
                    c.AutoCallableStart.ToString(),
                    c.UpsideParticipation.ToString(CultureInfo.InvariantCulture),
                    c.Fee.ToString(CultureInfo.InvariantCulture),
                    c.Coupon.ToString(CultureInfo.InvariantCulture),
                    c.AsOfDate.ToString(CultureInfo.InvariantCulture)
                };

But now my Data Annotations obviously don't work that I used on my view model for formatting. Stuff like:

    [Display(Name = "PayFreq")]
    [UIHint("FrequencyAndTerm")]
    public int Frequency
    {
        get { return _callableNote.Frequency; }
    }

How do I format my data or use my existing data annotations without directly returning formatting data in my controller (in my second last code block)? I feel like it is wrong to return formatted data in the controller. Isn't that the view's job?

Thanks for your help!

Answer 1

CoolboyJules,

I don't think that DisplayFor uses annotations. Try using an editor type helper instead of a display.

@Html.TextboxFor(m => m.UnderlyingAsset);

Not sure what your whole view looks like, but here is a quick template. The model has a Boolean IsViewOnly flag

@using (Ajax.BeginForm("Edit", "Inventory", null, ajaxOptions, new { id = "frmInventoryEditModal" }))
{
    <!-- modal div -->
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2 style="color: darkorchid Title</h2>
    </div>
    <div id="ErrorSummary">
        @Html.ValidationSummary(true)
    </div>
    <div class="modal-body" id="modal-body">
            <div class="row-fluid DataRow">
            @using (Html.ControlGroupFor(m => m.UnderlyingAsset))
            {
                @Html.LabelFor(m => m.UnderlyingAsset, new { @class = "control-label" })
                <div class="controls">
                    @Html.TextBoxFor(m => m.UnderlyingAsset)
               </div>
            }
        </div>  
        // Continue for the rest of the fields in model         
    </div>
    <div class="modal-footer">
        @if (!Model.IsViewOnly)
        {
            <button id="btnSave" type="button" class="btn btn-primary">Save changes</button>
        }
        <button id="btnCancel" class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
}

These helpers look for and add the proper html to your rendered control which should display your attributes.

Hope this helps.