0

I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.

In a view, I have a DropDownList, a button.

How can I remove an item from the DropDownList for each click of the button using AJAX.

I did using JQuery but it cause me a problem. Infact, the button don't be able to submit (save some values in a list) anymore.

EDIT :

The Partial View 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>

        <% } %>

The View Index :

<% 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>

and this is the code of methode save in the controller :

[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");
                   }
16
  • 1
    Where is your code to save? It won't be posting back since you have returned false on the JS function. Commented May 24, 2013 at 12:39
  • @KingCronus sorry i forgot it,,,check my edit please and about the false , i know but if i delete it,,the page reload itself and the item of dropdownlist will not removed (which is the purpose of the function as you see) Commented May 24, 2013 at 12:43
  • So what is your expected behaviour? You want the button to remove an item sure...but then what? Commented May 24, 2013 at 12:45
  • infact, the script and the save action didn't works together. When, i delete the script, the button works perfectly and save values in a list. When, i add the script, the script works perfectly and the button remove an item from the dropdownlist without reloading the page but the submit is no more working Commented May 24, 2013 at 12:51
  • 1
    the two cancel each other out that's why you get that behavior. you need an async call to your code so the page doesn't reload. the solution is not to remove the item with jquery like you did above because then your save method will not be called. I hope that clears it for you a little Commented May 24, 2013 at 12:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.