using System;
using System.Collections.Generic;

namespace MvcApplication17.Models
{
    public class Employee
    {
        public int Id { set; get; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime AddDate { get; set; }
        public double Salary { get; set; }
        public IList<Project> Projects { get; set; }
    }
}

namespace MvcApplication17.Models
{
    public class Project
    {
        public int Id { set; get; }
        public string Name { set; get; }
    }
}

using System;
using System.Collections.Generic;

namespace MvcApplication17.Models
{
    public static class EmployeeDataSource
    {
        public static IList<Employee> CreateEmployees()
        {
            var list = new List<Employee>();
            var rnd = new Random();
            for (int i = 1; i <= 1000; i++)
            {
                list.Add(new Employee
                    {
                        Id = i + 1000,
                        FirstName = "fName " + i,
                        LastName = "lName " + i,
                        AddDate = DateTime.Now.AddYears(-rnd.Next(1, 10)),
                        Salary = rnd.Next(400, 3000),
                        Projects = CreateRandomProjects()
                    });
            }
            return list;
        }

        private static IList<Project> CreateRandomProjects()
        {
            var list = new List<Project>();
            var rnd = new Random();
            for (int i = 0; i < rnd.Next(1, 7); i++)
            {
                list.Add(new Project
                {
                    Id = i,
                    Name = "Project " + i
                });
            }
            return list;
        }
    }
}

using System.Web.Mvc;
using MvcApplication17.Models;

namespace MvcApplication17.Controllers
{
    public class HomeController : Controller
    {
        [HttpPost]
        public ActionResult Delete(int? id)
        {
            return RedirectToAction("Index");
        }

        [HttpGet]
        public ActionResult Edit(int? id)
        {
            return View();
        }

        [HttpGet]
        public ActionResult Index(string sort, string sortdir, int? page = 1)
        {
            var list = EmployeeDataSource.CreateEmployees();
            return View(list);
        }
    }
}

http://localhost:3034/?sort=LastName&sortdir=ASC&page=3

@using System.Globalization
@model IList<MvcApplication17.Models.Employee>
           
@{
    ViewBag.Title = "Index";
}

@helper WebGridPageFirstItem(WebGrid grid)
{
    @(((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1));
}

@helper WebGridPageLastItem(WebGrid grid)
{
    if (grid.TotalRowCount < (grid.PageIndex + 1 * grid.RowsPerPage))
    {
      @grid.TotalRowCount;
    }
    else
    {
      @((grid.PageIndex + 1) * grid.RowsPerPage);
    }
}

<h2>Employees List</h2>

@{ 
    var grid = new WebGrid(
        source: Model,
        canPage: true,
        rowsPerPage: 10,
        canSort: true,
        defaultSort: "FirstName"
    );
    var salaryPageSum = 0;
    var taxPageSum = 0;
    var rowIndex = ((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1);
}

<div id="container">
    @grid.GetHtml(
            tableStyle: "webgrid",
            headerStyle: "webgrid-header",
            footerStyle: "webgrid-footer",
            alternatingRowStyle: "webgrid-alternating-row",
            selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
            htmlAttributes: new { id = "MyGrid" },
            mode: WebGridPagerModes.All,
            columns: grid.Columns(
                 grid.Column(header: "#",
                             style: "text-align-center-col",
                             format: @<text>@(rowIndex++)</text>),
                 grid.Column(columnName: "FirstName", header: "First Name",
                             format: @<span style='font-weight: bold'>@item.FirstName</span>,
                             style: "text-align-center-col"),
                 grid.Column(columnName: "LastName", header: "Last Name"),
                 grid.Column(header: "Image",
                             style: "text-align-center-col",
                             format: @<text><img alt="@item.Id" src="@Url.Content("~/images/" + @item.Id + ".jpg")" /></text>),
                 grid.Column(columnName: "AddDate", header: "Start",
                             style: "text-align-center-col",
                             format: item =>
                             {
                                 int ym = item.AddDate.Year;
                                 int mm = item.AddDate.Month;
                                 int dm = item.AddDate.Day;
                                 var persianCalendar = new PersianCalendar();
                                 int ys = persianCalendar.GetYear(new DateTime(ym, mm, dm, new GregorianCalendar()));
                                 int ms = persianCalendar.GetMonth(new DateTime(ym, mm, dm, new GregorianCalendar()));
                                 int ds = persianCalendar.GetDayOfMonth(new DateTime(ym, mm, dm, new GregorianCalendar()));
                                 return ys + "/" + ms.ToString("00") + "/" + ds.ToString("00");

                             }),
                 grid.Column(columnName: "Salary", header: "Salary",
                             format: item =>
                             {
                                 salaryPageSum += item.Salary;
                                 return string.Format("${0:n0}", item.Salary);
                             },
                             style: "text-align-center-col"),
                 grid.Column(header: "Tax", canSort: true,
                             format: item =>
                             {
                                 var tax = item.Salary * 0.2;
                                 taxPageSum += tax;
                                 return string.Format("${0:n0}", tax);
                             }),
                 grid.Column(header: "Projects", columnName: "Projects",
                             style: "text-align-center-col",
                             format: item =>
                             {
                                 var subGrid = new WebGrid(
                                                        source: item.Projects,
                                                        canPage: false,
                                                        canSort: false
                                                        );
                                 return subGrid.GetHtml(
                                                        htmlAttributes: new { id = "MySubGrid" },
                                                        tableStyle: "webgrid",
                                                        headerStyle: "webgrid-header",
                                                        footerStyle: "webgrid-footer",
                                                        alternatingRowStyle: "webgrid-alternating-row",
                                                        selectedRowStyle: "webgrid-selected-row",
                                                        rowStyle: "webgrid-row-style"
                                     );
                             }),
                 grid.Column(header: "",
                             style: "text-align-center-col",
                             format: item => @Html.ActionLink(linkText: "Edit", actionName: "Edit",
                                                              controllerName: "Home", routeValues: new { id = item.Id },
                                                              htmlAttributes: null)),
                 grid.Column(header: "",
                             format: @<form action="/Home/Delete/@item.Id" method="post"><input type="submit"
                                            onclick="return confirm('Do you want to delete this record?');"
                                            value="Delete"/></form>),
                 grid.Column(header: "", format: item => item.GetSelectLink("Select"))
                      )
                  )

    <strong>Page:</strong> @(grid.PageIndex + 1) / @grid.PageCount, 
    <strong>Records:</strong> @WebGridPageFirstItem(@grid) - @WebGridPageLastItem(@grid) of @grid.TotalRowCount

    @*
    @if (@grid.HasSelection)
    {
        @RenderPage("~/views/path/_partial_view.cshtml", new { Employee = grid.SelectedRow })
    }
    *@
</div>

@section script{
<script type="text/javascript">
    $(function () {
        $('#MyGrid tbody:first').append(
        '<tr class="total-row"><td></td>\
         <td></td><td></td><td></td>\
         <td><strong>Total:</strong></td>\
         <td>@string.Format("${0:n0}", @salaryPageSum)</td>\
         <td>@string.Format("${0:n0}", @taxPageSum)</td>\
         <td></td><td></td><td></td></tr>');
    });
</script>
}

@{ 
    var grid = new WebGrid(
        source: Model,
        canPage: true,
        rowsPerPage: 10,
        canSort: true,
        defaultSort: "FirstName"
    );
    var salaryPageSum = 0;
    var taxPageSum = 0;
    var rowIndex = ((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1);
}

tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
htmlAttributes: new { id = "MyGrid" },

<div id="container">
      <table class="webgrid" id="MyGrid">
        <thead>
          <tr class="webgrid-header">

/* Styles for WebGrid
-----------------------------------------------------------*/
.webgrid
{
 width: 100%;
 margin: 0px;
 padding: 0px;
 border: 0px;
 border-collapse: collapse;
 font-family: Tahoma;
 font-size: 9pt;
}

.webgrid a
{
 color: #000;
}

.webgrid-header
{
 padding: 0px 5px;
 text-align: center;
 border-bottom: 2px solid #739ace;
 height: 20px;
 border-top: 2px solid #D6E8FF;
 border-left: 2px solid #D6E8FF;
 border-right: 2px solid #D6E8FF;
}

.webgrid-header th
{
 background-color: #eaf0ff;
 border-right: 1px solid #ddd;
}

.webgrid-footer
{
 padding: 6px 5px;
 text-align: center;
 background-color: #e8eef4;
 border-top: 2px solid #3966A2;
 height: 25px;
 border-bottom: 2px solid #D6E8FF;
 border-left: 2px solid #D6E8FF;
 border-right: 2px solid #D6E8FF;
}

.webgrid-alternating-row
{
 height: 22px;
 background-color: #f2f2f2;
 border-bottom: 1px solid #d2d2d2;
 border-left: 2px solid #D6E8FF;
 border-right: 2px solid #D6E8FF;
}

.webgrid-row-style
{
 height: 22px;
 border-bottom: 1px solid #d2d2d2;
 border-left: 2px solid #D6E8FF;
 border-right: 2px solid #D6E8FF;
}

.webgrid-selected-row
{
 font-weight: bold;
}

.text-align-center-col
{
 text-align: center;
}

.total-row
{
 background-color:#f9eef4;
}

[Flags]
public enum WebGridPagerModes
{
        Numeric = 1,
        //
        NextPrevious = 2,
        //
        FirstLast = 4,
        //
        All = 7,
}

grid.Column(columnName: "FirstName", header: "First Name",
                             format: @<span style='font-weight: bold'>@item.FirstName</span>,
                             style: "text-align-center-col"),
grid.Column(columnName: "LastName", header: "Last Name"),

Func<dynamic, object> format

format: @<span style='font-weight: bold'>@item.FirstName</span>
or
format: item =>
                     {
                          salaryPageSum += item.Salary;
                           return string.Format("${0:n0}", item.Salary);
                      }

grid.Column(header: "#",
                 style: "text-align-center-col",
                 format: @<text>@(rowIndex++)</text>),

grid.Column(header: "Image",
                  style: "text-align-center-col",
                  format: @<text><img alt="@item.Id" src="@Url.Content("~/images/" + @item.Id + ".jpg")" /></text>),

grid.Column(columnName: "AddDate", header: "Start",
                  style: "text-align-center-col",
                  format: item =>
                  {
                       int ym = item.AddDate.Year;
                       int mm = item.AddDate.Month;
                       int dm = item.AddDate.Day;
                       var persianCalendar = new PersianCalendar();
                       int ys = persianCalendar.GetYear(new DateTime(ym, mm, dm, new GregorianCalendar()));
                       int ms = persianCalendar.GetMonth(new DateTime(ym, mm, dm, new GregorianCalendar()));
                       int ds = persianCalendar.GetDayOfMonth(new DateTime(ym, mm, dm, new GregorianCalendar()));
                       return ys + "/" + ms.ToString("00") + "/" + ds.ToString("00");
                    }),

grid.Column(columnName: "Salary", header: "Salary",
                 format: item =>
                             {
                                 salaryPageSum += item.Salary;
                                 return string.Format("${0:n0}", item.Salary);
                             },
                             style: "text-align-center-col"),
grid.Column(header: "Tax", canSort: true,
                             format: item =>
                             {
                                 var tax = item.Salary * 0.2;
                                 taxPageSum += tax;
                                 return string.Format("${0:n0}", tax);
                             }),

grid.Column(header: "Projects", columnName: "Projects",
                  style: "text-align-center-col",
                  format: item =>
                  {
                                 var subGrid = new WebGrid(
                                                        source: item.Projects,
                                                        canPage: false,
                                                        canSort: false
                                                        );
                                 return subGrid.GetHtml(
                                                        htmlAttributes: new { id = "MySubGrid" },
                                                        tableStyle: "webgrid",
                                                        headerStyle: "webgrid-header",
                                                        footerStyle: "webgrid-footer",
                                                        alternatingRowStyle: "webgrid-alternating-row",
                                                        selectedRowStyle: "webgrid-selected-row",
                                                        rowStyle: "webgrid-row-style"
                                     );
                       }),

grid.Column(header: "",
                  style: "text-align-center-col",
                   format: item => @Html.ActionLink(linkText: "Edit", actionName: "Edit",
                                                              controllerName: "Home", routeValues: new { id = item.Id },
                                                              htmlAttributes: null)),
grid.Column(header: "",
                  format: @<form action="/Home/Delete/@item.Id" method="post"><input type="submit"
                                            onclick="return confirm('Do you want to delete this record?');"
                                            value="Delete"/></form>),
grid.Column(header: "", format: item => item.GetSelectLink("Select"))

@if (@grid.HasSelection)
    {
        @RenderPage("~/views/path/_partial_view.cshtml", new { Employee = grid.SelectedRow })
    }

<strong>Page:</strong> @(grid.PageIndex + 1) / @grid.PageCount, 
    <strong>Records:</strong> @WebGridPageFirstItem(@grid) - @WebGridPageLastItem(@grid) of @grid.TotalRowCount

@section script{
<script type="text/javascript">
    $(function () {
        $('#MyGrid tbody:first').append(
        '<tr class="total-row"><td></td>\
         <td></td><td></td><td></td>\
         <td><strong>Total:</strong></td>\
         <td>@string.Format("${0:n0}", @salaryPageSum)</td>\
         <td>@string.Format("${0:n0}", @taxPageSum)</td>\
         <td></td><td></td><td></td></tr>');
    });
</script>
}

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    @RenderSection("script", required: false)
</head>

      <asp:ScriptManager runat="server" ID="scMan1">
          <CompositeScript>
              <Scripts>
                  <asp:ScriptReference Path="~/flash_detect.js" />
                  <asp:ScriptReference Path="~/jquery.min.js"  />
              </Scripts>
          </CompositeScript>
      </asp:ScriptManager>

<script src="/ScriptResource.axd?d=cAKulKR-axYxbFwMRvm-IlAnHOZjn3-BvtfYzmKItFijWImCOZdjuDVGIFvqZLFX0" type="text/javascript"></script>

var ClickableImage = function (props) {
    return (
        <a href={props.href}>
            <img src={props.src} />
        </a>
    )
};

<div id="reactTestContainer"></div>

<script src="node_modules/react/dist/react.min.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<script src="react-test.js" type="text/babel"></script>

var ClickableImage = function (props) {
    return (
        <a href={props.href}>
            <img src={props.src} />
        </a>
    )
};

ReactDOM.render(
    <ClickableImage href="http://google.com" src="google.jpg"/>, 
    document.getElementById("reactTestContainer")
)

@using SimpleFormGenerator.DomainClasses
@model IEnumerable<SimpleFormGenerator.DomainClasses.Field>

@{
    ViewBag.Title = "نمایش فرم";
}

<div>
    <div>
        <div>
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                for (int i = 0; i < Model.Count(); i++)
                {
                    if (Model.ElementAt(i).FieldType == FieldType.Text)
                    {
                        <text>
                            <input type="hidden" name="[@i].FieldType" value="@Model.ElementAt(i).FieldType" />
                            <input type="hidden" name="[@i].Id" value="@Model.ElementAt(i).Id" /> 
                            <input type="hidden" name="[@i].FormId" value="@Model.ElementAt(i).FormId" /> 
                            <div>
                                <label>@Model.ElementAt(i).TitleFa</label>
                                <div>
                                    <input type="text" name="[@i].TitleEn" />
                                </div>
                            </div>

                        </text>

                    }
                }
                <div data-formId ="@ViewBag.FormId">
                    <div>
                        <input type="submit" value="ارسال فرم" />
                    </div>
                </div>
            }
        </div>
        <div>
            @Html.ActionLink("بازگشت", "Index")
        </div>
    </div>
</div>

for (int i = 0; i < Model.Count(); i++)
{
     // code
}

if (Model.ElementAt(i).FieldType == FieldType.Text)
{
     // code
}

<input type="text" name="[@i].TitleEn" />

[@i].FieldTyp

public class Value
{
        public int Id { get; set; }
        public string Val { get; set; }
        public virtual Field Field { get; set; }
        [ForeignKey("Field")]
        public int FieldId { get; set; }
        public virtual Form Form { get; set; }
        [ForeignKey("Form")]
        public int FormId { get; set; }
        
}

[HttpPost]
        public ActionResult ShowForm(IEnumerable<Field> values)
        {

            if (ModelState.IsValid)
            {
                foreach (var value in values)
                {
                    _valueService.AddValue(new Value { Val = value.TitleEn, FormId = value.FormId, FieldId = value.Id});
                    _uow.SaveAllChanges();
                }
            }
            return View(values);
        }

.
.
.
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> .... </title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
@Scripts.Render("~/bundles/jquery")
<link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2013.3.1324/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
  </head>
<body>
.
.
.
.
.
  @Scripts.Render("~/bundles/bootstrap")
    <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.bootstrap-modal-ajax-form.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.bootstrap-modal-confirm.js")"></script>
    @RenderSection("scripts", required: false)
</body>
.
.
.

testmd.ts:1Uncaught ReferenceError: exports is not defined
require.js:143 Uncaught Error: Module name "testmd" has not been loaded yet for context: _. Use require([])

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css"/>
    <script src="Scripts/require.js"></script>
    <script src="Scripts/App/app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

{
    "compilerOptions": {
         "target": "es5",
         "outDir": "Scripts/App",
          "moduleResolution": "node",
          "module": "commonjs",
         "sourceMap": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true
    }
}