MVC3 Replacing CRUD view with Jquery dialog. How to refresh "Index" after change

Question

0.00/5 (No votes)

See more:

Hello,

Does anyone have any code (preferably VB.NET) that refreshes the "Index.vbhtml" HTML table (auto-generated when you add a new Controller in Visual Studio 2010) showing the list of amended records in a table after a CRUD event?

For example, if I have a list of "persons" in my Index view:

(1) I click on the auto-generated RAZOR "Create New" button I have now written it so that a Jquery dialog pops up with a partial view of the "Create.vbhtml" form, this allows me to create a new person record.
(2) then, after I click the "Submit" button the new record is passed back to the Create (POST) action method as a serialized string and is duly saved to the database and the Jquery dialog closes...

Q: how can I get the HTML table on Index.vbhtml to show the new record - but - without doing a complete page refresh? I understand that this could be done using JSON and Jquery .post(), but my attempts at doing it that way has not gone well!

I believe I need return some JSON from the Action Method (I just seem to get a 500 Internal Error when I do that) and to stick something in the "Success" function of my .post() method, but I cannot work out what this should be.

Many thanks in advance!

Posted 14-Mar-12 2:51am

mvcvb2012

Updated 14-Mar-12 2:57am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

mvcvb2012 · Accepted Answer · 2012-03-14T07:46:00

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:

VB

Namespace BoringStore
    Public Class ProductController
        Inherits System.Web.Mvc.Controller

        '
        ' GET: /BoringStore

        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:

HTML

@* 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:

HTML

@* 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:

VB

' ViewModels\ProductIndexViewModel.vb

Public Class ProductIndexViewModel
    Public Property NewProduct() As Product
    Public Property Products() As IEnumerable(Of Product)
End Class