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(...都不會正常工作。