Solved

Generating two views in one

Posted on 2011-09-09
3
422 Views
Last Modified: 2012-05-12
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
Comment
Question by:TheCommunicator
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 10

Accepted Solution

by:
Irzana earned 250 total points
ID: 36515349
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
 
LVL 10

Assisted Solution

by:P1ST0LPETE
P1ST0LPETE earned 250 total points
ID: 36515388
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
 

Author Comment

by:TheCommunicator
ID: 36525073
Thank you so much guys I ended up using iFrame fot that. Seems like it is working :)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
This video Micro Tutorial shows how to password-protect PDF files with free software. Many software products can do this, such as Adobe Acrobat (but not Adobe Reader), Nuance PaperPort, and Nuance Power PDF, but they are not free products. This vide…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question