如何在 ASP.NET Core 8 MVC 中实现一个表单，其中部分控件通过 Ajax 更新？

Question

我对 C# 和 ASP.NET MVC 完全陌生。

在我当前使用 ASP.NET Core 8 的项目中，我在更新表单控件的一部分时遇到问题。

我研究了这个问题，发现大多数人使用部分视图和 Ajax 来更新页面的部分内容（而不是表单的部分内容）。
我正在尝试做同样的事情，但是在通过 Ajax 更新表单后，我遇到了模型绑定问题。

如何解决这个问题？谢谢！

型号

public class myModel 
{
    // group ID is for drop down list value.
    // update the form if it's changed.
    public string groupID {get; set;}
    public _myPartialViewModel People {get; set;}
}

部分视图模型：

public class _myPartialViewModel 
{
    public List<Person> peopleList {get; set;}
}

人物类

public class Person 
{
    public string ID {get; set;}
    public string Name {get; set;}
    public bool isChecked {get; set;}
}

返回部分视图的方法：

public IActionResult UpdateForm(string groupID) 
{
    List<Person> people = getDataFromDB(groupID);
    _myPartailViewModel vm = new _myPartailViewModel(people);
    return PartialView("_myPartailView", vm);
}

查看

@using myModel

<form asp-action="myAction" asp-controller="myController" method="post">
    <div>
        @Html.LabelFor(m=>m.groupID)
        @Html.DropDownList("DropDownListForGroupID")
    </div>

    </div id="divToUpdated">
        <partial name="_myPartialView", for="People">
    </div>

    <button type=submit>submit</button>
</form>

局部视图

@using _myPartialViewModel

@for (int i = 0; i < Model.peopleList.count; i++) 
{
    <div>
        @Html.LabelFor(m => m.peopleList[i].Name)
        @Html.CheckBoxFor(m => m.peopleList[i].isChecked)
    </div>
}

阿贾克斯

$("#DropDownListForGroupID").on("change", function() {
    var data = $(this).val();
    $.ajax({
        type: "POST",
        url: "/myController/UpdateForm",
        data: {
            groupID: data
        },
        success: function (data) {
            $("#divToUpdated").html(data)
        },
        error: function (errMsg) {
            // do something
        }})
    });
});

文章可能有点长，感谢您的耐心等待！

Answer 1

我测试了你的代码，并进行了一些更改，如下所示，我得到的结果如下：

[HttpPost]
 public IActionResult UpdateForm(string groupID)
 {
    // List<Person> people = getDataFromDB(groupID)  // do your staff , I create data just for test
     
     List<Person> people =new List<Person>() { new Person() { ID="11",Name="AA",isChecked=true}, new Person() { ID = "22", Name = "BB" ,isChecked=true} };

     _myPartialViewModel vm = new _myPartialViewModel();
     vm.peopleList=people;       
     //_myPartailViewModel vm = new _myPartailViewModel(people);
     return PartialView("_myPartailView", vm);
 }

View：删除

<partial name="_myPartialView", for="People">

，因为我们使用：

$("#divToUpdated").html(data)

来显示partialView

 </div id="divToUpdated">
       
    </div>