I found this great article that walked me through the process of creating a MVC application that updates a HTML table without having to redraw the whole web-page that contains it. The link to Brian Lachniet's blog post is provided below:
http://blachniet.com/2011/08/10/partial-views-with-unobtrusive-ajax/#more-23
It is written in C# but with a little effort I was able to convert it into VB.NET
Below is the VB.NET code that I created. Please refer back to Brian's blog to understand what the code is doing.
Controller:
Namespace BoringStore
Public Class ProductController
Inherits System.Web.Mvc.Controller
Public Function Index() As ActionResult
Dim db As New BoringStoreContext
Dim viewModel As New ProductIndexViewModel() With {.NewProduct = New Product(), .Products = db.Products}
Return View(viewModel)
End Function
Public Function Index_AddItem(viewModel As ProductIndexViewModel) As ActionResult
Dim db As New BoringStoreContext()
db.Products.Add(viewModel.NewProduct)
db.SaveChanges()
Return PartialView("ProductListControl", db.Products)
End Function
End Class
End Namespace
Main view:
@* Views\Index.vbhtml *@
@ModelType BoringStore.ProductIndexViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
@Code
ViewData("Title") = "Index"
End Code
<h2>Index</h2>
@Using Ajax.BeginForm("Index_AddItem", New AjaxOptions With {.UpdateTargetId = "productList"})
@<fieldset>
<legend>Resource</legend>
<div class="editor-label">
@Html.LabelFor(Function(model) model.NewProduct.Name)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.NewProduct.Name)
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.NewProduct.Price)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.NewProduct.Price)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
End Using
<div id="productList">
@Html.Partial("ProductListControl", Model.Products)
</div>
Partial view:
@* Views\ProductListControl.vbhtml (partial) *@
@ModelType IEnumerable(Of BoringStore.Product)
<table>
@* Render the page headers *@
<tr>
<th>
Name
</th>
<th>
Price
</th>
<th></th>
</tr>
@* Render the name and price of each product. *@
@For Each item In Model
Dim currentItem = item
@<tr>
<td>
@Html.DisplayFor(Function(modelItem) currentItem.Name)
</td>
<td>
@Html.DisplayFor(Function(modelItem) currentItem.Price)
</td>
</tr>
Next
</table>
ViewModel:
Public Class ProductIndexViewModel
Public Property NewProduct() As Product
Public Property Products() As IEnumerable(Of Product)
End Class