你是否可以仅更新部分视图而不是整个页面？

Question

有没有一种方法可以在不重新加载父页面的情况下提交asp.net mvc中的部分视图表单，但仅重新加载部分视图以达到其新状态？类似于knockout.js使用data-bind更新的方式。

我的数据表呈现具有可变数量的列/名称，因此我认为knockout.js对于这个问题不是一个选项，因此我正在尝试使用部分视图。

- Rayshawn

Answer 1

不能没有jQuery。

您需要做的是将您的部分视图放在一个div中，例如：

<div id="partial">
    @Html.Partial("YourPartial")
</div>

接下来，如果要进行更新（例如点击具有id button的按钮），您可以执行以下操作：

$("#button").click(function () {
   $.ajax({
       url: "YourController/GetData",
       type: "get",
       data: $("form").serialize(), //if you need to post Model data, use this
       success: function (result) {
           $("#partial").html(result);
       }
   });
})

那么你的操作应该类似于：

public ActionResult GetData(YourModel model) //that's if you need the model
{
    //do whatever

    return View(model);
}

- mattytommo

---

这是一个不错的解决方案，适合那些了解Web开发但不熟悉C# MVC的人。 - Mustafa

@MurWade，很抱歉我不明白为什么这个解决方案对于使用MVC和C#的人不适用？你能详细说明一下吗？ - Joey Bob

@JoeyBob 这适用于任何使用MVC和C#的人。你可以用多种方式做一件事，而这种方式似乎是对于那些做过Web开发（单页应用程序、Ajax等），但没有做过MVC C#的人来说最易理解的方法。在MVC C#中，你也可以使用Update Panel，但这并不像这种方法那样直接明了。 - Mustafa

Answer 2

实际上，如果您的Partial（部分视图）具有子操作方法，您可以直接发布（甚至使用锚链接）到子操作并获得类似Ajax的效果。我们在几个视图中都使用了这种方法。

语法为

@Html.Action("MyPartial")

儿童行为是

public ActionResult MyPartial()
{
    return PartialView(Model);
}

如果您的表单提交到子操作

@using (Html.BeginForm("MyPartial"))
{
    ...
}

部分视图将使用从子操作返回的部分视图进行更新。

Jquery仍然是更新部分视图的合法方法。但从技术上讲，对你的问题的答案是肯定的。

- Dave Alperovich

---

也试一下这个。 - Rayshawn

Dave，你能详细解释一下这个是如何工作的吗？我本来以为这会导致从提交的表单返回的部分视图显示为一个新页面，而不是在原地更新。 - JohnnyHK

@JohnnyHK，我也会这样想。令人惊讶的是，这导致部分视图返回到父视图而不是替换父视图。产生类似Ajax调用的效果。 - Dave Alperovich

在MVC5中，Html.BeginForm("string")调用了扩展重载BeginForm(this HtmlHelper htmlHelper, object routeValues)，导致产生一个POST /?Length=N的结果。我觉得这个答案的“有效性”是没有预期的行为。 - Jasen

Dave，我正在尝试在自己的应用程序中实现这个，但是我承认我的智商不高。我需要一些指导，并且需要了解如何实现这个。 - Charles Owen

Answer 3

正常情况下，我在寻找这类内容时发现人们提供的信息太过有限，因此我将在此尝试提供帮助。关键是设置一个具有您可以附加返回html的ID的div。还要确保在调用控制器时返回部分视图。这种方法可能存在一些潜在问题，但在好天气的日子里它应该可以正常工作。

<div id="CategoryList" class="widget">
    @{
        Html.RenderPartial("WidgetCategories.cshtml");
    }
</div>

          function DeleteCategory(CategoryID) {
            $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID,
                function (data) {
                    if (data == "No") {
                        alert('The Category has report widgets assigned to it and cannot be deleted.');
                    }
                    else {
                        $('#CategoryList').html(data);
                    }

                }
            );
        }


    [HttpGet("DeleteWidgetCategory")]
    [HttpPost("DeleteWidgetCategory")]
    public IActionResult DeleteWidgetCategory(string CategoryID)
    {
        string Deleted = CategoryModel.DeleteCategory(CategoryID);

        if (Deleted == "Yes")
        {
            return PartialView("WidgetCategories");
        }
        else
        {
            return this.Json("No");
        }
    }

- Deathstalker

Answer 4

在这种情况下，我会使用Ajax表单助手，使用部分视图和@html.RenderPartial("partialName")部分帮助器

- Stokes

Answer 5

在你的主视图中。

<div id=SearchResult>
   @Html.Partial("_NameOfPartialView", Model)
</div>

<input type="button" id="btnSubmit" value="Submit">

在你的Javascript文件中

$('#btnSubmit').click(function () {
    GetData(Id);
});

function GetData(Id){
  $.ajax({
     url: "/Home/GetEmployee/",
     type: "get",
     data: { Id:Id },
     success: function (result) {
     $('#SearchResult').html(result);
     }
   });
}

在你的主页控制器中。

public ActionResult GetEmployee(int Id)
{
   var employee= context.Employee.Where(x=> x.EmployeeId == Id)

   return this.PartialView("_NameOfPartialView", employee);
}

- Pramesh