Verwenden von AJAX zum Zurücksenden von SelectList-Wert

Question

Auf die Gefahr hin, das Offensichtliche zu fragen ... Ich muss AJax.ActionLink verwenden, um den aktuellen Wert einer SelectList an meinen Controller zu senden. Wie mache ich das?

Unten ist ein Teil meiner aktuellen Ansicht. Ich muss "15" durch den aktuellen Wert der SelectList ersetzen.

<% If Model.ShoppingListNames IsNot Nothing Then%> 
    <%: Html.DropDownList("ShoppingListNames", Model.ShoppingListNames)%> 
    <%: Ajax.ActionLink("Add to List", "AdjustMaterials", "Docs", 
         New With {.userDocId = 15, .prodId = Model.ID, .quantity = 1}, 
         New AjaxOptions With {.OnSuccess = "handleUpdate"})%> 
<% End If%> 

die „Antwort“ Mit Ajax.BeginForm statt Ajax.ActionLink zu verwenden, unten ist ein Teil der Ansicht I mit endete.

 <% If Model.ShoppingListNames IsNot Nothing Then%> 
      <% Using Ajax.BeginForm("AdjustMaterials", "Docs", New With {.prodId = Model.ID}, New AjaxOptions With {.UpdateTargetId = "result-message"})%> 
       <%: Html.DropDownList("userDocId", Model.ShoppingListNames)%> 
       <input value ="Add to List" type ="submit"/> 
      <% End Using%> 
      <div id="result-message"></div> 
     <% End If%> 

Und unten ist der Controller. Beachten Sie, dass der Parameter prodId im Aufruf von Ajax.BeginForm angegeben ist, der Parameter userDocId jedoch vom aktuellen Wert der SelectList im Formular angegeben wird.

<HttpPost()> 
Function AdjustMaterials(ByVal userDocId As Integer, ByVal prodId As Integer, 
    Optional ByVal quantity As Integer = 1, Optional ByVal itemTag As String = Nothing) As ActionResult 

' Do stuff... 
End Function 

Answer 1

Eine Möglichkeit, dies zu erreichen, besteht darin, die Dropdown-Liste in ein AJAX-Formular einzufügen und den AJAX-Lin zu ersetzen k mit Senden-Button. Wenn die Schaltfläche angeklickt wird, wird die erstellte Aktion mit AJAX an die gewünschte Aktion gesendet.

Answer 2

Das Beste ist Jquery zu verwenden, etwa so:

$(document).ready(function() { 
    $('#ShoppingListNames').change(function() { 
    var value = $('#ShoppingListNames > option:selected').attr('Value'); 
    if(value != '') { 
     $.ajax({ 
     type: 'GET', 
     contentType: 'application/json;charset=utf-8', 
     url: '<%: Url.Action("AdjustMaterials", "Docs", new {prodId = Model.ID, quantity = 1}) %>?=userDocId=' + value, 
     data: '', 
     dateType: 'json', 
     success: function (data) { 
      ... 
     } 
     } 
    } 
    } 
} 

Und der Controller:

public ActionResult AdjustMaterials(string prodId, string quantity, string userDocId) 
    { 
     ... 
     return Json("...", JsonRequestBehavior.AllowGet); 
    } 

JsonRequestBehavior.AllowGet weil ich GET verwenden, aber nicht necesary, wenn Sie verwenden POST