PopUp Modal ASP.NET Core MVC 中的预填充表单

Question

我正在尝试使用弹出模式来编辑 ASP.NET Core MVC 上的记录。我没有成功用编辑功能上的现有记录预填充模态表单。 下面是我的简单模型：

public class Student
{
    public int StudentId {get;set;}
    public string Name {get;set;}
}

我在控制器上放了一个对象列表只是为了举例。下面是我的控制器：

public Home: Controller
{
    public static List<Student> studentList = new List<Student>()
    {
        new Student {StudentId = 1, Name = "John"},
        new Student {StudentId = 2, Name = "Doe"},
    };

    public IActionResult Index
    {
        return View(studentList);
    }

    public IActionResult Find(int id)
    {
        var student = studentList.Where(x => x.StudentId == id).FirstOrDefault();
        return new JsonResult(student);
    }

    [HttpPost]
    [Route("updateStudent")]
    public IActionResult updateStudent(int id, int name)
    {
        var student = studentList.Where(x => x.StudentId == id).FirstOrDefault();
        studentList.RemoveStudent();
        var newStudent = new Student{StudentId = id, Name=name};
        studentList.Add(newStudent);

        return RedirectToAction("Index");
    }
}

在我看来，我正在使用 Jquery、ajax 和 bootstrap 作为我的模态。以下是我的部分观点：

<script type="text/javascript">
    $(document).ready(function(){
        $('[data-google="tooltip"]').tooltip();

        $('table .edit').on('click', function () {
            var id = $(this).parent().find('.id').val();
            $.ajax({
                type: 'GET',
                url: '/Home/Find/' + id,
                success: function(student) 
                {
                     $('#editStudentModal #id').val(student.StudentId);
                     $('#editStudentModal #id').val(student.Name);
                }
            })
        })
    });
</script>

<table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>StudentId</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                 @Html.DisplayFor(modelItem => item.StudentId)
                            </td>
                            <td>
                                 @Html.DisplayFor(modelItem => item.Name)
                            </td>
                            <td>
                                <a href="#editStudentModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                                <input type="hidden" class="id" value="item.id" />
                            </td>
                        </tr>
                    }
                </tbody>
            </table>


<!--Edit Modal Html-->
    <div id="editStudentModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" asp-controller="Home" asp-action="updateStudent">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Student</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                            <div class="form-group">
                                <label>Id</label>
                                <input type="text" class="form-control" required="required" name="id" />
                            </div>
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" class="form-control" required="required" name="name" />
                            </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
                        <input type="Submit" class="btn btn-info" value="Save" />
                        <input type="hidden" id="id" name="id" />
                    </div>
                </form>
            </div>
        </div>
    </div>

但是当我点击编辑按钮时，它会弹出模式，但它没有预先填充所选记录。任何人都可以帮助 mt 解决这个问题吗？我怀疑我的 ajax 有问题。

谢谢

Answer 1

一种解决方案是将应在对话框中显示的 HTML 部分移动到 PartialView。

用[HttpGet]在控制器中插入一个新方法，返回

// var model = create the view model based on the parameters you passed into the controller method and pass it to the PartialView.
return PartialView("YourPartialViewName", model);

在Ajaxdone或success事件中，可以使用

$('#IdOfTheContainerWhereThePartialViewShouldBeRendered').html(student);

Answer 2

您可以随时按 F12 来检查开发工具以找出错误所在。在您的情况下，有几个错误。

1.<input type="hidden" class="id" value="item.id" />

您需要使用@item.id 或@item.StudentId（基于演示）来获取代码中缺少@ 的值。

2.$('#editStudentModal #id').val(student.StudentId);

那么你可以在ajax成功中使用console.log(student)来检查返回的json：

{studentId: 1, name: "John"}

因此，您需要使用student.studentId 而不是student.StudentId。

3.此外，由于您使用$('#editStudentModal #id')，它会找到id="id"，但您只设置name="id"，在输入中添加id或使用以下代码查找元素：

$('#editStudentModal input[name="id"]').val(student.studentId);
$('#editStudentModal input[name="name"]').val(student.name);

完整代码

@model List<Student>

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>StudentId</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.StudentId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    <a href="#editStudentModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                    <input type="hidden" class="id" value="@item.StudentId" />
                </td>
            </tr>
        }
    </tbody>
</table>


<!--Edit Modal Html-->
<div id="editStudentModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" asp-controller="Home" asp-action="updateStudent">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Student</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Id</label>
                        <input type="text" class="form-control" required="required"  name="id" />
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" required="required"  name="name" />
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
                    <input type="Submit" class="btn btn-info" value="Save" />
                    <input type="hidden" id="id" name="id" />
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $('[data-google="tooltip"]').tooltip();

            $('table .edit').on('click', function () {
                var id = $(this).parent().find('.id').val();
                $.ajax({
                    type: 'GET',
                    url: '/Home/Find/' + id,
                    success: function (student) {
                        console.log(student);
                        $('#editStudentModal input[name="id"]').val(student.studentId);
                        $('#editStudentModal input[name="name"]').val(student.name);
                    }
                })
            })
        });
    </script>

}

结果：