c# - 如何使用 AJAX 在 ASP MVC 中删除 DropDownList 中的项目

Question

我正在使用 C# 和 SQL Server 2005 开发一个 ASP .Net MVC 3 应用程序。

在一个视图中，我有一个 DropDownList，一个按钮。

如何使用AJAX 为每次单击按钮从 DropDownList 中删除一个项目。

我确实使用了 JQuery，但它给我带来了问题。事实上，按钮不再能够提交（在列表中保存一些值）。

编辑 ：

部分视图 Gestion：

<%@  Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication2.Models.FlowViewModel>" %>

<% using (Html.BeginForm("Save", "ProfileGa")) { %>
    <%: Html.ValidationSummary(true) %>
    <fieldset class="parametrage">
        <legend>Gestion de Gamme</legend>

    <div>
    <%:Html.Label("Poste :")%><%: Html.DropDownListFor(model => model.SelectedPoste, Model.PostesItems, new { @id = "poste" })%>
    <input type="checkbox" name="option1" value="Poste Initial" id= "chkMain" onclick="test();"/>Poste Initial
    <input type="checkbox" name="option2" value="Poste Final" id= "chkFirst" onclick="test2();"/>Poste Final
    </div>


     <div>
     <%:Html.Label("Nombre de Passage :")%><%: Html.EditorFor(model=>model.Nbr_Passage)%>
     </div>
     <div class="editor-field">
      <%: Html.ValidationMessageFor(model => model.Nbr_Passage)%>
      </div>

    <div>
    <%:Html.Label("Position :")%><%: Html.EditorFor(model=>model.Position)%>
    </div>

   <%-- <div>
   <%:Html.Label("Poste Précédent :")%><%: Html.DropDownListFor(model => model.PostePrecedentSelected, Model.PostesItems)%>
   </div>--%>

    <div>
    <%:Html.Label("Poste Suivant :")%><%: Html.DropDownListFor(model => model.PosteSuivantSelected, Model.PostesItems, new { @id = "dd" })%>
    <input type="button" value="Ajouter" id="add"  onclick="addtext()"/>



   <textarea ID="ta" cols="10"  name="S1" rows="8" readonly="true"></textarea>
    </div>


    <div>
    <input type="submit" value="Enregistrer" id="btnSave"   />
    </div>

    </fieldset>

    <script type="text/javascript">

        function test() {
            var chkMain = document.getElementById('chkMain');
            var chkFirst = document.getElementById('chkFirst');


            if (chkMain.checked) {
                chkFirst.disabled = 'disabled';


            }
            else {
                chkFirst.disabled = false;

            }
        }

</script>

 <script type="text/javascript">

     function test2() {
         var chkMain = document.getElementById('chkMain');
         var chkFirst = document.getElementById('chkFirst');
         var dd = document.getElementById('dd');
         var ta = document.getElementById('ta');
         var add = document.getElementById('add');

         if (chkFirst.checked) {
             chkMain.disabled = 'disabled';
             dd.disabled = 'disabled';
             ta.value = "Poste0";
             add.disabled = 'disabled';


         }
         else {
             chkMain.disabled = false;
             dd.disabled = false;
             ta.value = "";
             add.disabled = false;
         }
     }

</script>
<script language="javascript" type="text/javascript">
    var storedValues = [];
    function addtext() {

        var dd = document.getElementById('dd');
        var ta = document.getElementById('ta');
        var add = document.getElementById('add');

            var selectedValue = dd.options[dd.selectedIndex].value + " ";
            if (storedValues.indexOf(selectedValue) === -1) {
                storedValues.push(selectedValue)
                ta.value = storedValues.join('')
            }


    }
</script>


<script type="text/javascript">
    $(function () {
        $('#btnSave').click(function () {
            $('#poste option:selected').remove();
            return false;
        });
    });
</script>

        <% } %>

视图索引：

<% using (Html.BeginForm("Save", "ProfileGa"))
   { %>

  <div><%:Html.Label("Gamme :")%><%: Html.DropDownListFor(model => model.SelectedProfile_Ga, new SelectList(Model.Profile_GaItems, "ID_Gamme", "ID_Gamme"), new { @id = "gg" })%> 
  <input type="button" value="Configurer" id="btnShowGestion" onclick="GamDis()"/>
  <input type="button" value="Appliquer" id="appliquer" onclick="window.location = 'ProfileGa/Application'"/>
  </div> 

   <div id="divGestion">
   <%: Html.Partial("Gestion", Model) %>
   </div>

       <% } %> 

<form id="form1" runat="server">
<fieldset>
<legend>Liste des Gammes</legend>


 </fieldset>
 </form>
 <input type="button" value = "Valider" /> 
 <script type="text/javascript">

     $(document).ready(function () {

         $('#btnShowGestion').click(function () { $('#divGestion').slideToggle("slow") });

     });

</script>
 <script type="text/javascript">

     function GamDis() {

         var gg = document.getElementById('gg');
         var bb = document.getElementById('btnShowGestion');

         if (gg.disabled) {
             gg.removeAttribute("disabled");
         } else {
             gg.disabled = 'disabled';
         }
     }
    </script>   
</asp:Content>

这是控制器中方法保存的代码：

[HttpPost]
        public ActionResult Save(FlowViewModel model)
        {
            Console.WriteLine("" + model.Nbr_Passage);
            if (ModelState.IsValid)
            {

                Gamme G = new Gamme();
                G.ID_Gamme = model.SelectedProfile_Ga;
                G.ID_Poste = model.SelectedPoste;
                //G.Last_Posts = model.PostePrecedentSelected;
                G.Next_Posts = model.PosteSuivantSelected;
                G.Nbr_Passage = int.Parse(model.Nbr_Passage);
                G.Position = int.Parse(model.Position);

                ((List<Gamme>)System.Web.HttpContext.Current.Session["GammeList"]).Add(G);
                var list = ((List<Gamme>)System.Web.HttpContext.Current.Session["GammeList"]);


            }
            return RedirectToAction("Index");
                   }