MVC 6使用ajax將模型從視圖傳遞到控制器到部分視圖

Question

我想要做的是創建一個可以在所有不同視圖中使用的gui對象。 我們的想法是通過將組件放入占位符div來將組件添加為主視圖的局部視圖。

這是我的模特

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

我用來插入組件的java腳本...理想情況下，我更喜歡使用通過直接調用傳遞給此視圖的模型數據，但這不起作用，這就是為什么我一直在進行故障排除下面的var模型......

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>

代碼顯示沒有錯誤，但頁面上沒有任何內容呈現。 有誰看到我做錯了什么？ 另外，有沒有辦法只使用傳遞的模型而不必重新創建數據？

提前致謝

Answer 1

您的ajax成功處理程序正在嘗試將結果設置為$("#clientProgramSelectorPlaceholder")返回的jQuery元素。 這將返回Id值為“clientProgramSelectorPlaceholder”的元素。 但是你的HTML，你沒有！ 你擁有的是一個帶有"#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);
});