Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Generating two views in one

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

Technology Partners: 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

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Suggested Courses

609 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