2

私はasp.net mvcを初めて使用し、テーブルに表示されるアイテムのリストに新しいアイテムが追加された後、テーブルを更新する正しい方法を見つけるのに苦労しています。

新しい項目の追加コントロールは、リストと同じページにあります。そこで、ユーザーが「追加」をクリックすると、データベースに追加し、更新されたリストを下の表に表示したいと考えています。コントローラーを DB に追加する作業を行っていますが、リストを更新できません。このシナリオでテーブルを更新する方法を教えてください。

これが私の見解です -

<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);
    }
4

1 に答える 1

4

以下のようにコントローラーを変更する必要があります。

    [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);
    }

注 :上記のリスト アクション メソッド内で、データベースから最新のデータを取得し、に送り返す必要があります。

最新のアップデート:

ここでは、 controller からのアイテムのリストをテーブルに表示する方法を示しています。

アプリケーションでこの種のビューを使用して、コンテンツを表示してみてください。

           <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;  
        });
    }
于 2012-12-02T07:25:27.077 に答える