在模式更新后如何刷新父索引的部分视图以添加新信息？

Question

我确定之前有人问过这个问题，我不认为我的情况有什么特别之处，但让我解释一下。我有我的索引视图（父），在那个索引视图上有一个部分视图数据集联系人“链接”（子），我有一个添加联系人按钮，它弹出一个模式并允许我提交表单数据以添加到数据库，当我 return 我只想刷新链接的部分视图。注意：下面的 Controller Action Dataset_Contacts 需要触发才能刷新局部视图（子视图）。这可能不言而喻，但我没有看到我当前的代码发生这种情况。如有任何帮助，我们将不胜感激。

在我的索引视图上 index.cshtml 我有以下代码来呈现我的部分视图

 <div class="section_container2">
                        @{ Html.RenderAction("Dataset_Contacts", "Home"); }
                    </div>

这是控制器：

[ChildActionOnly]
        public ActionResult Dataset_Contacts()
        {
            // Retrieve contacts in the Dataset (Contact)
            //Hosted web API REST Service base url  
            string Baseurl = "http://localhost:4251/";
           
            var returned = new Dataset_Contact_View();
            var dataset = new Dataset();
            var contacts = new List<Contact>();
            var contact_types = new List<Contact_Type>();

            using (var client = new HttpClient())
            {
               
                dataset = JsonConvert.DeserializeObject<Dataset>(datasetResponse);
 
                contact_types = JsonConvert.DeserializeObject<List<Contact_Type>>(ContactTypeResponse);

                // Set up the UI
                var ds_contact = new List<ContactView>();
                foreach (Contact c in dataset.Contact)
                {
                    foreach (Contact_Type t in contact_types)
                    {
                        if (c.Contact_Type_ID == t.Contact_Type_ID)
                        {
                            var cv = new ContactView();
                            cv.contact_id = c.Contact_ID;
                            cv.contact_type = t.Description;
                            returned.Dataset_Contacts.Add(cv);
                        }
                    }
                }

            }
                     
                    return PartialView(returned);
        }

这是我的局部视图Dataset_Contacts.cshtml

 @model ResearchDataInventoryWeb.Models.Dataset_Contact_View
<table>
    @{
        var count = 1;

        foreach (var ct in Model.Dataset_Contacts)
        {
            if (count == 1)
            {
                @Html.Raw("<tr>")
                @Html.Raw("<td>")
                <a href="#" onclick="ViewContact(@ct.contact_id);"><span class="link" style="margin-left:10px;">@ct.contact_type</span></a>
                @Html.Raw("</td>")
                count++;
            }

            else if (count == 2)
            {
                @Html.Raw("<td>")

                <a href="#" onclick="ViewContact(@ct.contact_id);"><span class="link" style="margin-left:300px;">@ct.contact_type</span></a>
                @Html.Raw("</td>")

                @Html.Raw("</tr>")
                count = 1;

            }
        }

    }

</table>

我的 Index.cshtml 上还有我的“添加联系人”按钮，它会弹出一个模态

  <div style="float:right;">
                            <a href="#" onclick="AddContact();"><span class="link" style="padding-right:5px;">Add</span></a>
                        </div>

jquery 对于模态：

var AddContact = function () {

        var url = "../Home/AddContact"
        $("#myModalBody").load(url, function () {
            $("#myModal").modal("show");
        })


    };

AddContact 的控制器操作

 public ActionResult AddContact()
        {
            return PartialView();
        }

模态 AddContact.cshtml

@model ResearchDataInventoryWeb.Models.Contact
<form id="contactForm1">
    <div class="section_header2">Contact</div>
    <div style="padding-top:5px;">
        <table>
            <tr>
                <td>
                    <span class="display-label">UCID/Booth ID</span>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.Booth_UCID, new { placeholder = "<Booth/UCID>", @class = "input-box" })
                </td>
            </tr>
            <tr>
                <td>
                    <span class="display-label">Type</span>
                </td>
                <td>
                    <select class="input-box" id="contact_type">
                        <option value="contact_type">Contact Type*</option>
                        <option value="dataset_admin">Dataset Admin</option>
                        <option value="dataset_Provider">Dataset Provider</option>
                        <option value="department">Department</option>
                        <option value="external_collaborator">External Collaborator</option>
                        <option value="principal_investigator">Principal Investigator</option>
                        <option value="research_center">Research Center</option>
                        <option value="vendor">Vendor</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="display-label">Name</span>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.First_Name, new { placeholder = "<First Name>", @class = "input-box-modal" })
                    @Html.TextBoxFor(model => model.Last_Name, new { placeholder = "<Last Name>", @class = "input-box-modal" })
                </td>
            </tr>
            <tr>
                <td>
                    <span class="display-label">Email</span>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.Email, new { placeholder = "<Email 1>", @class = "input-box-modal" })
                    @Html.TextBoxFor(model => model.Email_2, new { placeholder = "<Email 2>", @class = "input-box-modal" })
                </td>
            </tr>
            <tr>
                <td>
                    <span class="display-label">Phone</span>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.Phone_Number, new { placeholder = "<Phone 1>", @class = "input-box-modal" })
                    @Html.TextBoxFor(model => model.Phone_Number_2, new { placeholder = "<Phone 2>", @class = "input-box-modal" })
                </td>
            </tr>
            <tr>
                <td>
                    <span class="display-label">Job Title</span>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.Title_Role, new { placeholder = "<Job Title>", @class = "input-box" })
                </td>
            </tr>
            <tr>
                <td>
                    <span class="display-label">Organization</span>
                </td>
                <td>
                    <input class="input-box" type="text" placeholder="<Organization>" />
                </td>
            </tr>

        </table>
        <div style="padding-left:10px; margin-top:10px;">
            <textarea rows="3" placeholder="Notes"></textarea>
        </div>
    </div>
    <div class="centerButton" style="margin-top: 30px;">
        <div style="margin-left:30px">
            <submit id="btnSubmit" class="btn btn-default btn-sm" style="padding:14px"><span class="smallText_red" style="padding:30px">SAVE</span></submit>
        </div>
        <div style="margin-left:30px">
            <submit class="btn btn-default btn-sm" style="padding:14px"><span class="smallText_red" style="padding:30px">REMOVE</span></submit>
        </div>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            var frm = $('#contactForm1').serialize()
             
            $.ajax({

                type: "POST",
                url: "/Home/AddContact/",
                data: frm,
                success: function () {
                    $("#myModal").modal("hide");
                }
            })

        })
    })

</script>

最后是 [HttpPost] AddContact（联系人数据）

的操作

[HttpPost]
    public ActionResult AddContact(Contact data)
    {

        // Update the Database here
        return View();
    }

Answer 1

我的解决方案：

1.将 ActionResult 更改为 JsonResult

    {
        // Update the Database code
        // END

        return Json(new
        {
           dbUpdateResult = "success"                
        });
        
    }

2。在 Ajax:

//Ajax code
...

success: function (ajaxRespond) {
   if(ajaxRespond.dbUpdateResult == "success"){
     $("#myModal").modal("hide");
     reloadTable()
   }             
}

那你可以用1:

function reloadTable(){
  $('#CONTAINER_ID').load('@Url.Action("Dataset_Contacts", "Home")');
}

或2:

function reloadTable(){
  let myurl = '@Url.Action("Dataset_Contacts", "Home")';
  $.ajax({
    type: "GET",
    url: myurl,           
    success: function (data, textStatus, jqXHR) {                            
        $("#CONTAINER_ID").html(data);
    },
    error: function (requestObject, error, errorThrown) {  
        console.log(requestObject, error, errorThrown);
        alert("Error: can not update table")
    }
  });
}

因此，您在 dbupdate 成功后重新加载了局部视图。请告诉我，如果我错了...

在模式更新后如何刷新父索引的部分视图以添加新信息？

How can I refresh my partial view on my parent index after a modal update to add new information?

ajax

model-view-controller

partial-views