Предварительно заполненные формы в PopUp Modal ASP. NET Core MVC - PullRequest
Новая
       60

Предварительно заполненные формы в PopUp Modal ASP. NET Core MVC

0 голосов
/ 16 марта 2020

Я пытаюсь использовать всплывающее модальное окно для редактирования записи на 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.

Спасибо

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Вы всегда можете нажать F12, чтобы проверить инструменты разработчика, чтобы найти ошибку. В вашем случае есть несколько ошибок.

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

Вам необходимо использовать @item.id или @item.StudentId (на основе демонстрации), чтобы получить значение, пока вы пропускаете @ в коде.

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

Тогда вы можете использовать console.log(student) в ajax успешно, чтобы проверить возвращаемое 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>

}

Результат:

enter image description here

0 голосов
/ 16 марта 2020

Одним из решений является перемещение части 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);

В событии Ajax done или success вы можете использовать 

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