Bootstrap Modal 显示空白编辑数据

Question

我正在使用模态引导程序，但即使我从 controller 传递它，我的数据也没有加载到引导程序中。

我的网格从 Notes Object 的列表中提取数据

@foreach (var notes in Model) {
    <tr>
        <td>@notes.LastModifedDate</td>
        <td>@notes.LastModifiedBy</td>
        <td>@notes.Notes </td>
        <td>

            <p>@notes.Id</p>   <a href="#" class="btn btn-success" data-id="@notes.Id" onclick="EditModal(@notes.Id)" data-toggle="modal" data-target="#NotesEditPopupPartial"><i class="glyphicon glyphicon-pencil"></i>Edit </a>

            |<p>@notes.Id</p>   <a href="#" class="btn btn-success" data-id="@notes.Id" onclick="deleteModal(@notes.Id)" data-toggle="modal" data-target="#deleteLink"><i class="glyphicon glyphicon-trash"></i>Delete </a>

        </td>
    </tr>
}

我正在使用以下内容将数据返回到弹出窗口。

 public ActionResult NotesEditPopupPartial(int id ) {
        var record = _context.MISNotes.Where(w => w.Id == id).FirstOrDefault();        
        return PartialView("NotesEditPopupPartial", record);
 }

并使用以下调用加载数据但数据不在 model 中，我编辑文本字段仍为空白。

<script>    
    var AddOrEditNotes = function (id) {           
        var url = "/MISOjbects/NotesEditPopupPartial?id=" + id;    
        $("#myModalBodyDiv1").load(url, function () {
            $("#MyEditUpateModal").modal("show");

        })    
    }
</script>

<script>
    function EditModal(id) {
        $("#editMode").val(id);
    }
</script>

我的模态

<div class="modal fade" id="NotesEditPopupPartial">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
    <a href="#" class="close" data-dismiss="modal">&times;</a>
    <h3 class="modal-title">Notes Entry</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">

    <div>
        <input type="text" name="linkId" id="linkId" />
        @using (Html.BeginForm("SaveCaseNotes", "MISObjects", FormMethod.Post, new { @id = "myNotesEditForm", @name = "myNotesEditForm", enctype = "multipart/form-data" })) {                
    <form id="myForm" asp-action="">

                     
        <div asp-validation-summary="All" class="text-danger"></div>


        @Html.LabelFor(model => model.Title)
        @Html.TextBoxFor(model => model.Title, new { @class = "form-control", @placeholder = "Title" })
        @Html.ValidationMessageFor(model => model.Title, string.Empty, new { @style = "color:red;" })


        <div class="form-group">
            @Html.LabelFor(model => model.Notes, new { @class = "col-lg-2 control-label" })
            <div class="col-lg-9">
                @Html.TextAreaFor(model => model.Notes, new { @class = "form-control", @row = 5 })
            </div>
        </div>


        @Html.LabelFor(model => model.DateActioned)
        @Html.EditorFor(model => model.DateActioned, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
        @Html.ValidationMessageFor(model => model.DateActioned)

        @Html.DisplayNameFor(model => model.LastModifiedBy)
        @Html.LabelFor(model => model.LastModifiedBy)
        <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />

        <div class="modal-footer">
            <button type="submit" id="btnEditSave" class="btn btn-primary">Save</button>

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </form>


        }
    </div>

    <div style="text-align:center;display:none" id="loaderDiv">
        <img src="~/Content/InternetSlowdown_Day.gif" width="150" />
    </div>

</div>
</div>

Answer 1

用 div 包裹你的模态：

<div id="modalWrapper">
  <div class="modal fade" id="NotesEditPopupPartial">
    ...
  </div>
</div>

然后加载并显示模态：

$("#modalWrapper").load(url, function () {
        $("#NotesEditPopupPartial").modal("show");
    })  

Answer 2

<script>    
    var AddOrEditNotes = function (id) {           
        var url = "/MISOjbects/NotesEditPopupPartial?id=" + id;    
        $("#myModalBodyDiv1").load(url, function () {
            $("#MyEditUpateModal").modal("show");

        })    
    }
</script>

<script>
    function EditModal(id) {
        $("#editMode").val(id);
    }
</script>

根据您的代码，我没有找到您在哪里调用 AddorEditNotes function 来调用 NotesEditPopupPartial 操作并显示部分，并且在 EditModel 方法中，您也没有调用操作方法来显示部分，所以，弹出模态是空白的。

在我看来，我建议你把引导模式放在主页上（带注释网格），因为触发按钮（编辑超链接）在这个页面上。 然后，在超链接点击事件中，您可以使用 JQuery Ajax 调用 action 方法并加载部分视图并将其放在 Bootstrap Modal 上。

示例代码如下：

主页中的代码：

@model IEnumerable<NetMvcSample.Models.Note>

@{
    ViewBag.Title = "ShowNotes";
}

<h2>ShowNotes</h2> 
<script>
    function EditModal(id) {
        event.preventDefault(); // prevent the hyperlink default event.
        $.ajax({
            type: "POST",
            url: "/Home/NotesEditPopupPartial", //change the url to your owns.
            data: '{id: '+ id + "}",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data)
                //put the partial view in the modal content.
                $('#myModalBodyDiv1').html(data);
            },
            failure: function (response) {
                console.log(response.responseText);
            },
            error: function (response) {
                console.log(response.responseText);
            }
        });

    }
</script>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.LastModifyDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastModifiedBy)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Notes)
        </th>
        <th></th>
    </tr>

@foreach (var notes in Model) {
    <tr>
        <td>
           @notes.LastModifyDate
        </td>
        <td>
           @notes.LastModifiedBy
        </td>
        <td>
            @notes.Notes
        </td>
        <td>
            <p>@notes.Id</p>   <a href="#" class="btn btn-success btnEdit" data-id="@notes.Id" onclick="EditModal(@notes.Id)" data-toggle="modal" data-target="#NotesEditPopupPartial"><i class="glyphicon glyphicon-pencil"></i>Edit </a>

            |<p>@notes.Id</p>   <a href="#" class="btn btn-success btnDelete" data-id="@notes.Id" onclick="deleteModal(@notes.Id)" data-toggle="modal" data-target="#deleteLink"><i class="glyphicon glyphicon-trash"></i>Delete </a>

        </td>
    </tr>
}
</table>

<div class="modal fade" id="NotesEditPopupPartial">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Notes Entry</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">


            </div>
        </div>
    </div>
</div>

controller方法中的代码：

    [HttpPost]
    public ActionResult NotesEditPopupPartial(int id)
    {
        var record = GetNotes().Where(c => c.Id == id).FirstOrDefault();
        return PartialView("NotesEditPopupPartial", record);
    } 

    public ActionResult SaveCaseNotes(Note note)
    {
        // do something
        return View();
    }

NotesEditPopupPartial 视图中的代码 (NotesEditPopupPartial.cshtml)：

@model NetMvcSample.Models.Note


@using (Html.BeginForm("SaveCaseNotes", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Note</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.LastModifyDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastModifyDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastModifyDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastModifiedBy, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastModifiedBy, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastModifiedBy, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

output 像这样：