Solved

Generating two views in one

Posted on 2011-09-09
3
421 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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Suggested Solutions

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

737 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