Access index of model data member in javascript

Question

I am currently working on a scheduling application, and need to get data from my current view model into the model for a partial view I am loading from the page. What is supposed to happen is when the user clicks the row of a record, a modal window pops up to display more information about the record.

However, I am unable to access the data I need from the model to send to the controller and subsequently populate the modal dialog. Does anyone have a good way to get around this limitation or show me what I am doing incorrectly? Thank you!

EDIT: I am aware that I cannot use the razor syntax to get the data in my javascript. I am looking for a workaround for that.

Relevant HTML:

<tbody>
        @foreach (var s in Model.requests)
        {
            <tr>
                <td id="@s.cliID">@s.clientName</td>
                <td id="@s.projectID">@s.projectName</td>
                <td id="@s.resourceID">@s.resource</td>
                <td id="@s.resourceType">@s.resourceType</td>
                <td id="@s.startDate">@s.startDate</td>
                <td id="@s.endDate">@s.endDate</td>
                <td id="@s.status">@s.status</td>
                <td style="color: blue;"><u>Open link</u></td>
                <td class="rowDialog"></td>
            </tr>
        }
    </tbody>

Relevant JS:

$(document).ready(function () {
        var $dialog = $('.rowDialog').dialog({
            autoOpen: false,
            width: 600,
            position: { my: 'top', at: 'top+150' },
            modal: true,
            title: "Request View/ Approval",
            dialogClass: 'alert',
            draggable: false,
            closeOnEscape: true,

            buttons: {
                "Close": function () {
                    $dialog.dialog('close');
                }
            }

        });

        $("tr").click(function () {
            var rowClicked = $(this);
            var index = rowClicked.index();

            $dialog.get(
                "/ScheduleRequests/RequestViewApproval",
                {
                    // Errors thrown by these lines
                    'clientName' : @Model.requests[index].clientName,
                    'location' : @Model.requests[index].location,
                    'projectName' : @Model.requests[index].projectName,
                    'resource' : @Model.requests[index].projectName,
                    'startDate' : @Model.requests[index].startDate,
                    'endDate' : @Model.requests[index].endDate,
                    'monHours' : @Model.requests[index].monHours,
                    'tuesHours' : @Model.requests[index].tuesHours,
                    'wedHours' : @Model.requests[index].wedHours,
                    'thursHours' : @Model.requests[index].thursHours,
                    'friHours' : @Model.requests[index].friHours
                }
                );
            $dialog.dialog("open");
        });

    });

you cannot get like this.. razor code gets executed on page load as it is server side code — Ehsan Sajjad
– Ehsan Sajjad, Commented Jul 10, 2014 at 11:42
@EhsanSajjad I understand that, I am wondering if there is a workaround. — Matt
– Matt, Commented Jul 10, 2014 at 12:16

Matt · Accepted Answer · 2014-08-12 15:59:54Z

1

I originally solved this problem by moving the AJAX call to a separate function and passing in the values needed as variables. However, as I recently found out, one can access the razor view code in Javascript by simply surrounding it in quotes. I feel a bit silly, but hey, learning.

answered Aug 12, 2014 at 15:59

Matt

2,0371 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access index of model data member in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related