बिना किसी दृश्य में एकाधिक आंशिक दृश्य मान्य करें

मेरे पास View (Index.cshtml) है जिसमें दो मोडल (बूटस्ट्रैप मोडल) हैं।बिना किसी दृश्य में एकाधिक आंशिक दृश्य मान्य करें

मैंने प्रत्येक modal में Partial View लोड किया है। तो इस View में मेरे पास दो Partial Views (AddContractHistory.cshtml और AddCompany.cshtml) हैं।

मेरे पास एक मॉडल है कि उनमें से फ़ील्ड प्रत्येक Partial Views में मान्य होना चाहिए।

मुझे प्रत्येक आंशिक दृश्य को अलग से सत्यापित करने की आवश्यकता है।

एक ही समस्या अन्य लोगों में Html.BeginForm इस्तेमाल किया, लेकिन मैं MVC मॉड्यूल और DNN 8 पर काम Html.BeginForm या Ajax.Html.BeginForm का समर्थन नहीं किया है।

BeginForm के बिना यह काम करने के लिए, मैंने नीचे दिए गए कई तरीकों का परीक्षण किया लेकिन मैं इसे नहीं कर सका।

ASP.NET MVC Validation Groups?

ASP.NET MVC Multiple form in one page: Validation doesn't work

Index.cshtml (देखें)

@using MyProject.BusinessLogic 
<div class="form-group"> 
    <div class="col-sm-12"> 
     <button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');"> 
      <i class="fa fa-plus"></i> 
      New ContractHistory 
     </button> 
    </div> 
    <div class="col-sm-12"> 
     <button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');"> 
      <i class="fa fa-plus"></i> 
      New Company 
     </button> 
    </div> 
</div> 

<div id="AddContractHistory" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg" id="mymodal"> 
     @Html.Partial("AddContractHistory", new ContractHistory()) 
    </div> 
</div> 
<div id="AddCompany" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg" id="mymodal"> 
     @Html.Partial("AddCompany", new Company()) 
    </div> 
</div>

AddContractHistory.cshtml (PartialView)

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory> 

<div id="myform"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">contract</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="panel-body"> 
        <div class="form-horizontal"> 
         @Html.ValidationSummary() 
         @Html.HiddenFor(c => c.ID) 
         <div class="form-group"> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.PlaceName) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.ActivityDescription) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" class="btn btn-success" formaction="AddContractHistory"> 
submit 
      </button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> 
     </div> 
    </div> 
</div>

AddCompany.cshtml (PartialView)

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company> 

<div id="myform"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Company</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="panel-body"> 
        <div class="form-horizontal"> 
         @Html.ValidationSummary() 
         @Html.HiddenFor(c => c.ID) 
         <div class="form-group"> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.PlaceName) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           @Html.LabelFor(c => c.ActivityDescription) 
           <div class="input-group"> 
            <span class="input-group-addon"> 
             <i class="fa fa-file-text-o" aria-hidden="true"></i> 
            </span> 
            @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } }) 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" class="btn btn-success" formaction="AddCompany"> 
       submit 
      </button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> 
     </div> 
    </div> 
</div>

अग्रिम धन्यवाद!

स्रोत

2017-10-02 Reza Amini

डीएनएन से परिचित नहीं है, लेकिन आपको jquery सत्यापन के लिए

@SteveGreene मेरी समस्या डीएनएन से संबंधित नहीं है । वास्तव में, मैं नियंत्रण के दो समूहों और नियंत्रण सत्यापन के साथ में दो सबमिट बटन बनाएगा। क्या कोई रास्ता है? –

मुझे आपके उदाहरण में टैग नहीं दिखाई दे रहा है। क्या आपकी समस्या है कि सत्यापन बिल्कुल काम नहीं कर रहा है या आप आंशिक कक्षाओं को स्वतंत्र रूप से मान्य करना चाहते हैं? –

सामान्य रूप से, मैं आपको अपने विचारों में अधिक जेएस कोड (JQuery?) को एकीकृत करने की सलाह देता हूं। इस तरह आप कुछ ढांचे (डीएनएन) से कम बाध्य होंगे जो आपके द्वारा उपयोग की जाने वाली मूल एमवीसी कार्यक्षमता का समर्थन नहीं करता है। आखिरकार - एक वेब ऐप एचटीएमएल + जेएस + सीएसएस पर उबाल जाता है, इसलिए आपके पास बेहतर जेएस ज्ञान है - बेहतर नियंत्रण और लचीलापन जो आपको प्राप्त होता है।

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

जब पृष्ठ लोड होता है (जेएस इवेंट), आप जेएस के माध्यम से कुछ काम पूरा कर सकते हैं, जैसे अपने आंशिक विचारों को अपने वांछित <form> टैग के साथ लपेटना, और/या सबमिट घटनाओं से जुड़ना। उतना आसान है जितना।

लेकिन नियमित फॉर्म सबमिशन आपके पृष्ठ को रीफ्रेश करेगा, अन्य आंशिक दृश्य डेटा/राज्य खो देगा। इसलिए, यदि आपको आवश्यकता है, तो आप AJAX (फिर JQuery?) के माध्यम से अपना डेटा पोस्ट/प्राप्त कर सकते हैं और तदनुसार अपना पृष्ठ अपडेट कर सकते हैं।

<form data-reza-ajaxform="true" 
     data-reza-targetId="#your-htmlcontrol-id" 
     action="@Url.Action("Your Action")" 
     method="POST/GET"> 
      <div class="input-group"> 
       <input type="text" ...> 
       ... 
       <button class="btn btn-default" type="submit">Go!</button> 
      </div> 
</form>

फिर, अपनी लिपि में आप कुछ इस तरह कर सकते हैं:

$('form[data-reza-ajaxform]').on('submit', submitAjaxForm); 
... 
function submitAjaxForm(e) { 
    var $form = $(this); 

    var options = { 
     url: $form.action, 
     method: $form.method, 
     data: $form.serialize() 
    }; 

    $.ajax(options) 
     .success(function(res) { 
      var $target = $($form.attr('data-reza-targetId')); 

      $target.html(res); 
      $target.effect('highlight', 'slow'); 
    }); 

    e.preventDefault(); 
}

इस तरह से आप अपने पृष्ठ और अपने हिस्से पर पूर्ण नियंत्रण कर देगी। कोई फर्क नहीं पड़ता कि आप किस ढांचे के साथ काम करेंगे।क्या बेहतर हो सकता है? :)

स्रोत

2017-10-04 07:42:45 graumanoz

बिना किसी दृश्य में एकाधिक आंशिक दृश्य मान्य करें

उत्तर

संबंधित मुद्दे