गतिशील जावास्क्रिप्ट/jQuery

Question

का उपयोग कर एक एएसपी नेट MVC उस्तरा ध्यान में रखते हुए इस सूची में नीचे एक बूंद भरें, मैं एक ड्रॉपडाउन सूची इस प्रकार है की है।

मैं जावास्क्रिप्ट/jQuery/अजाक्स का उपयोग कर एक बटन क्लिक या क्लाइंट साइड एक्शन के आधार पर डिवाइसमोडलिस्ट को गतिशील रूप से कैसे भर सकता हूं?

Answer 1

आप में इस लटकती बाह्यरूप सकता है एक आंशिक:

@model MyViewModel 
@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList) 

फिर अपने मुख्य दृश्य में

कुछ कंटेनर के अंदर यह शामिल हैं:

@model MyViewModel 
... 
<div id="ddlcontainer"> 
    @Html.Partial("Foo", Model) 
</div> 
... 

तो आप एक नियंत्रक कार्रवाई जो कुछ पैरामीटर लेता है हो सकता था और इसके मूल्य के आधार पर यह आंशिक रूप से प्रस्तुत करता है:

public ActionResult Foo(string someValue) 
{ 
    MyViewModel model = ... go ahead and fill your view model 
    return PartialView(model); 
} 

अब आखिरी हिस्सा कुछ घटना होने पर ड्रॉप डाउन सूची को रीफ्रेश करने के लिए AJAX अनुरोध भेजना है। उदाहरण के लिए कुछ अन्य DDL परिवर्तन के मूल्य (या कुछ और, एक बटन पर क्लिक करें या जो कुछ भी) जब:

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the ddl container with 
       // the partial HTML returned by the Foo controller action 
       $('#ddlcontainer').html(result); 
      } 
     }); 
    }); 
}); 

एक और संभावना JSON का उपयोग करते हुए होते हैं। आपकी Foo नियंत्रक कार्रवाई केवल कुछ जेसन ऑब्जेक्ट को वापस लाएगी जिसमें नई कुंजी/मूल्य संग्रह शामिल है और AJAX अनुरोध की सफलता कॉलबैक में आप ड्रॉप डाउन सूची को रीफ्रेश करेंगे। इस मामले में आपको इसे अलग आंशिक रूप से बाहरी करने की आवश्यकता नहीं है। उदाहरण के लिए: एक ऐसी ही उदाहरण के लिए

public ActionResult Foo(string someValue) 
{ 
    return Json(new[] { 
     new { value = '1', text = 'text 1' }, 
     new { value = '2', text = 'text 2' }, 
     new { value = '3', text = 'text 3' } 
    }); 
} 

आप following answer पर एक नज़र हो सकता है:

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the dropdown list with 
       // the JSON values returned from the controller action 
       var selectedDeviceModel = $('#SelectedDeviceModel'); 
       selectedDeviceModel.empty(); 
       $.each(result, function(index, item) { 
        selectedDeviceModel.append(
         $('<option/>', { 
          value: item.value, 
          text: item.text 
         }) 
        ); 
       }); 
      } 
     }); 
    }); 
}); 

और अंत में अपने फू नियंत्रक कार्रवाई Json वापस आ जाएगी।