Asp.Net MVC में, कोई नियंत्रण मान नहीं है जब आपके पास वेब रूपों में कोई पोस्टबैक व्यवहार नहीं होता है। आप अभी भी फॉर्म पोस्ट कर सकते हैं और एक्शन विधि में, आप चयनित मान (पोस्ट वैल्यू) पढ़ सकते हैं और अपने टेक्स्ट बॉक्स के लिए मान लोड कर सकते हैं और पेज को फिर से प्रस्तुत कर सकते हैं। यह पूर्ण रूप से पोस्टिंग है। लेकिन AJAX का उपयोग करके ऐसा करने के बेहतर तरीके हैं ताकि उपयोगकर्ता को पूर्ण पृष्ठ रीलोड का अनुभव न हो।
आप क्या करते हैं, जब उपयोगकर्ता ड्रॉपडाउन बदलता है, तो चयनित आइटम मान प्राप्त करें और डेटा को प्राप्त करने के लिए अपने सर्वर पर कॉल करें जिसे आप इनपुट फ़ील्ड में दिखाना चाहते हैं और सेट करें।
अपने पृष्ठ के लिए व्यूमोडेल बनाएं।
public class CreateViewModel
{
public int Width { set; get; }
public int Height{ set; get; }
public List<SelectListItem> Widgets{ set; get; }
public int? SelectedWidget { set; get; }
}
अभी प्राप्त कर कार्रवाई में, हम इस का एक उद्देश्य विजेट संपत्ति पैदा करेगा, प्रारंभ और देखने के लिए
public ActionResult Create()
{
var vm=new CreateViewModel();
//Hard coded for demo. You may replace with data form db.
vm.Widgets = new List<SelectListItem>
{
new SelectListItem {Value = "1", Text = "Weather"},
new SelectListItem {Value = "2", Text = "Messages"}
};
return View(vm);
}
भेजने और आपके विचार जो दृढ़ता से CreateViewModel
को लिखा गया बनाने
@model ReplaceWithYourNamespaceHere.CreateViewModel
@using(Html.BeginForm())
{
@Html.DropDownListFor(s => s.SelectedWidget, Model.Widgets, "Select");
<div id = "editablePane" >
@Html.TextBoxFor(s =>s. Width,new { @class ="myEditable", disabled="disabled"})
@Html.TextBoxFor(s =>s. Height,new { @class ="myEditable", disabled="disabled"})
</div>
}
उपर्युक्त कोड चौड़ाई और ऊंचाई के लिए SELECT तत्व और 2 इनपुट टेक्स्ट फ़ील्ड के लिए HTML मार्कअप प्रस्तुत करेगा। (पृष्ठ पर "स्रोत देखें" करें और देखें)
अब हमारे पास कुछ jQuery कोड होगा जो SELECT तत्व की change ईवेंट को सुनता है और चयनित आइटम मान पढ़ता है, सर्वर को AJAX कॉल करने के लिए सर्वर पर कॉल करता है चयनित विजेट के लिए ऊंचाई और चौड़ाई।
<script type="text/javascript">
$(function(){
$("#SelectedWidget").change(function() {
var t = $(this).val();
if (t !== "") {
$.post("@Url.Action("GetDefault", "Home")?val=" + t, function(res) {
if (res.Success === "true") {
//enable the text boxes and set the value
$("#Width").prop('disabled', false).val(res.Data.Width);
$("#Height").prop('disabled', false).val(res.Data.Height);
} else {
alert("Error getting data!");
}
});
} else {
//Let's clear the values and disable :)
$("input.editableItems").val('').prop('disabled', true);
}
});
});
</script>
हमें यकीन है कि हम एक कार्रवाई विधि ajax कॉल को संभालने के लिए GetDetaultHomeController अंदर बुलाया है बनाने की जरूरत है।
[HttpPost]
public ActionResult GetDefault(int? val)
{
if (val != null)
{
//Values are hard coded for demo. you may replae with values
// coming from your db/service based on the passed in value (val.Value)
return Json(new { Success="true",Data = new { Width = 234, Height = 345}});
}
return Json(new { Success = "false" });
}
एक नियंत्रक कार्रवाई करें जो जेसन डेटा लौटाता है और उस क्रिया को ड्रॉपडाउन के अजाक्स कॉल का आदान-प्रदान करता है। AJAX प्रतिक्रिया (जेसन) पर आपको मूल्य मिलेगा, फिर उन मानों को फ़ील्ड में जेसन प्रतिक्रिया दें। –
आप एक ही परिणाम प्राप्त करने के लिए एक क्रिया विधि पर पोस्ट कर सकते हैं, लेकिन [यहां एक उदाहरण है] (http://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp -net-mvc-3-with-c-sharp) जावास्क्रिप्ट – markpsmith
के साथ कैसे करें, निर्भर करता है कि आप इसे स्वयं दृश्य पर करना चाहते हैं, या आप वास्तव में बैक एंड से कुछ पूछना चाहिए? – Theunis