jQuery 您可以只更新部分视图而不是整页帖子吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15146212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you just update a partial view instead of full page post?
提问by Rayshawn
Is there a way to submit a partial view form in asp.net mvc without reloading the parent page, but reloading the partial view only to its new state? Similar to how knockout.js updates using data-bind.
有没有办法在asp.net mvc 中提交局部视图表单而不重新加载父页面，但只将局部视图重新加载到其新状态？类似于knockout.js 使用数据绑定更新的方式。
My data table renders with a variable number of columns/names so I don't think knockout.js is an option for this one, so I am trying to use a partial view instead.
我的数据表使用可变数量的列/名称呈现，所以我不认为 Knockout.js 是这个选项的一个选项，所以我尝试使用局部视图。
回答by mattytommo
Not without jQuery.
不是没有 jQuery。
What you would have to do is put your Partial in a div, something like:
您需要做的是将您的 Partial 放在一个 div 中，例如：
<div id="partial">
@Html.Partial("YourPartial")
</div>
Then, to update (for example clicking a button with the id button), you could do:
然后，要更新（例如单击带有 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);
}
});
})
Then your action would look something like:
那么您的操作将类似于：
public ActionResult GetData(YourModel model) //that's if you need the model
{
//do whatever
return View(model);
}
回答by Dave Alperovich
Actually, if your Partial has a child action method, you can post (or even use an anchor link) directly to the child action and get an Ajax-like affect. We do this in several Views.
实际上，如果您的 Partial 有一个子动作方法，您可以直接发布（甚至使用锚链接）到子动作并获得类似 Ajax 的效果。我们在几个视图中这样做。
The syntax is
语法是
@Html.Action("MyPartial")
The Child Action is
子动作是
public ActionResult MyPartial()
{
return PartialView(Model);
}
If your form posts to the child action
如果您的表单发布到子操作
@using (Html.BeginForm("MyPartial"))
{
? ? ...
}
The Partial View will be updated with the partial view returned from the child action.
局部视图将使用从子操作返回的局部视图进行更新。
Jquery is still a legitimate way to update a partial. But technically, the answer to your question is YES.
Jquery 仍然是更新部分的合法方式。但从技术上讲，您的问题的答案是肯定的。
回答by Deathstalker
As normal what I find when looking for things like this is people give too limited information so I will attempt to help here. The key is to set up a div with an ID you can append the return html to. Also when hitting your controller make sure it returns the partial. There are some potential problems with this method but on a good day it should work.
通常我在寻找这样的东西时发现人们提供的信息太有限，所以我会尝试在这里提供帮助。关键是设置一个带有 ID 的 div，您可以将返回的 html 附加到其中。此外，当点击您的控制器时，请确保它返回部分。这种方法有一些潜在的问题，但在美好的一天它应该可以工作。
<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");
}
}
回答by Stokes
I would use the Ajax Form helper for such scenarios using a partial view and @html.RenderPartial("partialName") partial helpers
我会使用 Ajax Form helper 来使用局部视图和 @html.RenderPartial("partialName")局部助手来处理这种情况
回答by Pramesh
In your Main View
在您的主视图中
@Html.Partial("_NameOfPartialView", Model)
<input type="button" id="btnSubmit" value="Submit">
In your Javascript file
在您的 Javascript 文件中
$('#btnSubmit').click(function () {
GetData(Id);
});
function GetData(Id){
$.ajax({
url: "/Home/GetEmployee/",
type: "get",
data: { Id:Id },
success: function (result) {
}
});
}
In your Home Controller
在您的家庭控制器中
public ActionResult GetEmployee(int Id)
{
var employee= context.Employee.Where(x=> x.EmployeeId == Id)
return this.PartialView("_NameOfPartialView", employee);
}
