Question

I’m having a brain meltdown since I’m combining Telerik extension with my own jQuery mix-up in my MVC3 project.

I want to be able to call ActionResult with Ajax like this:

    function showDialog(arg) {
    var url = '/Home/ReserveRent/';
    alert(arg);
    $.ajax({
            type: "GET",
            url: url,
            data: { id: arg },
            dataType: "html",
            success: function(data) { $('#RenderRent').html(data); },
            error: function(data) { alert(url+'  '+arg+'   '+data); }
        });
    var rentPayment = $('#RenderRent').html();
    $('#ModalPay' + arg).html(rentPayment);
    $('#Window' + arg).data('tWindow').center().open();
}

On page load I create multiple Telerik Windows which are hidden, I want to call upon each one of them with my jQuery above. My Razor page has these two Div tags included:

    <div>
@foreach (ShowAvailability availability in Model.ShowAvailabilities)
{
    foreach (var salesLine in availability.SalesLinesForSale)
    {
        SalesLine line = salesLine;
        Html.Telerik().Window()
        .Name("Window"+line.SalesLineID)
        .Title("Submit feedback")
        .Content(@<text>
            @using (Html.BeginForm("PayRent", "Payment", FormMethod.Post, new { id = "feedback-form" }))
            {
                <p class="note">This is <strong>salesLine</strong> @line.SalesLineID.</p>

                <div id='"ModalPay"[e-mail]'>
                    <!--TODO: Here will rendered Html be copied between Divs-->
                </div>
                <div class="form-actions">
                    <button type="submit" class="t-button t-state-default">Submit feedback!</button>
                </div>
            }
            </text>)
        .Buttons(b => b.Close())
        .Width(400)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
    }
}
</div>
<div id="RenderRent" style="display: none;">
    <!-- TODO: Render payment info-->
    @{Html.RenderPartial("ReserveRent");}
</div>

As you can see within my Ajax request I will render the result within the Div tag marked as #RenderRent. I therefore want to replace that Div tag with the special Div tag within the Telerik Window, and the Window now should have the correct model-info within. My controller action is like this:

        public ActionResult ReserveRent(int salesLineId)
    {
        var salesLine = _salesLineLogic.GetSalesLine(salesLineId);

        if (!salesLine.IsAvailable)
        {
            ViewBag.AvailableSalesLine = @"Þessi orlosfeign er því miður ekki lengur til leigu á þessu tímabili.";
            return RedirectToAction("Index", "Home");
        }

        salesLine.IsAvailable = false;
        _salesLineLogic.SaveToDatabase();

        var payment = new Payment { FK_SalesLineID = salesLineId, EditedBy = "PayRent.cshtml (GET)", EditedOn = DateTime.Now };

        return PartialView(new HomeFormViewModel(payment));
    }

For some reason the argument is not being received from the Ajax request, the salesLineId is always NULL. Can anyone spot what I’m doing wrong with the AjaxRequest, or if the jQuery function is not declared right?

Answer 1

Your ajax call has incorrect data. Property inside your object literal (id) doesn’t match to the salesLineId in the controller action.

$.ajax({
    type: "GET",
    url: url,
    data: { salesLineId: arg },
    dataType: "html",
    success: function(data) { $('#RenderRent').html(data); },
    error: function(data) { alert(url+'  '+arg+'   '+data); }
});

Update

There is also something weird on this line

<div id='"ModalPay"[e-mail]'>

It should be something like

<div id='ModalPay@(line.SalesLineID)' >