---
# System prepended metadata

title: mod08
tags: [mvc]

---

```csharp
//1. View
//HomeController.cs 
public ActionResult AjaxDemo()
{
    return View();
}

// home/ajaxdemo.cshtml
Server Time:@DateTime.Now
<hr />
<div id="divMessage" style="background-color:yellow"></div>

//2. 
// homecontroller.cs
public ActionResult HelloWorld()
{
    ViewBag.message = "HelloWorld:" + DateTime.Now.ToString();
    return PartialView();
}
// home/helloworld.cshtml
<h3> @ViewBag.message </h3>

//3.
// home/ajaxdemo.cshtml
<h2>AjaxDemo</h2>

Server Time:@DateTime.Now
<hr />
@Ajax.ActionLink("Ajax", "HelloWorld",new AjaxOptions {
    HttpMethod="get",
    UpdateTargetId= "divMessage",
    InsertionMode=InsertionMode.Replace
})
<hr />
<div id="divMessage" style="background-color:yellow"></div>
@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}
//==========================================
//1.
// operacontroller.cs
public ActionResult DetailsAjax(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Opera opera = db.Operas.Find(id);
    if (opera == null)
    {
        return HttpNotFound();
    }
    return PartialView(opera);
}

//2.
// operas/DetailsAjax.cshtml
@model MyWeb.Models.Opera

<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.Title)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Title)
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Year)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Year)
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Composer)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Composer)
    </dd>

</dl>

//3. operas/index.cshtml
@model IEnumerable<MyWeb.Models.Opera>

@{
    ViewBag.Title = "Opera List";
}

<h2>Opera List</h2>

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

<div class="row">
    <div class="col-md-8">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Title)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Year)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Composer)
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Title)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Year)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Composer)
                        </td>
                        <td>
                            @Ajax.ActionLink("DetailsAjax", "DetailsAjax", new { id = item.OperaID }
                       ,new AjaxOptions
                       {
                           HttpMethod="get",
                           UpdateTargetId="result",
                           InsertionMode=InsertionMode.Replace

                       }) |

                            @Html.ActionLink("Edit", "Edit", new { id = item.OperaID }) |
                            @Html.ActionLink("Details", "Details", new { id = item.OperaID }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.OperaID })
                        </td>
                    </tr>
                }
            </tbody>
        </table>

    </div>
    <div class="col-md-4" id="result"></div>
</div>

@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}
//=====================
// home/ajaxdemo.cshtml
@using (Ajax.BeginForm("HelloWorld2",new AjaxOptions {
    HttpMethod = "get",
    UpdateTargetId = "divMessage",
    InsertionMode = InsertionMode.Replace
}))
{
    <input type="text" name="username" />
    <input type="submit" />
}
```