MVC 6使用ajax从视图将模型传递到控制器再到部分视图

Question

MVC 6使用ajax从视图将模型传递到控制器再到部分视图

4

我将尝试创建一个 GUI 对象，可在所有不同的视图中使用。思路是通过将组件放置到占位符 DIV 中，在主视图中添加该组件作为局部视图。

以下是我的模型：

    public class Client
    {
        public int clientid { get; set; }
        public string clientname { get; set; }
    }

我使用的JavaScript用于插入组件...

理想情况下，我更愿意直接调用传递给此视图的模型数据，但是那并没有生效，这就是为什么我一直在使用下面的变量model进行故障排除的原因...

var model = {
    clientid: 23,
    clientname: "This one"
};
$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "../shared/ClientProgramSelector",
    contentType: "application/json"
}).done(function(result) {
    $("#clientProgramSelectorPlaceholder").html(result);
});

被调用的控制器在这里。

[HttpPost]
public PartialViewResult ClientProgramSelector([FromBody] Client passingData )
{
    return PartialView("ClientProgramSelector", passingData);
}

最后，这是我试图将组件放入的div

<div id="#clientProgramSelectorPlaceholder"></div>

代码没有显示错误，但页面上没有任何东西。有人看到我做错了什么吗？此外，是否有一种方法只使用传递的模型而无需重新创建数据？谢谢！

- William Tarte

尝试将“完成”替换为“成功”，并在您的AJAX调用中添加一个“错误”函数。 - Jeff P.

这个 ajax 调用成功了吗？它返回的是 200 OK 还是 404？如果是 404，你应该修复你的 URL。 - Shyju

调用成功了，我只是id写错了。那是一个愚蠢的错误。但是，我仍然想知道是否可以直接在ajax调用中传递viewmodel，谢谢。 - William Tarte

不要更改您的问题并使答案无效（我已回滚您的更改）。 - user3559349

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shyju · Accepted Answer

你的ajax成功处理程序试图将结果设置为由 $（“＃clientProgramSelectorPlaceholder”）返回的jQuery元素。这将返回Id值为“ clientProgramSelectorPlaceholder”的元素。但是在你的HTML中，你没有任何元素！你有的是一个带有Id “clientProgramSelectorPlaceholder”的元素。

你的div id应该没有#，只要你的ajax调用返回200 OK响应，它就可以正常工作。

<div id="clientProgramSelectorPlaceholder"></div>

如果您想使用传递给主视图的模态数据呈现部分视图，您可以调用Html.Partial方法。假设您的主视图也是强类型到相同的视图模型(Client)对象。

@model Client 

<div id="clientProgramSelectorPlaceholder">
  @Html.Partial("ClientProgramSelector",Model)
</div>

如果你想将原始模型作为ajax post数据传递，可以在javascript代码块中使用JsonConvert.SerializeObject方法。

var model = @Html.Raw(JsonConvert.SerializeObject(Model));
$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "@Url.Action("ClientProgramSelector","YourControllerNameHere")",
    contentType: "application/json"
}).done(function(result) {
    $("#clientProgramSelectorPlaceholder").html(result);
});