• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

Generating two views in one

Hi all,

I am new to MVC development and I am given a Mock up in  which I have to load a view with the list of all the records and instead of "Details link" that actually takes the user to a new  view called details, they want a details frame just below that and and it should be updated everytime somebody clicks on the List Item.

 

Any clue on how can I achieve this?

I am attaching the screenshot for your reference


Tasks-MockUp.png
0
TheCommunicator
Asked:
TheCommunicator
2 Solutions
 
IrzanaCommented:
Use partial view for details, and everytime somebody clicks on the List Item do an ajax call (using JQuery) and update the partial view, this would be a better approach

Some guide

http://iridescence.no/post/Partial-Rendering-with-ASPNET-MVC-and-jQuery.aspx


0
 
P1ST0LPETECommented:
You could do an ajax call, but given the current circumstance I would load all the data at page load, and then hide the few pieces of data that you don't want displayed in the list (i.e. description and due date) in hidden fields.  Then just use javascript to load the details list on each click. A working example is shown below:

Model
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication2.Models
{
    public class TaskModel
    {
        public Int32 Id { get; set; }
        public String Name { get; set; }
        public String Description { get; set; }
        public String Status { get; set; }
        public String AssignedTo { get; set; }
        public DateTime DueDate { get; set; }

        public TaskModel()
        {
            this.Id = -1;
            this.Name = string.Empty;
            this.Description = string.Empty;
            this.Status = string.Empty;
            this.AssignedTo = string.Empty;
            this.DueDate = new DateTime(1920, 1, 1);
        }
    }
}

Open in new window



Controller
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;

namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public ActionResult Tasks()
        {
            List<TaskModel> taskList = new List<TaskModel>();

            //loading dummy data - which should be pulled from database
            string[] names = { "Gather Requirement", "Design", "Develop", "Conduct Internal Test", "Conduct Acceptance Test", "Deploy to Production" };

            for (int i = 1; i < 7; i++)
            {
                TaskModel task = new TaskModel();
                task.Id = i;
                task.Name = names[i - 1];
                task.Description = "Develop the system.";
                task.Status = i % 2 == 0 ? "Open" : "Completed";
                task.DueDate = DateTime.Now;
                task.AssignedTo = i % 2 == 0 ? "User1" : "User2";

                taskList.Add(task);
            }

            return View(taskList);
        }
    }
}

Open in new window



View
 
@using MvcApplication2.Models
@model List<TaskModel>

@{ ViewBag.Title = "Tasks"; }

<style type="text/css">
    thead { background-color: #E8EEF4; font-weight: bold; }
    #task-list tbody tr:hover { background-color: Yellow; cursor: pointer; }
    fieldset { width: 400px; }
</style>

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('fieldset tr').each(function ()
        {
            $(this).children('td:first').css('text-align', 'right');
        });

        $('#task-list tbody tr').click(function ()
        {
            $('#task-id').html($(this).children('td:first').text());
            $('#task-name').html($(this).children('td:first').next().text());
            $('#task-description').html($(this).find('#Description').val());
            $('#task-status select').val($(this).children('td:first').next().next().text());
            $('#task-date').html($(this).find('#DueDate').val());
            $('#task-assigned').html($(this).children('td:first').next().next().next().text());
        });
    });
</script>

<h2>Tasks (Mockup)</h2>

<p>
    <a href="#">Create New Task</a>
</p>

<p>
    <input type="checkbox" />
    <span>Automatically refresh task list every second.</span>
</p>

<table id="task-list">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Status</td>
            <td>Assigned To</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.Id
                    @Html.Hidden("Description", item.Description)
                    @Html.Hidden("DueDate", item.DueDate.ToShortDateString())
                </td>
                <td>@item.Name</td>
                <td>@item.Status</td>
                <td>@item.AssignedTo</td>
            </tr>
        }
    </tbody>
</table>

<fieldset id="task-details">
    <legend>Task Details</legend>
    <table>
        <tr>
            <td>ID:</td>
            <td id="task-id"></td>
        </tr>
        <tr>
            <td>Name:</td>
            <td id="task-name"></td>
        </tr>
        <tr>
            <td>Description:</td>
            <td id="task-description"></td>
        </tr>
        <tr>
            <td>Status:</td>
            <td id="task-status">
                <select>
                    <option value="Open">Open</option>
                    <option value="Completed">Completed</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Due On:</td>
            <td id="task-date"></td>
        </tr>
        <tr>
            <td>Assigned To:</td>
            <td id="task-assigned"></td>
        </tr>
    </table>
</fieldset>

Open in new window

0
 
TheCommunicatorAuthor Commented:
Thank you so much guys I ended up using iFrame fot that. Seems like it is working :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now