模态弹出窗口打开部分视图

时间:2021-02-18 16:12:54

标签: asp.net-mvc asp.net-ajax

我在 index.cshtml 页面中有一个表格,我想单击 Notes 列中的链接来触发 AJax 调用以打开部分视图 editNotes.cshtml 并提交文本以更新控制器操作“UpdateNotes”。现在,当我单击“编辑”链接时,表单会变灰,并且不会显示弹出的对等视图。当我查看调试器窗口时,我可以看到数据 html 被传递到 $('#modalWrapper').html(data);请帮忙看看是什么问题。谢谢。 索引.cshtml

 ...
 <td class="Notes">

                @Html.DisplayFor(modelItem => item.Notes)
                <a href="#" onclick="editNotes(@item.id)" class="btn btn-primary" data-toggle="modal" data-target="#modalWrapper">Edit</a></td>

...
//modal window

<div id="modalWrapper" class="modal">
</div>

//_UpdateNotes.cshtml

@model NameSpace.Models.myTableModel
@using (Html.BeginForm())
{
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="text" id="Notes" value="@Model.Notes" />
                        <input type="submit" />
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
 </div>

}

custom.js

function editNotes(id) {
$.ajax({
    url: '/Admin/UpdateNotes/'+id, // The method name + paramater
    
    success: function (data) {
      
        $('#modalWrapper').html(data); //  html (the partial view)
        $('#editModal').modal();
       
    }
});
}

管理控制器

[HttpGet] // this action result returns the partial containing the modal
    public ActionResult UpdateNotes(int id)
    {
        var viewModel = new myTableModel ();
        viewModel.id = id;
        return PartialView("_UpdateNotes", viewModel);
    }
    [HttpPost]
    public ActionResult UpdateNotes(myTableModel model)
    {
        using (DbContextModel db = new DbContextModel())
        {
            if (ModelState.IsValid)
            {
                 myTableModel C = db.myTableModel.Where(x => x.id == model.id).Single<myTableModel>();
                 C.Notes = model.Notes;
                db.SaveChanges();
            }
            return View("Index");
        }
    }

0 个答案:

没有答案
相关问题