अजाक्स पोस्ट के माध्यम से मॉडल परिवर्तनों के साथ दृश्य अपडेट करना - एमवीसी 3

Question

मैं अपने मॉडल मूल्य को अपडेट करने के लिए अजाक्स (मुझे लगता है) कॉल का उपयोग करने की कोशिश कर रहा हूं और फिर उस नए मूल्य को दृश्य में प्रतिबिंबित किया गया है। मैं इस पल के लिए परीक्षण उद्देश्यों के लिए इसका उपयोग कर रहा हूं।

यहाँ अवलोकन है:

मॉडल

public class MyModel 
{ 
    public int Integer { get; set; } 
    public string Str { get; set; } 
} 

नियंत्रक

public ActionResult Index() 
    { 
     var m = new MyModel(); 
     return View("Test1", m); 
    } 

    [HttpPost] 
    public ActionResult ChangeTheValue(MyModel model) 
    { 
     var m = new MyModel(); 
     m.Str = model.Str; 
     m.Str = m.Str + " Changed! "; 
     m.Integer++; 

     return View("Test1", m); 

    } 

देखें

@model Test_Telerik_MVC.Models.MyModel 
@using Test_Telerik_MVC.Models 
@{ 
    ViewBag.Title = "Test1"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<h2> 
    Test1</h2> 
@if (false) 
{ 
    <script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script> 
} 
<h2> 
    ViewPage1 
</h2> 

<div> 
    <input type="button" onclick="changeButtonClicked()" id="changeButton" value="Click Me!" /> 
    <input type="text" value="@Model.Str" class="txt" id="str" name="Str"/> 
    <div></div> 
</div> 

<script type="text/javascript"> 

    function changeButtonClicked() { 
     var url = '@Url.Action("ChangeTheValue", "Test1")'; 
     var data = '@Model'; 
     $.post(url, data, function (view) { 
      $("#Str").value = '@Model.Str'; 
     }); 
    } 

</script> 

मूल रूप से दृश्य टेक्स्टबॉक्स के साथ एक बटन प्रस्तुत करता है। मेरा एकमात्र उद्देश्य टेक्स्टबॉक्स में बस मेरे मॉडल (स्ट्र प्रॉपर्टी) के मूल्य को प्रदर्शित करना है।

मैंने परिवर्तन के विभिन्न संयोजनों की कोशिश की है बटन बटन() फ़ंक्शन का कोई फायदा नहीं हुआ। टेस्ट 1 मेरे नियंत्रक का नाम है। जो मुझे समझ में नहीं आता है वह है जब मैं इसे डीबग करता हूं, नियंत्रक कार्रवाई आग लगती है और मेरे मान सही ढंग से सेट करती है। यदि मैं इनपुट टैग के "@ Model.Str" अनुभाग पर ब्रेकपॉइंट डालता हूं, तो यह मुझे दिखाता है कि मेरा @ मॉडल.tr बदल गया है! क्या सही है। हालांकि, जैसे ही मेरी सफलता कार्य जावास्क्रिप्ट में आग लगती है, वैसे ही मूल्य वापस इसके मूल मूल्य पर वापस आ जाता है।

मैं इसे @ html.BeginForm() सेक्शन में सबमिट और लपेटने के लिए इनपुट प्रकार को बदलकर इसे काम कर सकता हूं लेकिन मुझे आश्चर्य है कि यह इस तरह से कैसे किया जाए? या इसे पूरा करने का एकमात्र तरीका सबमिट करें?

धन्यवाद

Answer 1

jQuery में पहली बात की एक इनपुट का उपयोग करने के

$("#Str").val(@Model.Str); 

अगला हम नियंत्रक को देखेंगे पोस्ट कार्रवाई परिणाम आप कर रहे हैं में, एक मूल्य निर्धारित करने के लिए उचित तरीके से अपने अजाक्स कॉल में पूरे दृश्य को वापस कर रहा है। इसका मतलब है कि सभी एचटीएमएल, स्क्रिप्ट संदर्भ, और जावास्क्रिप्ट आपके jquery पोस्ट अनुरोध में वापस आ रहे हैं। चूंकि आप अपडेट करने का प्रयास कर रहे हैं, स्ट्रिंग नामक इनपुट का मूल्य है, मैं बस उस मान को जेसन के रूप में वापस कर दूंगा और कुछ भी नहीं।

[HttpPost] 
public ActionResult ChangeTheValue(MyModel model) 
{ 
    var m = new MyModel(); 
    m.Str = model.Str; 
    m.Str = m.Str + " Changed! "; 
    m.Integer++; 

    return Json(m.Str); 

} 

अगला मैं एक jQuery तो आप कर सकते हैं में अपने html आदानों जगह आप के लिए अपने मॉडल को क्रमानुसार हैं और फिर आप होने के लिए अपने jQuery पोस्ट कोड बदल सकते हैं:

function changeButtonClicked() { 
    var url = '@Url.Action("ChangeTheValue", "Test1")'; 
    $.post(url, $('form').serialize(), function (view) { 
     $("#Str").val(view); 
    }); 
} 

सभी serialize कर रही है आपके फॉर्म में इनपुट को एक स्ट्रिंग में एन्कोड कर रहा है और यदि सबकुछ ठीक से नामित है तो aps.net इसे आपके मॉडल पर वापस बांध देगा।

यदि आपको अपना मार्ग अजाक्स कॉल और पूर्ण अनुरोध दोनों को संभालने की आवश्यकता है, तो आप अनुरोध का परीक्षण करने के लिए एएसपीनेट के IsAjaxRequest फ़ंक्शन का उपयोग कर सकते हैं और अनुरोध के आधार पर अलग-अलग परिणामों को वापस कर सकते हैं या नहीं। आप अपने नियंत्रक में कुछ इस तरह करना होगा:

[HttpPost] 
public ActionResult ChangeTheValue(MyModel model) 
{ 
    var m = new MyModel(); 
    m.Str = model.Str; 
    m.Str = m.Str + " Changed! "; 
    m.Integer++; 

    if (Request.IsAjaxRequest) { 
     return Json(m.Str); 
    } 
    else { 
     return View("Test1", m); 
    } 
} 

ActionResult में ऊपर आप सब कुछ आप पहले किया था कर रहे हैं, लेकिन अब अनुरोध प्रकार परीक्षण कर रहे हैं और अगर यह ajax है कि आपको अपनी स्ट्रिंग मान की एक Json परिणाम लौटने। अगर अनुरोध अजाक्स कॉल से नहीं था तो पूर्ण दृश्य (एचटीएमएल, स्क्रिप्ट, आदि) ब्राउज़र में प्रदर्शित होने के लिए वापस कर दिए जाते हैं।

मुझे उम्मीद है कि यह आपकी मदद करता है और जो आप खोज रहे थे।