带有局部视图的MVC模态未预先放置Editor进行模型绑定控制

Question

I have an MVC App that displays a popup Modal window to edit some data when a button is clicked. All of the mechanics seem to work. It steps through everything fine. Loads the Modal. The model as shown below is populated in the Controller

and when I step into the view code the model is clearly populated..so it passed fine...

So my confusion is why when the model loads..are all of the EditorFor fields empty./ when the model is not and the controls are bound to the model properties.

Clearly I'm missing something..I'm just not sure what...

Here is the code in my Partial View...

 @model Hybridinator.Domain.Entities.Database
<br />
<br />

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Edit Database Info</h4>
</div>
<div class="modal-body">
    @using (Html.BeginForm())
{


            <div class="form-group">
                <div id="databaselabel" >@Html.LabelFor(m => m.database, "Database")</div>
                <div id="databaseedit" >@Html.EditorFor(m => m.database )</div>
            </div>
            <div class="form-group">
                <div id="databaseserverlabel" >@Html.LabelFor(m => m.database_server, "Database Server")</div>
                <div id="databaseserveredit" >@Html.EditorFor(m => m.database_server )</div>
            </div>
            <div class="form-group">
                <div id="databaseusernamelabel" >@Html.LabelFor(m => m.database_username, "Database Username")</div>
                <div id="databaseusernameedit" >@Html.EditorFor(m => m.database_username)</div>
            </div>
            <div class="form-group">
                <div id="databasepasswordlabel" >@Html.LabelFor(m => m.database_password, "Database Password")</div>
                <div id="databasepasswordedit" >@Html.EditorFor(m => m.database_password)</div>
            </div>
            <div class="form-group">
                <div id="histdatabaselabel"> @Html.LabelFor(m => m.hist_database, "History Database")</div>
                <div id="histdatabaseedit" >@Html.EditorFor(m => m.hist_database)</div>
            </div>
            <div class="form-group">
                <div id="histdatabaseserverlabel"> @Html.LabelFor(m => m.hist_database_server, "History Database Server")</div>
                <div id="histdatabaseserveredit">@Html.EditorFor(m => m.hist_database_server)</div>
            </div>
            <div class="form-group">
                <div id="histdatabaseusernamelabel" >@Html.LabelFor(m => m.hist_database_username, "History Database Username")</div>
                <div id="histdatabaseusernameedit" >@Html.EditorFor(m => m.hist_database_username)</div>
            </div>
            <div class="form-group">
                <div id="histdatabasepasswordlabel" >@Html.LabelFor(m => m.hist_database_password, "History Database Password")</div>
                <div id="histdatabasepasswordedit" >@Html.EditorFor(m => m.hist_database_password)</div>
            </div>

}

    </div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary">Submit</button>
</div>

And here is the code in the index where the modal loads

<div class="modal fade" id="modalEditDBInfo" role="application" aria-labelledby="modalEditDBInfoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modalEditDBInfoContent" style="background-color:white; border-radius:10px; box-shadow:10px;">
            @Html.Partial("_EditDatabaseInfo")
        </div>
    </div>
</div>

The Code for the button that calls the JQuery script

<a href="#EditDatabaseButton" class="btn btn-primary" onclick="editDatabaseInfo()">Edit</a>

and the code of the script

<script type="text/javascript">
    function editDatabaseInfo() {
        var dbid = $('#database_pk').val();
        alert('function values are ' + dbid);
        $.ajax({
            url: '@Url.Action("EditDatabaseInfo", "Database")',
            type: 'GET',
            cache: false,
            data: { database_pk: dbid }
        }).done(function (result) {
            $('#modalEditDBInfoContent').html(result);
        });
        $('#modalEditDBInfo').modal('show');
    }
</script>

And LASTLY an image of the Modal after it Load..you will not none of the edit fields are prepopulated

Answer 1

Your modalEditDBInfoContent doesn't have an id = modalEditDBInfoContent. Its' the class.

$('.modalEditDBInfoContent').html(result);