Question

我是asp.net mvc的新手，并且在将新项目添加到表格显示的项目列表后，努力寻找正确的刷新方法。

“添加新项目”控件与列表位于同一页面上。因此，当用户单击“添加”时，我想将其添加到数据库并在下表中显示刷新的列表。虽然我让控制器正在将其添加到数据库中，但我无法刷新列表。你能不能让我知道在这种情况下刷新表格的方法？

以下是我的观点 -

<table>
    <tr>
        <td>
            <input id="txtAddName" type="text" />
        </td>
        <td>
            <button id="btnAdd"  onclick="Add(); return false;">Add</button>
        </td>
    </tr>
</table>

<table width="100%">
    <tr>
        <th>Name</th>
    </tr>
    @foreach (var m in Model)
    {
        <tr>
            <td>
                <input id="txtName-@m.Id.ToString()" type="text" value="@m.Name.ToString()" />
            </td>
        </tr>
    }
</table>

function Add() {
        var _Name = $("#txtAddName").val();
        var url = '@Url.Action("Create", "Item")';
        $.post(
        url,
        {
            Name: _Name
        },
        function (data) {

        });
    }

控制器 -

    [AcceptVerbs("POST")]
    public ActionResult Create(string name)
    {
        // Logic to add item goes here


        // What do I return here? I would want my table to now display the refreshed (including the new item)
    }

    [HttpGet]
    public ActionResult List()
    {
        // List is the action method that returns the initial list, both these are in the same controller
        return View(data);
    }

Answer 1

您必须更改控制器，如下所示：

    [AcceptVerbs("POST")]
    public ActionResult Create(string name)
    {
      // Logic to add item goes here

     // What do I return here? I would want my table to now display the refreshed (including the new item)

      return RedirectToAction("List");//redirect to List Action Method
    }

    [HttpGet]
    public ActionResult List()
    {
        // List is the action method that returns the initial list, both these are in the same controller
        return View(data);
    }

注意： 在上面的列表操作方法中，您必须从数据库中获取最新数据和< strong>发送回View。

最新更新：

这里我将介绍如何使用来自控制器的项目列表表格。

尝试在您的应用程序中使用此类视图来显示您的内容。

           <div class="boxedForm">
                    <table id="productDetails">
                        <tr>
                            <th>
                                Product Name
                            </th>
                            <th style="text-align: center;">
                                UPC Code
                            </th>
                        </tr>
                        @ foreach (var p in Model.ProductList)
                           {
                        <tr class="row">
                            <td>
                                @p.ProductName
                            </td>
                            <td>
                                @p.UpcCode
                            </td>
                        </tr>
                        }
                    </table>
            </div>

我的ViewModel就像

public class ProductViewModel
    {
       public virtual ICollection<Product> ProductList { get; set; }
    }

我的模型就像

public class Product
    {
        public Product() { Id = Guid.NewGuid(); Created = DateTime.Now; }
        public string ProductName { get; set; }
        public string UpcCode { get; set; }
    }

更新2：

尝试使用您的帖子方法，如下所示：

function Add() {
        var _Name = $("#txtAddName").val();
        var url = '@Url.Action("Create", "Item")';
        $.post(
        url,
        {
            Name: _Name
        },
        function (data) {
            var url = Sys.Url.route('YourRouteName', { action: "List", controller: "YourControllerName"});
            window.location = url;  
        });
    }

如何在asp.net mvc 3 razor中添加新项目后刷新表格

1 个答案: