如何刷新视图中的部分视图？

Question

各位，我做错了什么？这是我的想法...

首页视图

<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有一个表单。 第一次进入Index时，PartialView可以正常工作，但是第二次在PartialView内部的表单进行POST调用后，只能呈现PartialView而不是Index。

因此，为了解决这个问题，我正在做以下操作:

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

可以这样做。我重新渲染了所有的索引（包括我的更改，提交后）。但是我刷新了整个页面，所以失去了一些CSS元素（例如折叠手风琴）。

我应该使用Ajax仅刷新包含PartialView内容的div吗？

谢谢大家。

编辑：

@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>
}

- Elias MP

---

你能展示一下你的表单声明吗？ - André Figueiredo

为什么这是相关的？一个标准的问题... @André Figueiredo - Kenzo_Gilead

因为它可以是普通表单，也可以是Ajax表单...你没有提供完整的信息。 - André Figueiredo

我还没明白你的意思。这个表单是普通的，你可以通过Ajax、控制器等方式调用它...无论如何，我已经编辑过了，以防我漏掉什么...谢谢@André Figueiredo。 - Kenzo_Gilead

Answer 1

好的，我阅读了这篇文章 (自动刷新局部视图) 的解决方案。我发布它，希望能澄清问题:

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

- Elias MP

---

您也可以像这样向控制器发送参数：$('#divPartial').load('/PartialController/PartialView?itemId=2095'); - robbpriestley

谢谢@robbpriestley。我还没有尝试过这种方法...干杯，伙计。 - Kenzo_Gilead

Answer 2

部分视图是为了在不同的视图中重用代码的某些部分，但当您提交表单时，整个视图都将重新加载。

如果您不想重新加载，则必须使用AJAX提交表单。

- Borja Tur

---

你可以在视图中添加纯JavaScript函数来使用ajax请求，但出于简单性的考虑，我建议使用jQuery。让我找一个在jQuery中使用ajax调用的工作示例。 - Borja Tur

感谢 @Borja Tur。我之前使用过 Ajax，但当我试图将其与部分视图集成时，似乎还缺少一些东西... 如果你方便的话，能否为我提供一个非常基本的示例，以便我可以从那里开始... 甚至可以使用我的简单示例（我的问题代码）。谢谢 Borja！ - Kenzo_Gilead

在这里，您已经解释了一个基本的示例代码 https://cmatskas.com/update-an-mvc-partial-view-with-ajax/，以仅重新加载部分视图。我希望现在可以有所帮助。如果不行的话，今天下午我可以在Github上编写一个非常基本的项目，并在此帖子中提供一个工作示例的链接。 - Borja Tur

谢谢，伙计。好的，这个链接包含了我得到的东西。第一次进入Partial时，索引呈现正确。但第二次（在提交调用之后，因为Partial内有一个表单）就不起作用了。我可以正确地呈现索引（但失去了我的CSS元素，手风琴折叠 - 部分控制器POST - 返回View（“index”）），或者我可以呈现部分（没有index.cshtml... - 部分控制器POST - 返回PartialView（“PartialView”））。 - Kenzo_Gilead

@EliasMP 这里有一个可用的示例 https://github.com/borjatur/TestPartialView - Borja Tur

Answer 3

Partial view是为了在不同的地方重用代码的一部分。当页面提交后，如果您想避免页面刷新，则可以使用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
}

- Pushpendra Maheshwari

---

最好将Partial View渲染的HTML返回给AJAX调用者。public ActionResult ActionName() { var viewModel = new MyViewModel(); return PartialView("_MyParitalView", viewModel); }。为了接收HTML，你需要在ajax调用中指定默认的contentType: "application/x-www-form-urlencoded; charset=UTF-8", dataType: "html"。 - Georg Patscheider