web-dev-qa-db-ja.com

ビューの部分ビューのみを更新するにはどうすればよいですか？

私は間違った人を何をしていますか？これがアイデアです...

インデックスビュー

<div class="col-lg-12 col-md-12 col-xs-12">
    @Html.Partial("PartialView", Model)
</div>

コントローラ

public ActionResult PartialView()
{
    return PartialView("PartialView");
}

[HttpPost, ValidateInput(false)]
public ActionResult POSTPartialView(string param1)
{
    return PartialView("PartialView");
}

PartialViewにはフォームがあります。最初にインデックスに入力したとき、PartialViewは機能しますが、2回目はPOST呼び出し（PartialView内のフォームからの呼び出し）の後、インデックスからPartialViewをレンダリングするだけです。 。

だからそれを修正するために、私は次のことをしています：

[HttpPost, ValidateInput(false)]
public ActionResult POSTPartialView(string param1)
{
    return View("Index");
}

うまくいきます。すべてのインデックスを再度レンダリングします（変更後、POST後）。しかし、すべてのページを更新したので、CSS要素をいくつか失いました（たとえば、アコーディオンが崩壊しました）。

PartialViewを内容とするdivのみを更新するためにAjaxを使用する必要がありますか？

メイツに感謝します。

編集：

@using (Html.BeginForm("PartialView", "Controller", FormMethod.Post, new { @class = "form-inline", role = "form" }))
{
    <div class="form-group col-lg-3 col-md-3 col-xs-3">
        <label for="DATA">DATA:</label>
        <input type="text" class="form-control pull-right" name="DATA">
    </div> 
    <button type="submit" class="btn btn-primary pull-right">Get Data</button>
}
c#asp.net-mvcrazorasp.net-mvc-partialview
7
Elias MP

さて、私は解決策を読みます（ 自動更新パーシャルビュー ）。私はそれを投稿しています、質問を明確にすることを望んでいます：

index.html

<div class="col-lg-12 col-md-12 col-xs-12" id="divPartial">
    @Html.Partial("PartialView", Model)
</div>

<script type="text/javascript">
  $("#buttonForm").click(function(e){
    $('#form').submit();
    $('#divPartial').load('/PartialController/PartialView'); 
  });
</script>

PartialController

public ActionResult PartialView()
{
    // DO YOUR STUFF. 
    return PartialView("PartialView", model);
}

[HttpPost, ValidateInput(false)]
public EmptyResult POSTPartialView(string param1)
{
    // DO YOUR STUFF AFTER SUBMIT.
    return new EmptyResult();
}
10
Elias MP

部分ビューは、異なるビューでコードの一部を再利用するように方向付けられていますが、フォームを送信すると、ビュー全体が再ロードされます。

リロードしたくない場合は、フォームの送信にAJAXを使用する必要があります。

2
Borja Tur

部分ビューは、コードの一部を別の場所で再利用するためのものです。ページが送信されると、ページの更新を避けたい場合はビューがリロードされ、ajaxを使用できます。

ビューのコード

$.ajax({
    type: "POST",
    url: '@Url.Action("ControllerName", "ActionName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

コントローラーのコード

public JsonResult ActionName(string yourdata)
{
   return Json(p); \\ where p is you want to return
}
1
Pushpendra Maheshwari