2

これについてはかなりの数の投稿を見てきましたが、おそらく行く必要があると思われるルートをたどる前に、ベストプラクティスを理解しようとしたかったのです。データベースに新しいレコードを挿入した後、ビューを更新しようとしています:

かなり基本的なセットアップ：

<table id="grid-basic" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="role_id">ID</th>
            <th data-column-id="description">Description</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td style="padding-right: 20px;">
                <div id="add-role-text-group" class="form-group">
                    <input id="add-role-text" type="text" class="form-control input-md" placeholder="Add Role" data-container="body" title="A role description must be entered."/>
                    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                </div>
            </td>
            <td style="vertical-align: middle;"><button type="button" class="btn btn-xs btn-default command-add"><span class="fa fa-plus"></span></button></td>
        </tr>
    </tfoot>
</table>

私のC#コード

// GET: Application Role Management
        [Route("role")]
        public ActionResult Role()
        {
            return View(RoleManager.Roles.ToList<IdentityRole>());
        }

        [HttpPost]
        [Route("addrole")]
        public async Task<ActionResult> AddRole(string description)
        {
            IdentityRole role = new IdentityRole();
            role.Name = description;

            var result = await RoleManager.CreateAsync(role);
            if (result.Succeeded)
            {
                return RedirectToAction("role");
            } else {
                return RedirectToAction("Error");
            }
        }

AJAX 投稿

$.ajax({
     type: "POST",
     url: "@Url.Action("AddRole")", // the method we are calling
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify({ description: $element.val() }),
     dataType: "json"
});

ビューをロードし、システム内のすべてのロールを取得して、グリッドに表示します。新しいロールを挿入するためのインライン行があります。新しい役割を入力し、プラス ボタンをクリックします。AddRole ルートに POST します。モデルを更新してグリッドを更新するにはどうすればよいですか?

私が見てきたことから、挿入を実行し、すべてのロールを再度取得し、「成功」イベントでグリッドを更新する必要があります。これは本当ですか？それとも、ASP.net経由でこれを行うためのより従来のMVC手段がありますか? 明らかに、Knockout などを使用してその程度まで進むこともできますが、この方法でビューを更新する手段があるかどうか疑問に思っています。

4

3 に答える 3

0

POST メソッドは別のアクション メソッドにリダイレクトしようとしていますが、ajax 呼び出しはリダイレクトされません。新しいロールのId値を返すようにメソッドを変更し、それを json としてビューに返します

[HttpPost]
[Route("addrole")]
public async Task<ActionResult> AddRole(string description)
{
  IdentityRole role = new IdentityRole();
  role.Name = description;
  var result = await RoleManager.CreateAsync(role);
  if (result.Succeeded)
  {
    return Json(role.Id);
  } else {
    return Json(null);
  }
}

次に、テキストボックスの値と返された Id 値に基づいて、成功のコールバックに新しいロールを追加するように ajax を変更します。

var description = $('#add-role-text').val();
var url = '@Url.Action("AddRole")';
var table = $('#grid-basic');
$.post(url, { description: description }, function(id) {
  if (!id) { 
    // oops 
    return;
  }
  var newRow = [{ role_id: id, description: description }];
  table.bootgrid("append", newRow);
}).fail(function() {
  // oops - display error message?
});
于 2015-08-28T05:01:23.970 に答える
0

ロールを追加した後に現在のページをリロードしたい場合は、1 つのことを行うことができます。

ajax呼び出しに成功関数を追加し、以下のように配置します

success:function(){
     window.location.href ="your current page url"
}

于 2015-08-28T03:50:06.397 に答える
0

あなたがする必要があるのは、使用することだけです

return Json(role.Id,JsonRequestBehavior.AllowGet);

そして、あなたのajax呼び出しで...

success:function(data){
 if(data.Id>0){
  $("#grid-basic").append('<tr><td>data.Id</td><td>//description comes here</td></tr>');
 }
 else{
  alert("error");
 }
}

テーブルを更新する場合は、上記の方法でテーブルに行を追加するか、
ページをリロードするか、部分ビューを返してから div に追加することができます。Json を返し、上記の方法で追加することをお勧めします。

于 2015-08-28T07:21:59.807 に答える