MVC部分视图从ajax成功更新(MVC partial view update from ajax success)

MVC部分视图从ajax成功更新(MVC partial view update from ajax success)

在视图的主页面上，用户选择一个项目，该选择用数据填充局部视图（首先调用它）。 在该局部视图中，用户还可以选择在前一个下方提供编辑局部视图的项目。 这里可以添加，更新或删除新项目。 问题是：当添加新项目时，应更新第一个局部视图。 我试图实现它的方法是这样的：

function addBottle() { var code = $("#Code").val(); var desc = $("#Description").val(); var id = $("#ProjectId").val(); $.ajax({ url: "@Url.Action("AddBottleType", "Managers")", data: { code: code, desc: desc, id: id }, type: "POST", datatype: "text", success: function (data) { if (typeof data == "undefined") { alert("Something went wrong. Sorry!"); } if (data.Success) { $.alert(data.Data, "Success!"); $.ajax({ url: "@Url.Action("BottleTypes", "Managers")", data: { projectId: id }, type: "GET", datatype: "text", }); } else { $.alert(data.Data, "Warning!"); } } }); };

这为我提供了控制器中的数据，但视图未更新。 可能这不是最好的方法，我打开建议，解决方案。 我也做了我的部分，google和stackoverflow是我的朋友，但没有一个解决方案有效。

On the main page in the view the user selects a project and that selection fills up a partial view (call it first partial) with data. In this partial view the user can also select an item which provides an editing partial view under below the previous one. Here a new item can be added, updated or deleted. The question is: when a new item added the first partial view should be updated. The method how I am trying to achieve it is like this:

function addBottle() { var code = $("#Code").val(); var desc = $("#Description").val(); var id = $("#ProjectId").val(); $.ajax({ url: "@Url.Action("AddBottleType", "Managers")", data: { code: code, desc: desc, id: id }, type: "POST", datatype: "text", success: function (data) { if (typeof data == "undefined") { alert("Something went wrong. Sorry!"); } if (data.Success) { $.alert(data.Data, "Success!"); $.ajax({ url: "@Url.Action("BottleTypes", "Managers")", data: { projectId: id }, type: "GET", datatype: "text", }); } else { $.alert(data.Data, "Warning!"); } } }); };

This gives me the data in the controller, but the view is not updated. Probably this is not the best way, I am open the suggestions, solutions. I've also done my part, google and stackoverflow is my friend, but none of the solutions worked.

最满意答案

你需要将它加载到你的div中。 像这样的东西。 检查控制器操作是否成功，因此您无需在前端执行Success（）：

function addBottle() { var code = $("#Code").val(); var desc = $("#Description").val(); var id = $("#ProjectId").val(); $.ajax({ url: "@Url.Action("AddBottleType", "Managers")", data: { code: code, desc: desc, id: id }, type: "POST", datatype: "text", success: function (data) { if (typeof data == "undefined") { alert("Something went wrong. Sorry!"); } if (data.Success) { $.alert(data.Data, "Success!"); $("#bottleTypes").load("/Managers/BottleTypes", { projectId: id }); } else { $.alert(data.Data, "Warning!"); } } }); };

You need to load it into your div. Something like this. Check for success in your controller action so you need not do Success() in the front end:

function addBottle() { var code = $("#Code").val(); var desc = $("#Description").val(); var id = $("#ProjectId").val(); $.ajax({ url: "@Url.Action("AddBottleType", "Managers")", data: { code: code, desc: desc, id: id }, type: "POST", datatype: "text", success: function (data) { if (typeof data == "undefined") { alert("Something went wrong. Sorry!"); } if (data.Success) { $.alert(data.Data, "Success!"); $("#bottleTypes").load("/Managers/BottleTypes", { projectId: id }); } else { $.alert(data.Data, "Warning!"); } } }); };