Question

I really didn’t know what title to give this question, but I’ll explain here:

I have a View with a bunch of input fields in a table. Each row in the table represents a task, and each column a weekday, and the input fields in each cell are there to let the user input hours worked for that task and day.

I then have a submit button to post the hours when the user wants to save. But here’s the problem: Each timesegment (as the object that holds hours is called) also has the property Description, to let the user write a description of what has been done for a particular time segment reported.

So how could I get the description property for the selected timesegment input field and show it in another “description” input field, and then let the user modify the description and save it with the timesegment?

Here’s what I’ve done so far:

Action method to get the description:

    public ActionResult GetDescription(string name, int number, int year)
    {
        try
        {
            int taskId = Int32.Parse(name.SubstringAfter("Tasks[").Substring(0, 1));
            int timeSegmentId = Int32.Parse(name.SubstringAfter("CurrentTimeSegments[").Substring(0, 1));
            List<Task> tasks = _repository.GetCurrentTasks(number, year);
            var description = tasks[taskId].CurrentTimeSegments[timeSegmentId].Description;

            return Content(description);
        }
        catch (Exception)
        {

            return Content("");
        }
    }

jQuery:

    function getDescription() {
        $('.hourInput').focus(function () {
            var name = $(this).attr('name');
            var number = '<%: Model.WeekNumber %>';
            var year = '<%: Model.Year %>';
            var url = '<%=Url.Action("GetDescription", "Timesheet") %>';
            $.get(url, { name: name, number: number, year: year }, function (data) {
                $('#description').val(data);
            });
        });
    }

Now, as you can see, I have to parse the name attribute of the input field to get the object I’m after, and this seems like a bit of a hack… But it’s the only way I can see to get this information. So my question is, is there another cleaner way to do this?

UPDATE:

Here’s the part that creates the input fields in a nested for loop (looping through each task, and then for each task all its timesegments):

<% for (int i = 0; i < Model.Tasks.Count; i++)
           {
               var task = Model.Tasks[i];
        %>
        <tr class="taskrow">
            <td>
                <input type="button" value="Delete" id="<%:i %>" class="deletebutton" />
            </td>
            <td class="customer">
                <%: task.Project.Customer.Name %>
            </td>
            <td class="project">
                <%: task.Project.Name %>
            </td>
            <td class="task">
                <%: task.Name %>
            </td>
            <% for (int j = 0; j < task.CurrentTimeSegments.Count; j++)
               { %>
            <td>
                <%: Html.TextBoxFor(model => model.Tasks[i].CurrentTimeSegments[j].TimeSpanHours, new { @class = "hourInput" })%>
                <%: Html.ValidationMessageFor(model => model.Tasks[i].CurrentTimeSegments[j].TimeSpanHours)%>
            </td>
            <% } %>
            <td class="hourSum"><%:task.WeekTaskHours %></td>
        </tr>
        <% } %>

Note that this code is in a partialview if it matters.

Answer 1

you could use the $.data jQuery function to save extra information in your this element of the getDescription method. You need to do that when you create this element. I don’t know how you do that and if it is possible for you in your current design.

to save the information it would be:

$(element).data('taskId', taskId);
$(element).data('timeSegmentId', timeSegmentId);

If you give the code where you create this element, I could help you.

Then the getDescription method would be

$('.hourInput').focus(function () {
   var taskId = $(this).data('taskId');
   vat timeSegmentId = $(this).data('timeSegmentId');
   var number = '<%: Model.WeekNumber %>';
   var year = '<%: Model.Year %>';
   var url = '<%=Url.Action("GetDescription", "Timesheet") %>';
   $.get(url, { taskId : taskId, timeSegmentId: timeSegmentId, number: number, year: year }, function (data) {
      $('#description').val(data);
   });
});

and so in your controller

public ActionResult GetDescription(string taskId, string timeSegmentId, int number, int year)
{
   try
   {
      List<Task> tasks = _repository.GetCurrentTasks(number, year);
      var description = tasks[taskId].CurrentTimeSegments[timeSegmentId].Description;

      return Content(description);
   }
   catch (Exception)
   {
      return Content("");
   }
}

EDIT:

According to how you create the input text boxes, I think you can do:

<td>
   <%: Html.TextBoxFor(model => model.Tasks[i].CurrentTimeSegments[j].TimeSpanHours, new { @class = "hourInput", id = "uniqueId_" + i + j })%>
   <%: Html.ValidationMessageFor(model => model.Tasks[i].CurrentTimeSegments[j].TimeSpanHours)%>
   <script type="text/javascript">
      $(document).ready(function() {
         var selector = '#uniqueId_<%=i %><%=j %>';
         $(selector).data('taskId', <%=i %>);
         $(selector).data('timeSegmentId', <%=j %>);
      });
   </script>
</td>