MVC 4 – Partial View

In order to create partial view, right click on Shared folder->Add->View
1.View name: It is common practice partial view’s name starts with “_” symbol for example “_AuctionPartial”
2.Create a strongly typed view: set checked
3.Model class: choose your model(Auction)
4.Create as a partial view: set checked

@model Auction.Models.Auction

<div class="one-auction">
    <h4 class="title">@Model.Title</h4>
    <p class="end-time">Auction ends at @Model.EndTime.ToString("g")</p>
    <p class="price">Price:@Model.CurrentPrice.GetValueOrDefault(Model.StartPrice).ToString("C")</p>
</div>

Now we created Auction partial view. So lets use it in our main view where we showing list of items.
First of all we send array of objects from our controller – AuctionsController:

        public ActionResult Index()
        {

            var auctions = new[] {
                new Models.Auction(){
                    Title = "Macbook Air 2013",
                    Description = "Amazing ultrabook",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(7),
                    StartPrice = 1.00m,
                    CurrentPrice = null ,
                },
                new Models.Auction(){
                    Title = "iPod Touch 5",
                    Description = "The best music player",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(3),
                    StartPrice = 1.00m,
                    CurrentPrice = 3.00m ,
                },
                new Models.Auction(){
                    Title = "Drone",
                    Description = "You can use to take dronee",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(30),
                    StartPrice = 10.00m,
                    CurrentPrice = 30.00m ,
                },
            };

            return View(auctions);
        }

On Index view we will show it:

@model IEnumerable<Auction.Models.Auction>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>


@foreach (var item in Model) {
    @Html.Partial("_AuctionPartial", item)
}

MVC4 – Model example

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

namespace Auction.Models
{
    public class Auction
    {

        public long Id { get; set; }

        public string Title { get; set; }
        public string Description { get; set; }
        public string ImageUrl { get; set; }

        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }

        public decimal StartPrice { get; set; }
        public decimal? CurrentPrice { get; set; }


    }
}

MVC4 – How to generate view easily?

We can be in situation when we want to show number of item in one view. This can be done very easily using Visual Studio. First of all, we create array of objects, in this case Auction entities.

       public ActionResult Index()
        {

            var auctions = new[] {
                new Models.Auction(){
                    Title = "Macbook Air 2013",
                    Description = "Amazing ultrabook",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(7),
                    StartPrice = 1.00m,
                    CurrentPrice = null ,
                },
                new Models.Auction(){
                    Title = "iPod Touch 5",
                    Description = "The best music player",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(3),
                    StartPrice = 1.00m,
                    CurrentPrice = 3.00m ,
                },
                new Models.Auction(){
                    Title = "Drone",
                    Description = "You can use to take dronee",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(30),
                    StartPrice = 10.00m,
                    CurrentPrice = 30.00m ,
                },
            };

            return View(auctions);
        }

If you have view for this action(Index), you can delete it. We will recreate it from the start. Anywhere inside the action(Index), right click of your mouse, choose “Add View”. New window will be opened
1.Choose “Create strongly typed view”
2.Choose your model of your instance object(Auction)
3.Scaffold template: choose “List”
4.Click “Add” button

@model IEnumerable<Auction.Models.Auction>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ImageUrl)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StartTime)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.EndTime)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StartPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CurrentPrice)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ImageUrl)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StartTime)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EndTime)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StartPrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CurrentPrice)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

And this will be created automatically.

MVC4 – Array of objects

        public ActionResult Index()
        {

            var auctions = new[] {
                new Models.Auction(){
                    Title = "Macbook Air 2013",
                    Description = "Amazing ultrabook",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(7),
                    StartPrice = 1.00m,
                    CurrentPrice = null ,
                },
                new Models.Auction(){
                    Title = "iPod Touch 5",
                    Description = "The best music player",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(3),
                    StartPrice = 1.00m,
                    CurrentPrice = 3.00m ,
                },
                new Models.Auction(){
                    Title = "Drone",
                    Description = "You can use to take dronee",
                    StartTime = DateTime.Now,
                    EndTime = DateTime.Now.AddDays(30),
                    StartPrice = 10.00m,
                    CurrentPrice = 30.00m ,
                },
            };

            return View(auctions);
        }

MVC4 – How to pass data from Controller to View?

Way 1 – using ViewData which works as dictionary
AuctionsController.cs

        public ActionResult Auction()
        {
            var auction = new Auction.Models.Auction()
            {
                Title = "iPod Touch 4 is sold",
                Description = "In acceptable condition",
                StartTime = DateTime.Now,
                EndTime = DateTime.Now.AddDays(3),
                StartPrice = 1.00m,
                CurrentPrice = null,
            };

            ViewData["Auction"] = auction;

            return View();
        }

Auction.cshtml

@{
    var auction = (Auction.Models.Auction)ViewData["Auction"];
}

<h3>@auction.Title</h3>

Way 2 – using ViewBag. This approach is handy because there is no need cast model object. From controller we pass data using ViewData:

        public ActionResult Auction()
        {
            var auction = new Auction.Models.Auction()
            {
                Title = "iPod Touch 4 is sold",
                Description = "In acceptable condition",
                StartTime = DateTime.Now,
                EndTime = DateTime.Now.AddDays(3),
                StartPrice = 1.00m,
                CurrentPrice = null,
            };

            ViewData["Auction"] = auction;

            return View();
        }

But in view, we use ViewBag:

@{
    var auction = ViewBag.Auction;
}

<h3>@auction.Title</h3>

Way 3 – using model approach
AuctionsController:

        public ActionResult Auction()
        {
            var auction = new Auction.Models.Auction()
            {
                Title = "iPod Touch 4 is sold",
                Description = "In acceptable condition",
                StartTime = DateTime.Now,
                EndTime = DateTime.Now.AddDays(3),
                StartPrice = 1.00m,
                CurrentPrice = null,
            };

            return View(auction);
        }

Auction.cshtml

@model Auction.Models.Auction
@{
    var auction = Model;
}
<h3>@auction.Title</h3>

Way 4 – you can pass data using TempData. This option will be useful for reading value from previous request:
AuctionsController.cs

        public ActionResult TempDataDemo()
        {
            TempData["SuccessMessage"] = "The action is succeeded";
            return RedirectToAction("Index");
        }

Index.cshtml

@if (TempData["SuccessMessage"] != null)
{
    @TempData["SuccessMessage"]
}

MVC4 Razor @ symbol

@{ some_code }
@one_line_code
@* comment *@
@: text_text_text
@()

Example:

@{
   
    var Auction = new Auction.Models.Auction()
    {
        Title = "iPod Touch 4 is sold",
        Description = "In acceptable condition",
        StartTime = DateTime.Now,
        EndTime = DateTime.Now.AddDays(3),
        StartPrice = 1.00m,
        CurrentPrice = null,
    };
     
}

<h3>@Auction.Title</h3>

@*
This is comment
*@

<br />

@if (Auction.Title == "iPod Touch 4 is sold")
{
    @: This is text
    <br />
    <text>text can be shown using text tag</text>
}
else
{
    @: iPod not sold
}

Result is:

iPod Touch 4 is sold

This is text

text can be shown using text tag

MVC4 Hello World

First of all create Auction model in the Models folder:

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

namespace Auction.Models
{
    public class Auction
    {

        public long Id { get; set; }

        public string Title { get; set; }
        public string Description { get; set; }
        public string ImageUrl { get; set; }

        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }

        public decimal StartPrice { get; set; }
        public decimal? CurrentPrice { get; set; }


    }
}

Then create controller:

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

namespace Auction.Controllers
{
    public class AuctionsController : Controller
    {
        //
        // GET: /Auctions/

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

    }
}

Right click on Index action of AuctionsController and add new view:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>