MVC3用Jquery对话框替换CRUD视图.如何刷新“索引"变更后 [英] MVC3 Replacing CRUD view with Jquery dialog. How to refresh "Index" after change

问题描述

你好，

是否有人有任何代码(最好是VB.NET)在CRUD事件后刷新"Index.vbhtml" HTML表(在Visual Studio 2010中添加新的Controller时自动生成)显示表中修改记录的列表的代码(最好是VB.NET)?

例如，如果我的索引视图中有一个人"列表:

(1)单击自动生成的RAZOR创建新"按钮，现在我已经写好它，以便弹出带有"Create.vbhtml"表单的部分视图的Jquery对话框，这使我可以创建一个新的人记录.
(2)然后，在我单击提交"按钮之后，新记录将作为序列化的字符串传递回Create(POST)操作方法，并被适当地保存到数据库中，并且Jquery对话框关闭...

问:如何在Index.vbhtml上获取HTML表以显示新记录-但是-无需进行完整的页面刷新?我知道可以使用JSON和Jquery .post()来完成此操作，但是我这样做的尝试并没有顺利进行！

我相信我需要从Action方法返回一些JSON(这样做时我似乎只是收到500 Internal Error)，并将某些东西粘贴到我的.post()方法的"Success"函数中，但是我无法算出什么应该是.

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!

推荐答案

我发现这篇很棒的文章引导我完成了创建MVC应用程序的过程，该应用程序无需重新绘制整个Web即可更新HTML表. -包含它的页面.下面提供了指向Brian Lachniet博客文章的链接:

http://blachniet.com/2011/08/10/partial-views-with-unobtrusive-ajax/#more-23

它是用C#编写的，但是我花了一点功夫就能将其转换为VB.NET

下面是我创建的VB.NET代码.请返回Brian的博客以了解代码的作用.

控制器:

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

        '
        ' 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:

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

ViewModel:

' ViewModels\ProductIndexViewModel.vb

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

这篇关于MVC3用Jquery对话框替换CRUD视图.如何刷新“索引"变更后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！