?
Solved

Generating two views in one

Posted on 2011-09-09
3
Medium Priority
?
425 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 1000 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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
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…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses
Course of the Month8 days, 5 hours left to enroll

765 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