Asp.net MVC更新下拉列表提交的模式弹出

Question

我有一个加载的局部视图主网页，其中使用

Html.BeginCollectionItem（“雇员”）

因为我正在使用jQuery选项卡。 （所以用户可以添加更多的员工表格）

我的员工内部部分视图有一个选择国家的下拉列表，并且它还有一个链接弹出一个模式来添加一个新的国家。在这里，我想要做的是，在提交模式并关闭模式后，我希望立即刷新下拉列表，以便用户可以看到新的更新列表。

当用户添加更多选项卡时，dropdownlist的ID是否动态更改时，如何完成此操作？

Company.cshtml：

@using (Html.BeginForm("Create", "CompanyForm", FormMethod.Post)) 
{ 
    <p>Company Info</p> 
    @Html.EditorFor(m => m.companyName, new { htmlAttributes = new { @class = "form-control" } }) 

    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-employee">Employee 1</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li> 
     </ul> 
     <div id="tabs-employee">    
      @Html.Action("Employee") 
     </div>    
    </div> 
    <button type="submit">Submit</button> 
}  

<script> 
//tab codes... 
</script> 

Employee.cshtml：

<div class="editorRow"> 
    @using (Html.BeginCollectionItem("employees")) 
{ 
    <!-- Dropdown--> 
    @Html.DropDownListFor(m => m.CountryId, (SelectList)ViewBag.CountryList, "-- Select --", new { @class = "form-control" }) 
    <!-- Link--> 
    <a href="#" class="btn btn-info btn-md" data-toggle="modal" data-target="#countryModal">Add Country</a> 
} 
</div> 

<!-- Modal --> 
<div class="modal fade" id="countryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <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" id="myModalLabel">Add Country</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="ajax-dynamic-get-data-form" /> 
     </div> 
    </div> 
</div> 
</div> 

<script> 
$('#countryModal').on('show.bs.modal', function (event) { 
var url='@Url.Action("NewEmployee")'; 
$.ajax({ 
    type: "GET", 
    url: url, 
    data: JSON, 
    cache: false, 
    success: function (data) {   
     $('#countryModal').find('.ajax-dynamic-get-data-form').html(data); 
    }, 
    error: function (err) { 
     console.log(err); 
    } 
}); 
}) 
</script> 

NewCountry.cshtml：

@{ 
    Layout = null; 
} 

@using (Html.BeginForm("PostNewCountry", "CompanyForm", FormMethod.Post, new { id = "postOfferForm" })) 
{ 

<label>Employee Name</label> 
@Html.TextBoxFor(x => x.CountryName, new { @class = "form-control" }) 


<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="submit" class="btn btn-default">Save</button> 
</div> 
} 

<script> 
$("#postOfferForm").submit(function() { 
    $.ajax({ 
     url: "/CompanyForm/PostNewCountry",    
     type: "POST", 
     data: $(this).serialize(), 
     datatype: "json", 
     success: function (response) { 
      if (response.status === "success") {     
       $('#countryModal').modal('hide'); 

      } else { 
       alert(response.errorMessage); 
       $('#countryModal').modal('hide'); 
      } 
     } 
    }); 
    return false; 
});   
</script> 

编辑

Stephen给了我一个提示来解决上述问题的另一个问题是，模式只会在tab1中弹出。我怎样才能更新所有选项卡中的下拉列表？

Answer 1

您的实施有许多问题。

首先生成重复脚本（在您的Employee.cshtml和NewCountry.cshtml部分中），并且这些脚本需要移动到主视图，因此只加载一个副本。

此外，它只是需要有一个模式窗体在主视图中创建一个新的Country，并设有按钮，在每个Employee局部打开模式（目前你只是重复了一大堆不必要的HTML和使不必要的ajax调用重复填充模式形式 - 您可以最初包含表单，或者如果您想使用ajax填充表单，请包含一个表示其是否已加载的“标志”，以便只进行一次ajax调用）

要与所添加的新Country选项更新dropdownlists，然后给一个类别名称

@Html.DropDownListFor(m => m.CountryId, ... new { @class = "form-control country" }) 

然后在您的ajax成功回调中更新每个现有的下拉菜单。您还没有显示你的PostNewCountry()方法返回，但假设它返回新Country的只是ID，然后

success: function (response) { 
    var name = $('#CountryName').val(); // assumes you have only one modal form 
    var countries = $('.country'); 
    $.each(countries, function(index, item) { 
     var option = $('<option></option>').val(response).text(name); 
     $(this).append(option); 
    } 
} 

你的第二个问题（模态仅在TAB1弹出）是的结果全部重复id属性，这是无效的HTML。这将通过如上所述的仅具有一个模式来解决，但是对于您当前的实现，您需要移除id属性并使用类名来代替。当您在jQuery中使用id选择器时，它只会选择第一个与id，因此$('#countryModal').on(...和$("#postOfferForm").submit(...都不会正常工作。